一起学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 <!-- html解析 -->
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">Button</button>

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

使用 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 的值的真假来插入/移除 <p> 元素。

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

参数

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

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

在这里 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">点击链接Baidu</a>

指令缩写

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

 1 <!--  v-bind 缩写 -->
 2 <!-- 完整语法 -->
 3 <a v-bind:href="url" target="_blank">完整写法</a>
 4 <!-- 缩写 -->
 5 <a :href="url" target="_blank">缩写法</a>
 6 <!--  v-on 缩写 -->
 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>一起学Vue</title>
  6         <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  7         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 
  9     </head>
 10     <body>
 11         <div id="app">
 12             <!-- 
 13              Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
 14              所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
 15              -->
 16             <h2>普通文本</h2>
 17             <!--
 18                 数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值,无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新
 19             -->
 20             <span>{{msg}}</span>
 21             <br />
 22             <!--
 23                 通过使用 v-once 指令,执行一次性插值,当数据改变时,内容不会更新。
 24             -->
 25             <span v-once>这个将不会改变: {{ msg }}</span>
 26             <h2>输出Html</h2>
 27             <!--
 28             双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:
 29             你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。
 30             请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
 31             -->
 32             <!-- 普表文本 -->
 33             <p>Using mustaches: {{ rawHtml }}</p>
 34             <!-- html解析 -->
 35             <p>Using v-html directive: <span v-html="rawHtml"></span></p>
 36             <h2>特性</h2>
 37             <!-- 
 38             Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令: 
 39              -->
 40              <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
 41              <!-- 
 42               如果 isButtonDisabled 的值是 null、undefined 或 false,
 43               则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
 44               只有为true ,才被渲染
 45               -->
 46              <button v-bind:disabled="isButtonDisabled">Button</button>
 47              <h2>使用 JavaScript 表达式</h2>
 48              <!-- 
 49               每个绑定都只能包含单个表达式,语句不会生效。
 50               我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
 51               -->
 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             <!-- {{ var a = 1 }} -->
 61 
 62             <!-- 流控制也不会生效,请使用三元表达式 -->
 63             <!-- {{ if (ok) { return message } }} -->
 64             <h2>指令</h2>
 65             <!-- 
 66              指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
 67              这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
 68              -->
 69              <p v-if="seen">现在你看到我了</p>
 70              <h2>参数</h2>
 71              <!-- 
 72               一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性:
 73               -->
 74               <a v-bind:href="url" target="_blank">点击链接Baidu</a>
 75               <!-- 
 76               在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 
 77               另一个例子是 v-on 指令,它用于监听 DOM 事件:
 78                -->
 79                <br />
 80               <button v-on:click="doSomething">点击弹出框</button>
 81               <h2>动态参数</h2>
 82               <!-- 
 83                注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
 84                -->
 85               <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
 86               <!-- 
 87               你可以使用动态参数为一个动态的事件名绑定处理函数:
 88                在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。
 89                -->
 90                <br />
 91               <a v-on:[eventname]="doSomething"> ... </a>
 92               <!-- 
 93                在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,
 94                因为浏览器会把 attribute 名全部强制转为小写:
 95                在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
 96                除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
 97 
 98                -->
 99                <h2>修饰符</h2>
100                <!-- 
101                 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
102                 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
103                 -->
104                 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>
105                 <h2>缩写</h2>
106                 <!-- 
107                  Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
108                  -->
109                 <!-- 
110                  v-bind 缩写
111                  -->
112                 <!-- 完整语法 -->
113                 <a v-bind:href="url" target="_blank">完整写法</a>
114                 <br />
115                 <!-- 缩写 -->
116                 <a :href="url" target="_blank">缩写法</a>
117                 <br />
118                 <!-- 
119                  v-on 缩写
120                  -->
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:"<span style="color:red;"> 这应该是红色</span>",
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>
View Code

备注

学而时习之,不亦悦乎!