Vue中的模板语法

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

插值：

1. 文本：数据绑定最常见的形式就是使用双大括号的文本插值。

   <div id="app">
     <p>{{ message }}</p>
   </div>
   

   通过使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新。

   <span v-once>这个将不会改变: {{ msg }}</span>
   

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

   <div id="app">
       <div v-html="message"></div>
   </div>
       
   <script>
   new Vue({
     el: '#app',
     data: {
       message: '<h1>菜鸟教程</h1>'
     }
   })
   </script>
   

3. 属性Attritube：属性的值使用 v-bind 指令。

   使用v-bind给元素特性(attribute)传递值时，Vue会将值当做一个表达式。

   <div id="app">
       <pre><a v-bind:href="url">菜鸟教程</a></pre>
   </div>
       
   <script>
   new Vue({
     el: '#app',
     data: {
       url: 'http://www.runoob.com'
     }
   })
   </script>
   

4. JavaScript表达式：对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

   <div id="app"> 
       {{ message.split('').reverse().join('') }}
       <div v-bind:id="'list-' + id">菜鸟教程</div>
   </div>
   

   每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

   //这是语句，不是表达式
   {{ var a = 1 }}
   //控制流也不会生效，可以使用三元运算符代替
   {{ if (ok) { return message } }}
   

指令：

指令是带有v-前缀的特殊属性。

<p v-if="seen">现在你看到我了</p>

v-if指令将根据表达式seen的值的真假来插入/移除p元素。

参数：

一些指令能够接收一个参数，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的动态参数。动态参数预期会求出一个字符串，任何其他非字符串类型的值都将会触发一个警告。

<a v-bind:[attributeName]="url"> ... </a>

attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。

某些字符，如空格和引号，放在HTML属性名里是无效的。变通方法是使用没有空格或引号的表达式，或者计算属性替代这种复杂表示式。

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

还需要避免使用大写字符来命名键名，因为浏览器会把属性名全部强制转为小写。

修饰符：

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。

//告诉v-on指令对于触发的submit事件调用event.preventDefault()；
<form v-on:submit.prevent="onSubmit">...</form>

缩写：

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>