模板语法 · Vue速学快练立上手

底层实现上， Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能智能计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。 ### 插值 #### 文本 Mustache是一个JavaScript的模板引擎。 [http://mustache.github.io/mustache.5.html](http://mustache.github.io/mustache.5.html) {{}}，双大括号的文本插值就是Mustache语法。 ``` <span>Message: {{ msg }}</span> ``` v-once 指令用来设定一次性插值，当数据改变时，插值处的内容不会更新。 ``` <span v-once>这个将不会改变: {{ msg }}</span> ``` #### 原始HTML v-html 指令双大括号将数据解释为普通文本，而不是HTML代码。如果要输出真正的HTML，使用v-html 指令 ``` <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> ``` 动态渲染任意的HTML会容易导致XSS攻击。 #### HTML属性绑定，使用v-bind 大括号的Mustache不能作用在HTML元素的属性上，所以要使用v-bind指令。 ``` <div v-bind:id="dynamicId"></div> ``` 布尔类型的属性： ``` <button v-bind:disabled="isButtonDisabled">Button</button> ``` 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。 #### JavaScript表达式 Vue支持绑定种使用JS的表达式，比如加、条件运算符等： ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> ``` 限制：只能绑定单个表达式，下面的无效： ```  {{ var a = 1 }}  {{ if (ok) { return message } }} ``` 注意：不应该在模板表达式中试图访问用户定义的全局变量。 ### 指令（Directives）指令式带有v-前缀的特殊属性，预期值式单个JS表达式（v-for例外）。 #### 参数一些指令能够接收一个参数，在指令之后以冒号表示，比如： v-bind指令用于响应式更新HTML的属性。 ``` <a v-bind:href="url">...</a> ``` 这里的href是参数，v-bind指令将元素的href属性与表达式url的值绑定。 v-on指令用于监听DOM事件，参数既是监听的事件名。 #### 动态参数从2.6.0 开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数。 ``` <a v-bind:[attributeName]="url"> ... </a> ``` 这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值作为最终参数使用。比如attributeName的值为href, 则等价于v-bind:href。异常状况下，动态参数的值为null。因为某些字符，比如空格和引号，在HTML属性名中式无效的，所以动态参数表达式有一些语法约束。 ```  <a v-bind:['foo' + bar]="value"> ... </a> ``` 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写： ```  <a v-bind:[someAttr]="value"> ... </a> ``` #### 修饰符(modifier) 修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如：`.prevent`修饰符告诉`v-on`指令对于触发的事件调用`event.preventDefault()`： ``` <form v-on:submit.prevent="onSubmit">...</form> ``` ### 缩写 v- 是用来识别Vue特定的前缀，如果高频使用，稍显繁琐。如果在SPA应用中，只有使用Vue框架时，v-前缀就更显得累赘。因此Vue为v-bind和v-on提供了特定的简写。 #### v-bind简写 ```  <a v-bind:href="url">...</a>  <a :href="url">...</a>  <a :[key]="url"> ... </a> ``` #### v-on 缩写 ```  <a v-on:click="doSomething">...</a>  <a @click="doSomething">...</a>  <a @[event]="doSomething"> ... </a> ```