模板语法是什么？官方网站有解释：允许开发者 声明式 地将 DOM 绑定至 底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

我的理解是：模板语法是将vue实例中的data中的数据渲染到页面中的函数。

1.文本插值：使用“Mustache”语法 (双大括号)  {{msg}}

<div id="app">{{msg}}
</div>
<script>let vm = new Vue({el:'#app',data:{msg:'hello vue'}})
</script>

        {{msg}}可以将js中的vue实例中的data数据渲染到页面上来。效果如下图所示：

      【双大括号内部可以放js表达式，比如：{{msg+''nihao"}}】

        当msg这个数据发生改变时，插值处内容也会发生变化。

        但是，使用了v-once命令之后，当msg数据发生改变时，插值处的内容不会跟着发生改变。

<div v-once>{{msg}}</div>

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

<div v-html='htmlCode'></div>

下面是文本插值和v-html差值的区别：

    <div id="app">{{htmlCode}}<div v-html='htmlCode'></div></div><script>let vm = new Vue({el:'#app',data:{htmlCode:`<div><h1>${this.msg}</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5></div>`},methods:{},created(){}})</script>

 根据以上代码，文本插值显示为这样：

v-html插值显示为这样：

 3.v-bind指令：动态绑定元素上的属性。

        Mustache 语法不能作用在 HTML attribute（属性） 上，遇到这种情况应该使用v-bind指令。

<div v-bind:title='title'>div2</div>

        也可以简写为

<div :title='title'>div2</div>

4.v-on指令：动态绑定事件

<button v-on:click='clickHandler'>修改数据</button>

v-on可以简写为：

<button @click='clickHandler'>修改数据1</button>

        例子：

    <div id="app">{{msg}}<button v-on:click='clickHandler'>修改数据</button><!-- 在=后面直接写修改的数据，就不需要再方法中设置this了--><button @click="msg='hello v-on'">修改数据2</button></div><script>let vm = new Vue({el:'#app',data:{msg:'hello vue',},methods:{findAllCategories(){console.log('查询')},clickHandler(){this.msg='hello v-on'}},created(){this.findAllCategories()}})</script>

5.条件渲染

        1）v-if指令：用于条件性地渲染一块内容，将v-if部署到html元素上，在vue实例中的data中控制该元素在页面中的渲染，和v-else配对使用，这块内容只会在指令的表达式返回true值的时候被渲染。

    <div id="app"><div v-if="isLogin">请登录</div><div v-else>登录成功，欢迎您</div></div><script>let vm = new Vue({el:'#app',data:{isLogin:true},})</script>

当data中的isLogin为true时，则“请登录”会渲染在网页上；当data中的 isLogin为false时，则“请登录”会在页面中隐藏，从而显示“登录成功，欢迎您”。

        2）v-show：带有v-show的元素时钟会被渲染并且保留在dom中，v-show只是简单的切换原色的css属性display，v-show不支持template元素，也不支持v-else。

 二者的区别：

                v-if v-else：通过控制dom节点的渲染，实现显示与隐藏

                v-show：通过控制dom节点css样式中display，来实现显示与隐藏

                频繁的显示与隐藏某个组件时，用v-show较好；v-if会频繁渲染dom树，开销较大，造成资源，影响代码运行效率

6.列表渲染v-for

    <div id="app"><ul><li v-for="(item,index) in categories">索引：{{index}}编号：{{item.id}}名称：{{item.name}}</li></ul></div><script>let vm = new Vue({el:'#app',data:{categories:[]},methods:{findAllCategories(){this.categories = [{id:1,name:'校园新闻'},{id:2,name:'娱乐新闻'},{id:3,name:'热点聚焦'},{id:4,name:'体坛赛事'},]}},created(){this.findAllCategories()}})</script>

在页面显示为：

 7.class绑定与style绑定

        1）class绑定：给元素绑定class，可以使该元素使用多个class类名，利用true和false来控制元素是否要用这个class类名。（true是使用该类名，false是不适用该类名）

        html代码

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

        js代码

data: {isActive: true,hasError: false
}

 上面两个代码渲染出来的效果是：

<div class="static active"></div>

        2） style绑定：将style绑定到元素上，这样元素就可以使用多个样式，并且可以在js中修改要使用该样式。

        html代码：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

        js代码：

data: {activeColor: 'red',fontSize: 30
}

他们呈现出来的效果是：

<div v-bind:style="{ color: red, fontSize: 30px }"></div>