提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
el与data的两种写法
el:用于指定Vue实例为哪个容器所服务。
data:用于储存容器所调用的数据。
一、el写法
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script>
let vm = new Vue({
el: "#root",
data: {
name: "小爱同学",
}
})
</script>
第一种写法,在创建Vue实例时,就创建指出所需要的容器对象。
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script>
let vm = new Vue({
data: {
name: "小爱同学",
}
})
v.$mount("#root")
</script>
第二种写法,在创建完Vue实例后,使用v.$mount(),创建指出所需要的容器对象。
二、data写法
1.对象式
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script>
let vm = new Vue({
el: "#root",
data: {
name: "小爱同学",
}
})
</script>
2.函数式
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script>
let vm = new Vue({
el: "#root",
data() {
return {
name: "小爱同学",
}
}
})
</script>
总结
(1) 创建data函数式写法更优,组件必须使用函数式写法。
(2) 由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例对象。