赞
踩
相信模板语法大家多少都有所接触,例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析,通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时,你可以写在 HTML 元素上的操作语法,让你开发更高效,例如:绑定样式,循环出元素列表等。
在前端的发展历程中,为了提高开发效率,诞生了很多模板引擎,方便渲染元素或者绑定数据,很多引擎模板都采用 {{双大括号表达式}} 的语法进行插值。同样 Vue.js 也借鉴了 Angular.js 的双花括号的方式,进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式,在环境中新建一个.html 后缀文件,引入 Vue.js,输入以下代码,运行(open with Preview 或 Mini Browser)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 数据双向绑定 --> <div id="app"> <input type="text" v-model="msg" /> <p>{{msg}}</p> </div> <script> var app = new Vue({ el: "#app", // el: 挂载点 data: { // data:数据选项 msg: "hello", }, }); </script> </body> </html>
双大括号中的 {{msg}},绑定至底层 Vue 实例的数据,在浏览器中就被渲染成实例 data 选项中 msg 的值。
在 Vue.js 中数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值:
<div id="app">msg:{{msg}}</div>
双大括号中的值将会被替代为对应 data 对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
但是通过使用 v-once 指令你也能执行一次性地插值,当数据 改变时,插值处的内容 不会更新。但是你需要注意一下,该元素节点下面其他数据的绑定,数据改变,内容也不会更新,所以,注意代码块的划分。
<p v-once>msg:{{msg}}</p>
上面的双大括号表达式会将数据解释为普通文本,即使你的数据为 HTML 元素,也不会渲染成对应的标签元素,只能渲染成普通文本,而非 HTML 代码,例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 数据绑定 --> <div id="app"> <p>{{msg}}</p> </div> <script> var app = new Vue({ el: "#app", // el: 挂载点 data: { // data: 数据选项 msg: "<h1>hello syl</h1>", }, }); </script> </body> </html>
上面明明我们写的是 HTML 标签,为什么没渲染出来,那就是因为双大括号表达式会将数据解释为普通文本。
我们就需要认识另外一个指令 v-html,使用它我们就能将它正确渲染。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- v-html 渲染 html 元素--> <div id="app" v-html="msg"></div> <script> var app = new Vue({ el: "#app", // el: 挂载点 data: { // data: 数据选项 msg: "<h1>hello syl</h1>", }, }); </script> </body> </html>
双大括号语法不能作用在 HTML 特性(标签属性)上,需要对标签属性操作,应该使用 v-bind 指令:
<div v-bind:class="syl-vue-course"></div>
HTML 标签属性为布尔特性时,它们的存在表示为 true,v-bind 工作起来略有不同,在这个例子中:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 布尔特性绑定--> <div id="app"> <input type="checkbox" v-bind:checked="isChecked" /> </div> <script> var app = new Vue({ el: "#app", data: { isChecked: false, // isChecked 是否选中 boolean }, }); </script> </body> </html>
注意: 如果 isChecked 的值是 null、undefined 或 false,则 checked 特性甚至不会被包含在渲染出来的 <input> 元素中,我们将 data 中的 isChecked 值改为 null。
var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否选中 } })
上面,我们只进行了绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持,感受强大的模板语法力量吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- javascript 表达式--> <div id="app"> <!-- 运算符 --> <p>num + 24 = {{num + 24}}</p> <!-- 三元表达式 --> <p>Are you ok? {{ok ? 'I am ok !':'no'}}</p> <!-- 对象方法直接调用 --> <p>名字倒过来写:{{name.split('').reverse().join('')}}</p> <!-- 属性值运算操作 --> <p v-bind:class="'col'+colNum">syl</p> </div> <script> var app = new Vue({ el: "#app", data: { num: 20, ok: true, name: "实验楼", colNum: "12", }, }); </script> </body> </html>
指令 (Directives) 是带有 v- 前缀的特殊特性。
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性,在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定,例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 指令 参数--> <div id="app"> <a v-bind:href="url">实验楼</a> </div> <script> var app = new Vue({ el: "#app", data: { url: "https://www.lanqiao.cn", }, }); </script> </body> </html>
另外一个例子,v-on 指令,用于监听 DOM 事件,例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 指令 参数--> <div id="app"> <p>我叫:{{name}}</p> <!-- handleClick 使我们在实例 methods 中写的方法 --> <button v-on:click="handleClick">点我</button> </div> <script> var app = new Vue({ el: "#app", data: { name: "实验楼", }, methods: { // 实例方法对象 handleClick: function () { this.name = this.name.split("").reverse().join(""); }, }, }); </script> </body> </html>
上面属性或者事件我们都是写死的,其实在 Vue 它也可以是动态的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 指令 动态参数--> <div id="app"> <p>我叫:{{name}}</p> <button v-on:[event]="handleClick">点我</button> </div> <script> var app = new Vue({ el: "#app", data: { name: "实验楼", event: "click", }, methods: { handleClick: function () { this.name = this.name.split("").reverse().join(""); }, }, }); </script> </body> </html>
event 此时的值为 click,那我们点击按钮时就会触发事件回调,运行结果和上面一样。
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定,大致分为三类,后面课程我们会一一接触到:
例如,事件修饰符中的 .prevent 修饰符和原生 event.preventDefault() 效果一样,可以阻止事件默认行为,在表单中点击提交按钮,就会发生页面跳转,但是使用了 .prevent 就不会发生跳转,例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue</title> <!--引入 vue.js--> <script src="vue.min.js"></script> </head> <body> <!-- 指令 修饰符--> <div id="app"> <form action="/" v-on:submit.prevent="submit"> <button type="submit">提交</button> </form> </div> <script> var app = new Vue({ el: "#app", data: {}, methods: { submit: function () { console.log("成功提交!"); }, }, }); </script> </body> </html>
v- 是 Vue.js 中特定的标志,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时,v- 前缀很有帮助,但是频繁使用到,也会让人感觉不到代码的简洁之道,就会感到不是太人性化。同时,在构建由 Vue 管理所有模板的单页面应用程序时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
上面例子中我们使用了 v-bind 绑定属性。
<a v-bind:href="url">实验楼</a>
我们可以简写为:
<a :href="url">实验楼</a>
同样的使用 v-bind 绑定的其他属性也可以简写。
例如,v-bind:class=“className” 可以简写为 :class=“className”,v-bind:value=“myValue” 可以简写为 :value。
上面 v-bind 指令提供简写,同样 v-on 指令也提供简写,但是与 v-bind 有一些差异,v-on: 使用 @ 简写。
<!-- 完整语法 -->
<button v-on:click="handleClick">点我</button>
<!-- 缩写 -->
<button @click="handleClick">点我</button>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。