hualinux 进阶 vue 1.4：挂载点、模板、实例的关系

目录

一、挂载点

1.1 挂载点的概念

1.2 挂载点的作用

二、 模板template

2.1 说明

2.2 注意事项

---

前章说vue实例的两个重要参数el挂载点和data数据显示，现在再说挂载点、模板、实例的关系。

一、挂载点

1.1 挂载点的概念

引用《hualinux 进阶 vue 1-1.2：使用webStrom创建vue例子（标签引入）》中的代码来说明

<div id="root">hello {{ msg }}</div>
<script>
    new Vue({         //实例
        el: "#root", //挂载点
        data: {
            msg: "vue"
        }
    })
</script>

 上面中vue的el参数，指定的id为”root”的标签，而这个标签就叫Vue实例的挂载点.

ps：标签下面可以包含多重标签

1.2 挂载点的作用

Vue只会处理挂载点下面的内容！

比如把上面的代码修改一下为：

<div id="root">hello {{ msg }}</div>
<div >hello2 {{ msg }}</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "vue"
        }
    })
</script>

运行结果为： 

发现hello2那个div中的msg内容并没有被代替，因为这个msg并不在这个挂载点之下

二、 模板template

2.1 说明

<div id="root">
    <h2>hello {{msg}}</h2>
</div>

在挂载点里面的内容都称为模板，如上面例子中的

<h2>hello {{msg}}</h2>

模板还有另一个编写方式可以直接使用Vue中的template参数

<div id="root"></div>
<script>
    new Vue({          //实例
        el: "#root",   //挂载点
        template: "<h2>hello {{msg}}</h2>", //模板
        data: {
            msg: "vue"
        }
    })
</script>

运行结果，不变，如下图所示：

2.2 注意事项

template中只能有一个根元素，即最外围只能有一个标签，如果是多个同级的会报错，如上面例子中把模板

        template: "<h2>hello {{msg}}</h2>",

改为最多层是2个同级元素试下，如

         template: "<h2>hello {{msg}}</h2><p>这是模板中的字段</p>",

运行发现<p>标签内容不显示，并报如下错误：

正确写法，可以把它们统一放在<div>中

          template: "<div><h2>hello {{msg}}</h2><p>这是模板中的字段</p></div>",

运行效果如下：