Vue学习目录
上一篇:(四)Vue之数据绑定
容器:
hello,{{name}}
new Vue({el:'#root',data:{name:'jack'}});

经过3秒挂载:
const v = new Vue({//el:'#root',data:{name:'jack'}});setTimeout(() => {v.$mount('#root')},3000)
效果:一开始没有挂载,页面显示{{name}},经过三秒后,页面解析,显示jack
没有经过3秒:

经过3秒:

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

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'}}});
普通函数效果:

箭头函数效果:
