新玩家Vue笔记04

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

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实例对象。