文章目录

• el的两种写法
• data的两种写法

Vue学习目录

上一篇：（四）Vue之数据绑定

容器：

	
hello,{{name}}

el的两种写法

• (1).new Vue时候配置el属性。

	new Vue({el:'#root',data:{name:'jack'}});

• (2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
  比较灵活，mount翻译为挂载，可以不在页面加载的时候绑定容器，想要过几秒再绑定容器就可以使用mount

经过3秒挂载：

	const v = new Vue({//el:'#root',data:{name:'jack'}});setTimeout(() => {v.$mount('#root')},3000)

效果：一开始没有挂载，页面显示{{name}}，经过三秒后，页面解析，显示jack
没有经过3秒：

经过3秒：

data的两种写法

• (1).对象式

	new Vue({el:'#root',data:{name:'jack'}});

• (2).函数式
  函数式写法，这个函数有要求，必须返回一个数据，这个数据就是data的数据。

	new Vue({el:'#root',data:function (){return{name:'jack'}}});

这个函数式写法一般会简写：

	new Vue({el:'#root',data(){return{name:'jack'}}});

注意1：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
注意2：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。这是因为在箭头函数里是没有this的，会向外寻找this
例如：data普通函数和箭头函数this比较
普通函数：

	 new Vue({el:'#root',data(){console.log(this)return{name:'jack'}}});

箭头函数：

	new Vue({el:'#root',data:()=>{console.log(this)return{name:'jack'}}});

普通函数效果：

箭头函数效果：