Vue的三大模板

HTML模板

特点：基于DOM的模板，仅仅能解析一个字符串，如果不使用v-html，则无法解析标签。

插值：

文本：使用{{ }}双大括号语法。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。通过v-once指令，我们也可以一次性地插值，当数据改变时，插值处内容不会更新。
```
<span v-once>这个将不会改变：{{message}}</span>
```

原始HTML：双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的 HTML，你需要使用 v-html 指令。

<div v-html="message2" class="demo">
这里面写的内容都会失效 包括这句话~
</div>
let vm = new Vue({
data : {
   message2 : `
            <div>html模板无法解析标签 <em>仅仅能生成字符</em>{{number1}}
            一旦使用v-html 这个元素中所有的内容都会被这条数据所代替
             标签会被解析 但是无法解析{{number}}这样的vue手法</div>
          `
        }
            })
// 此时div.demo这个DOM元素会保留的 但是里面的所有内容
// 都被替换成了vm.message2中的内容 标签能够正常的解析并存放在div.demo中
// 但是存在的问题是{{number}}这样的vue手法无法被识别 依然被当作字符串保存出来

属性：使用v-bind进行绑定，可以响应式变化。
使用Javascript表达式：对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
```
<div v-bind:id=" 'list' + id "></div>  // success
<div v-bind:id=" var number = 1 ">  // error
```
请区分表达式与语句

字符串模板

特点：vm.template这个属性直接决定了内容，会将html模板覆盖掉，只有一个根节点。

<div id="id2"></div>
let vm2 = new Vue({
        template : `
        <div style="background-color: rgb(128, 25, 222)">
            <span>span1</span>
            <span>span2</span>
            <span>span3</span>
        </div>
        `
})
// 一旦正确的设置template属性 这个div#id2直接没了
// 取而代之的template中的内容 这也就是一个根节点的必要性
// 这里与v-html绑定是有所不同的

其他引入方式：将html结构写在一对script标签中，设置type="x-template"

<script type="x-template" id="app">
    <div>
        <p>你的名字是{{list.name}}</p>
    </div>
</script>

const vm = new Vue({
    ···
    template : "#app",
    ···
})

render函数

特点:更加接近底层，直接使用函数与虚拟DOM来生成一个DOM结构。

使用：

const vm = new Vue({
    el : "#wrap",
    render(createElement){
        return createElement{标签名，数据对象，子元素}
    }
})

以上就是Vue的三大模板

记录我的Vue.js从会用到精通之路 3

Vue的三大模板

HTML模板

字符串模板

render函数