在学模板语法前，先了解两个概念，一个是数据绑定，一个是指令。数据绑定，形式就是两组嵌套的花括号，长这样婶儿的{{}}，在这两个花括号里头，我们可以放置需要展示的动态数据（注意，放在双花括号里的内容，都会被解释为普通文本），所谓的数据绑定，我理解的就是用这个形式将需要展示的数据，绑定到对应的元素上。而指令呢，说白了，就是控制使用它的元素去做指定的事情，在vue中，指令的形式是v-，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。具体的我们用一下就知道了~
插值的方法
下面开始学习模板语法，先说一下插值的方法，在上一篇文章中，我们写的第一个vue实例，用双花括号绑定了“hello vue”的字符串{{msg}}，这就是插值最直接的使用方法，另外，我们还可以用指令的方式去插值，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <p>{{sayHello}}</p> <p v-text="vText"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text' } }); </script> </body> </html>
上面，我们使用v-text指令同样实现了插值。另外，我们还可以使用v-html指令，来插入html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <p>{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>' } }); </script> </body> </html>
另外，我们不仅可以给标签里插值，还可以使用v-bind指令给标签属性插值哦~，具体使用方式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont{ font-size: 20px; color: pink; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont' } }); </script> </body> </html>
通过上面的例子，我们给包裹hello的p标签添加了一个类，从而给它加上了特有的样式。
在上面所以用的例子中，我们都是通过指令或者数据绑定的方式，直接插入值或属性值，其实，我们还可以在这些的基础上，实现表达式，但是只能是单个表达式，在表达式中，我们可以进行运算或者使用方法等等，具体看下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont{ font-size: 20px; color: pink; font-weight: bold; } .num0{ font-size: 18px; color: green; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> <p v-bind:class="'num' + num">{{(num+1)*10}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont', num: 0 } }); </script> </body> </html>
上面<p v-bind:class="'num' + num">{{(num+1)*10}}</p>，就使用了两个表达式，一个指定class，一个显示值。
在文章最开始的时候，我们已经理解过了指令的含义了，上面我们用到的指令有v-text、v-html、v-bind，下面我们就来看看vue常用的指令都有哪些：
v-text：用于插值，更新元素的显示内容；
v-html：用于更新元素的innerHTML；
v-show：根据表达式值的真假，切换display属性；
v-if：根据表达式的真假来渲染应用的元素；
v-else：不需要表达式，不过需要跟在v-if或者v-else-if后面使用；
v-else-if：根据表达式的真假来渲染应用的元素，不过需要跟在v-if或者v-else-if后面使用；
v-for：根据源数据多次渲染元素或者模板块；
v-model：随表单控件类型不同而不同。在表单控件或者组件上创建双向绑定。
修饰符：
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
v-on：用于绑定事件监听器，这个是很重要的指令哦，而且，因为用的相对来讲会比较频繁，她是有缩写的，而且也有修饰符（修饰符指定事件的触发条件），具体如下：
缩写：@
修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
示例：
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：
<my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
v-bind：动态绑定一个或者多个特性，v-bind也是有缩写的，而且也有修饰符，具体如下：
缩写：‘:’
修饰符：
.prop - 被用于绑定 DOM 属性 (property)。
.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
示例：
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
v-once：不需要表达式，只渲染元素或者组件一次。
以上就是vue比较常用的指令了，最后，我们实践一下v-on的使用方法（^-^因为绑定事件是比较重要的啦）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue模板语法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .hellofont { font-size: 20px; color: pink; font-weight: bold; } .num0 { font-size: 18px; color: green; font-weight: bold; } </style> </head> <body> <div class="myApp"> <p v-bind:class="helloStyle">{{sayHello}}</p> <p v-text="vText"></p> <p v-html="vHtml"></p> <p v-bind:class="'num' + num">{{(num+1)*10}}</p> <p> <a :href="baiduUrl">点我百度一下</a> </p> <p> <!-- <button v-on:click="plusNum()">点我递增数字</button> --> <button @click="plusNum()">点我递增数字</button> </p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { sayHello: 'hello Vue!', vText: 'how to use v-text', vHtml: '<span>how to ues v-html</span>', helloStyle: 'hellofont', baiduUrl: 'http://www.baidu.com', num: 0 }, methods: { plusNum: function() { this.num++; } } }); </script> </body> </html>