简介
模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等
同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等
表达式
在前端的发展历程中，为了提高开发效率，诞生了很多模板引擎，方便渲染元素或者绑定数据，很多引擎模板都采用 {{双大括号表达式}} 的语法进行插值
同样 Vue.js 也借鉴了Angular.js 的双花括号的方式，进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <p> name: <input type="text" v-model="name"> </p> <p> webSite: <input type="text" v-model="webSite"> </p> <p>name: {{ name }}</p> webSite: <a :href="webSite">{{ webSite }}</a> </div> <script> new Vue({ el: "#app", data: { name: "", webSite: "" } }) </script> </body> </html>
双大括号中的 {{name}}和{{webSite}}，绑定至底层 Vue 实例的数据，在浏览器中就被渲染成实例 data 选项中的值。
插值
文本
通过使用 v-once 指令你也能执行一次性地插值，当数据 改变时，插值处的内容 不会更新。但是你需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新
将
<p>name: {{ name }}</p>
修改
<p v-once>name: {{ name }}</p>
你可以发现此时数据并没有和加了v-once的标签进行动态绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VO7wp6NJ-1638169143370)(https://blog-img.uiuing.com/notes/images/202111291339938.png)]
HTML
此外, vue还支持对Html进行渲染, 添加指令v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <p> <input type="text" v-model="htmlData"> </p> <p v-html="htmlData"></p> </div> <script> let vm = new Vue({ el: "#app", data: { htmlData: "", } }) </script> </body> </html>
特性
双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令, 也可以缩写为:, 这仅限于 v-bind 指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" :checked="isChecked"/></div> <script> let vm = new Vue({ el: "#app", data: { isChecked: false } }) </script> </body> </html>
你也可以试试:class, 它的语法比较特殊, 类似键值对, 布尔值的value决定了String类型的Key是否显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <style> .MagnifyText { font-size: 32px; font-weight: bold; } </style> </head> <body> <div id="app"> <input type="checkbox" :checked="isChecked"/> <span v-bind:class="{'MagnifyText': fontResult}">uiu</span> <span :class="{'MagnifyText': !fontResult}">uiu</span> </div> <script> let vm = new Vue({ el: "#app", data: { isChecked: false, nameStyle: "MagnifyWords", fontResult: true } }) </script> </body> </html>
JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <p> 1 + 1 = {{ 1 + 1 }} </p> <p> {{ strReverse }} 反转：{{ strReverse.split("").reverse().join("") }} </p> </div> <script> let vm = new Vue({ el: "#app", data: { strReverse: "abc" } }) </script> </body> </html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkK2m3xy-1638169143376)(https://blog-img.uiuing.com/notes/images/202111291432728.png)]
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
v-bind 指令可以用于响应式地更新 HTML 特性
例如第一次出现的
<a :href="webSite">{{ webSite }}</a>
v-on 指令，用于监听 DOM 事件
例如点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1>{{ strTest }}</h1> <button v-on:click="strReverse">反转</button> </div> <script> let vm = new Vue({ el: "#app", data: { strTest: "abc" }, methods: { strReverse: function () { this.strTest = this.strTest.split('').reverse().join(''); } } }) </script> </body> </html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1wv2xpj-1638169143378)(https://blog-img.uiuing.com/notes/images/202111291443568.png)]
动态参数
上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1>{{ strTest }}</h1> <button v-on:[dp]="strReverse">反转</button> </div> <script> let vm = new Vue({ el: "#app", data: { strTest: "abc", dp: "click" }, methods: { strReverse: function () { this.strTest = this.strTest.split('').reverse().join(''); } } }) </script> </body> </html>
效果是一样的, 点击按钮时会触发事件回调
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，大致分为三类：
- 事件修饰符
- 按键修饰符
- 系统修饰符
例如，事件修饰符中的.prevent修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转
指令缩写
v-bind
前面有提到过 v-bind ,可以直接简写为:
<a :href="https://uiuing.com">blog</a>
1
其他属性也可以简写
v-on
与 v-bind 有一些差异，v-on: 使用 @简写
<button @click="strReverse">反转</button>
