Vue7-el和data的两种写法

1.el的两种写法

1创建Vue实例的时候通过el指定属性

Vue7-el和data的两种写法_第1张图片

2. 创建Vue实例之后,通过vm.$mount('#demo')进行挂载

Vue7-el和data的两种写法_第2张图片

 console.log(v):此处的v是Vue的实例对象

Vue7-el和data的两种写法_第3张图片

在往下看__proto__属性,这里是Vue构造类的方法,其中的方法vue实例都可以使用,比如$mount函数

Vue7-el和data的两种写法_第4张图片

 2.data的两种写法

1.对象式写法

Vue7-el和data的两种写法_第5张图片

2.函数式写法,该函数必须返回数据,推荐是用函数式

Vue7-el和data的两种写法_第6张图片

该function是vue给你调用的 ,但是必须是普通的函数,打印this可以看到,这里的this是vue实例Vue7-el和data的两种写法_第7张图片

 因为是对象内的方法,可以删除冒号和function

Vue7-el和data的两种写法_第8张图片

如果说不是普通函数,而是箭头函数,则此处的this则是window,因为箭头函数没有this属性,只能向上找,最后找到window对象 ,以后很容易出错。

Vue7-el和data的两种写法_第9张图片

你可能感兴趣的:(Vue教程系列,vue.js,前端,javascript)