一起学Vue之模板语法

概述

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

普通文本

数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

 <span>{{msg}}</span>

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

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

输出Html

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

 <!-- 普通文本 -->

 <p>Using mustaches: {{ rawHtml }}</p>

 <!-- html解析 -->

 <p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

  <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>

 <button v-bind:disabled="isButtonDisabled">Button</button>

注意：如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。只有为true ,才被渲染。

使用 JavaScript 表达式

不仅能绑定简单的属性键值，还提供了完全的 JavaScript 表达式支持。

如下所示：

  HTML{{ number + 1 }}

 <br />

 {{ ok ? 'YES' : 'NO' }}

 <br />

 {{ message.split('').reverse().join('') }}

 <br />

 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>

注意：每个绑定都只能包含单个表达式，语句不会生效。

指令

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

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

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

 <a v-bind:href="url" target="_blank">点击链接Baidu</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。另一个例子是 v-on 指令，它用于监听 DOM 事件：

 <button v-on:click="doSomething">点击弹出框</button>

动态参数

你可以使用动态参数为一个动态的事件名绑定处理函数：在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

  <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>

 <br />

 <a v-on:[eventname]="doSomething"> ... </a>

注意，参数表达式的写法存在一些约束：

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。除非在实例中有一个名为“someattr”的 property，否则代码不会工作。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>

指令缩写

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

 <!--  v-bind 缩写 -->

 <!-- 完整语法 -->

 <a v-bind:href="url" target="_blank">完整写法</a>

 <!-- 缩写 -->

 <a :href="url" target="_blank">缩写法</a>

 <!--  v-on 缩写 -->

 <!-- 完整语法 -->

 <button v-on:click="doSomething">完整写法</button>

 <!-- 缩写 -->

 <button @click="doSomething">缩写法</button>

关于本例子中的完整代码，如下所示：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>一起学Vue</title>

         <!-- 开发环境版本，包含了有帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

         <div id="app">

             <!--

              Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

              所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

              -->

             <h2>普通文本</h2>

             <!--

                 数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新

             -->

             <span>{{msg}}</span>

             <br />

             <!--

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

             -->

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

             <h2>输出Html</h2>

             <!--

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

             你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

             请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

             -->

             <!-- 普表文本 -->

             <p>Using mustaches: {{ rawHtml }}</p>

             <!-- html解析 -->

             <p>Using v-html directive: <span v-html="rawHtml"></span></p>

             <h2>特性</h2>

             <!--

             Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

              -->

              <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>

              <!--

               如果 isButtonDisabled 的值是 null、undefined 或 false，

               则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

               只有为true ,才被渲染

               -->

              <button v-bind:disabled="isButtonDisabled">Button</button>

              <h2>使用 JavaScript 表达式</h2>

              <!--

               每个绑定都只能包含单个表达式，语句不会生效。

               我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

               -->

              HTML{{ number + 1 }}

             <br />

             {{ ok ? 'YES' : 'NO' }}

             <br />

             {{ message.split('').reverse().join('') }}

             <br />

             <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>

             <!-- 这是语句，不是表达式 -->

             <!-- {{ var a = 1 }} -->

             <!-- 流控制也不会生效，请使用三元表达式 -->

             <!-- {{ if (ok) { return message } }} -->

             <h2>指令</h2>

             <!--

              指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

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

              -->

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

              <h2>参数</h2>

              <!--

               一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

               -->

               <a v-bind:href="url" target="_blank">点击链接Baidu</a>

               <!--

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

               另一个例子是 v-on 指令，它用于监听 DOM 事件：

                -->

                <br />

               <button v-on:click="doSomething">点击弹出框</button>

               <h2>动态参数</h2>

               <!--

                注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。

                -->

               <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>

               <!--

               你可以使用动态参数为一个动态的事件名绑定处理函数：

                在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

                -->

                <br />

               <a v-on:[eventname]="doSomething"> ... </a>

               <!--

                在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，

                因为浏览器会把 attribute 名全部强制转为小写：

                在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。

                除非在实例中有一个名为“someattr”的 property，否则代码不会工作。

                -->

                <h2>修饰符</h2>

                <!--

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

                 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

                 -->

                 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>

                 <h2>缩写</h2>

                 <!--

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

                  -->

                 <!--

                  v-bind 缩写

                  -->

                 <!-- 完整语法 -->

                 <a v-bind:href="url" target="_blank">完整写法</a>

                 <br />

                 <!-- 缩写 -->

                 <a :href="url" target="_blank">缩写法</a>

                 <br />

                 <!--

                  v-on 缩写

                  -->

                 <!-- 完整语法 -->

                 <button v-on:click="doSomething">完整写法</button>

                 <br />

                 <!-- 缩写 -->

                 <button @click="doSomething">缩写法</button>

         </div>

         <script type="text/javascript">

             var app=new Vue({

                 el:'#app',

                 data:{

                     msg:'hello world!!!',

                     rawHtml:'<span style="color:red;"> 这应该是红色</span>',

                     dynamicId:'div001',

                     isButtonDisabled:true,

                     number:4,

                     ok:true,

                     message:'welcome to vue!!!',

                     id:'01',

                     seen:true,

                     url:'http://www.baidu.com',

                     attributename:'href',

                     eventname:'click'

                 },

                 methods:{

                     doSomething:function(){

                         alert('hello world!!!');

                     }

                 }

             });

         </script>

     </body>

 </html>

备注

学而时习之，不亦悦乎！