细数vue实例对象中的属性，方法，对象

前言

vue是一套用于构建用户界面的渐进式框架。

实例的时候定义data属性既可以是一个对象，也可以是一个函数

组件中定义vue，只能是方法

1
2
3
4
5
6
7
8
9
10
11
12
13
const app=new Vue({
            el:'#app',
            // 对象格式
            data:{
                foo:'foo'
            },
            // 方法格式
            data(){
                return{
                    foo:'foo'
                }
            }
        })

1.函数

（1）定义

avaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

（2）调用

  • 独立调用：func()，函数独立调用，this指向window，;

  • 方法调用：obj.func()，函数作为obj的一个方法（属性）调用，this指向obj；

  • 构造函数调用：new Func()，如果在一个函数前面带上 new 关键字来调用， 那么背地里将会创建一个连接到该函数的 prototype 的新对象，this指向这个新的对象；

  • call、apply、bind调用：func.call(obj,value1,value2); func.apply(obj,[value1,value2])； func.bind(obj,value1,value2)(); func.bind(obj)(value1,value2); 动态改变 this 的指向 obj；

2.方法

  • 方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。函数（function）是一段代码，需要通过名字来进行调用。它能将一些数据（函数的参数）传递进去进行处理，然后返回一些数据（函数的返回值），也可以不返回数据。当将函数和对象和写在一起时，函数（function）就变成了方法（method）。
1
2
3
4
var vm = new Vue({
    methods:{
// 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}});

例如在 methods 中定义一个名为 show 的方法：

1
2
3
4
5
6
methods:{
	show: function(){
		console.log("显示内容")
	}
  //可以简写为   show(){console.log("显示内容")}
}

3.对象

1
2
3
4
5
6
7
// 下面定义一个obj对象；foo是对象的属性名，后面的函数是属性值；
        // 则foo就成了对象的一个方法，调用这个方法使用 obj.foo() 格式
        var obj={
            foo:function(){
                console.log(1);
            }
        }

在vue实例中，我们在计算属性中用到函数时（例如get和set函数），需要写成对象的格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
            el:'#app',
            data(){
                return{
                    a:1
                }
            },
computed:{
  //此时foo是属性名，后面的对象是属性值
  foo:{
    get(){},
    set(){}
  }
}
        })