一起学Vue之模板语法
概述
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
普通文本
数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
1 <span>{{msg}}span>
通过使用 v-once 指令，执行一次性插值，当数据改变时，内容不会更新。
1 <span v-once>这个将不会改变: {{ msg }}span>
输出Html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
1 2 <p>Using mustaches: {{ rawHtml }}p> 3 4 <p>Using v-html directive: <span v-html="rawHtml">span>p>
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
1 <div v-bind:id="dynamicId">我的ID是{{dynamicId}}div> 2 3 <button v-bind:disabled="isButtonDisabled">Buttonbutton>
注意：如果 isButtonDisabled 的值是 null、undefined 或 false， 则 disabled 特性甚至不会被包含在渲染出来的
使用 JavaScript 表达式
不仅能绑定简单的属性键值，还提供了完全的 JavaScript 表达式支持。
如下所示：
1 HTML{{ number + 1 }} 2 <br /> 3 {{ ok ? 'YES' : 'NO' }} 4 <br /> 5 {{ message.split('').reverse().join('') }} 6 <br /> 7 <div v-bind:id="'list-' + id">我的id是 list-{{id}}div>
注意： 每个绑定都只能包含单个表达式，语句不会生效。
指令
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
1 <p v-if="seen">现在你看到我了p>
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
1 <a v-bind:href="url" target="_blank">点击链接Baidua>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 另一个例子是 v-on 指令，它用于监听 DOM 事件：
1 <button v-on:click="doSomething">点击弹出框button>
动态参数
你可以使用动态参数为一个动态的事件名绑定处理函数：在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
1 <a v-bind:[attributename]="url" target="_blank"> 点击我进入 a> 2 <br /> 3 <a v-on:[eventname]="doSomething"> ... a>
注意，参数表达式的写法存在一些约束：
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
1 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidua>
指令缩写
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
1 2 3 <a v-bind:href="url" target="_blank">完整写法a> 4 5 <a :href="url" target="_blank">缩写法a> 6 7 8 <button v-on:click="doSomething">完整写法button> 9 10 <button @click="doSomething">缩写法button>
关于本例子中的完整代码，如下所示：
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>一起学Vuetitle> 6 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> 8 9 head> 10 <body> 11 <div id="app"> 12 16 <h2>普通文本h2> 17 20 <span>{{msg}}span> 21 <br /> 22 25 <span v-once>这个将不会改变: {{ msg }}span> 26 <h2>输出Htmlh2> 27 32 33 <p>Using mustaches: {{ rawHtml }}p> 34 35 <p>Using v-html directive: <span v-html="rawHtml">span>p> 36 <h2>特性h2> 37 40 <div v-bind:id="dynamicId">我的ID是{{dynamicId}}div> 41 46 <button v-bind:disabled="isButtonDisabled">Buttonbutton> 47 <h2>使用 JavaScript 表达式h2> 48 52 HTML{{ number + 1 }} 53 <br /> 54 {{ ok ? 'YES' : 'NO' }} 55 <br /> 56 {{ message.split('').reverse().join('') }} 57 <br /> 58 <div v-bind:id="'list-' + id">我的id是 list-{{id}}div> 59 60 61 62 63 64 <h2>指令h2> 65 69 <p v-if="seen">现在你看到我了p> 70 <h2>参数h2> 71 74 <a v-bind:href="url" target="_blank">点击链接Baidua> 75 79 <br /> 80 <button v-on:click="doSomething">点击弹出框button> 81 <h2>动态参数h2> 82 85 <a v-bind:[attributename]="url" target="_blank"> 点击我进入 a> 86 90 <br /> 91 <a v-on:[eventname]="doSomething"> ... a> 92 99 <h2>修饰符h2> 100 104 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidua> 105 <h2>缩写h2> 106 109 112 113 <a v-bind:href="url" target="_blank">完整写法a> 114 <br /> 115 116 <a :href="url" target="_blank">缩写法a> 117 <br /> 118 121 122 <button v-on:click="doSomething">完整写法button> 123 <br /> 124 125 <button @click="doSomething">缩写法button> 126 div> 127 <script type="text/javascript"> 128 var app=new Vue({ 129 el:'#app', 130 data:{ 131 msg:'hello world!!!', 132 rawHtml:' 这应该是红色', 133 dynamicId:'div001', 134 isButtonDisabled:true, 135 number:4, 136 ok:true, 137 message:'welcome to vue!!!', 138 id:'01', 139 seen:true, 140 url:'http://www.baidu.com', 141 attributename:'href', 142 eventname:'click' 143 }, 144 methods:{ 145 doSomething:function(){ 146 alert('hello world!!!'); 147 } 148 } 149 }); 150 script> 151 body> 152 html>
备注
学而时习之，不亦悦乎！