简介
模板语法大家多少都有所接触，例如百度模板引擎、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)(blog-img.uiuing.com/notes/image…)]
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)(blog-img.uiuing.com/notes/image…)]
\
指令
指令 (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)(blog-img.uiuing.com/notes/image…)]
动态参数
上面属性或者事件我们都是写死的，其实在 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>
其他属性也可以简写
v-on
与 v-bind 有一些差异，v-on: 使用 @简写
<button @click="strReverse">反转</button>
