Vue的模板语法——指令语法
2025/4/21向全栈工程师迈进！
https://i-blog.csdnimg.cn/direct/af734ee8eb584f96bbbf8db29e788bf0.gif
一、插值语法
之前通过插值语法，其显示的结果如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>指令语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el : "#app1",
data: {
msg: "hello vue!"
}
})
</script>
</body>
</html> https://i-blog.csdnimg.cn/direct/41ef319c75234891942ef8a49b6228b0.png
二、指令语法
2.1 Vue框架指令
Vue框架的指令都是以 v- 开头。那么对于指令语法该写在哪里呢，对于差值语法来说是写在{{ }}中的，并且{{}}放在标签体当中。
https://i-blog.csdnimg.cn/direct/b8ff2a558fb14f0194fcc34c206a3ddf.png
对于指令来说，其誊写位置位于标签的属性位置。雷同于上述div标签的属性id，其位置就写下id那个位置。
vue框架中全部的指令局已以HTML标签的属性形式存在的，比方:
<span 指令是写在这里的>/span> 注意：虽然指令是写在标签的属性位置上，但是这个指令欣赏器是无法直接看的。
是需要先让vue框架进行编译的，编译之后的内容欣赏器是可以看的。
指令的语法格式
指令的一个完整的语法格式:
<HTML标签 v-指令名:参数="表达式"></HTML标签> 不是全部的指令都有参数和表达式。比方：
[*]v-once 不需要参数，也不需要表达式
[*]v-if 不需要参数，但是需要表达式
[*]v-bind 既需要表达式又需要参数
2.2 v-once 指令
作用: 只演染元素一次。随后的重新演染，元素及其全部的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
。。。
</head>
<body>
<div id="app1">
<h1>{{msg}}</h1>
<h1 v-once>{{msg}}</h1>
</div>
。。。
</html> 显示如下：
https://i-blog.csdnimg.cn/direct/713ff82aea62419bb23778d8ec04c481.png
当改动msg的值的时间，可以发现加了v-once指令的标签，其并没有因为msg的改动而刷新。
https://i-blog.csdnimg.cn/direct/0456b8e8c45642a593c55d6fe0ef9238.png
v-once起到了只演染元素一次的约束。
2.3 v-if 指令
作用: 表达式的执行结果需要是一个布尔类型的数据:true或者false。
[*]true:这个指令所在的标签，会被演染到欣赏器当中。
[*]false:这个指令所在的标签，不会被谊染到欣赏器当中。
。。
<body>
<div id="app1">
<h1>{{msg}}</h1>
<h1 v-if="a>b">{{msg}}</h1>
</div>
<script>
new Vue({
el : "#app1",
data: {
msg: "hello vue!",
a: 10,
b: 11
。。
</body>
</html> 显示如下：因为a>b是false。
https://i-blog.csdnimg.cn/direct/905574dac5c44bd0b9fb62766ad13e9e.png
当a>b时，显示如下：
https://i-blog.csdnimg.cn/direct/3d02a725024549dcb4ea1ec52bc9b9f9.png
2.4 v-bind 指令
他是负责动态绑定的指令，它可以让HTHL标签的某个属性的值产生动态的结果。v-bind指令的语法格式:
<HTML标签 v-bind:参数="表达式"></HTML标容> v-bind指令的编译原理是什么？
编译前:
<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后:
<HTML标签 参数="表达式的执行结果"></HTML标签> 注意两项:
第一: 在编译的时间v-bind背面的“参数名”会被编译为HTML标签的“属性名”
第二: 表达式会关联data，当data发生改变之后，表达式的执行结果就会发生改变，以是就会产生动态结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-bind:aaaaa="msg"></h1>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "hello vue!"
}
})
</script>
</body>
</html> 如下所示，
<h1 v-bind:aaaaa="msg"></h1>
在被编译后就变成了
<h1 aaaaa="hello vue!"></h1> https://i-blog.csdnimg.cn/direct/ec9be11d53cd47b0b49315a7f77a1749.png
虽然上述vue语法是正确的，也可成功的被vue编译器编译，但是却没有实际意义，欣赏器并不认得属性 aaaaa="hello vue!" 的作用，以是对于属性名的写法，尽量是该HTML标签中存在的属性名。
对于图片路径想要动态绑定的话，就如下所示
<body>
<div id="app">
<h1 v-bind:aaaaa="msg"></h1>
<img v-bind:src="path">
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "hello vue!",
path: "../1.img"
}
})
</script>
</body> 只要数据中的path动态改变，那么显示的图片也会随之改变。其v-bind也但是省略形式
<img :src="path">
动态绑定图片路径。
2.5 v-model 指令
v-model 指令也是完成数据绑定的。通过示例来理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
v-bind指令：<input type="text" v-bind:value="msg1"><br>
v-model指令：<input type="text" v-model:value="msg2">
</div>
<script>
new Vue({
el : "#app",
data :{
msg1: "hello",
msg2: "vue"
}
})
</script>
</body>
</html> 运行后显示如下，好像没什么区别，都是绑定了value的值
https://i-blog.csdnimg.cn/direct/bd7e0aec77714a93ace0febe5b160bac.png
测试1—— 改变data中的值
https://i-blog.csdnimg.cn/direct/1ed7f60a545b41139d8e4b19dd67c6c9.png
对于测试一来说，这两种绑定value的方式没什么区别。
测试2——改变前端显示的值
https://i-blog.csdnimg.cn/direct/4f00f31cea184d0a8af76dd9f2b6bcf5.png
以是可以看出来，v-bind是单项的数据绑定，v-model是双向的数据绑定。且v-bind可以使用在任何HTML标签当中，但是v-model只能使用在表单类元素上，比方: input标签、select标签、textarea标签。
https://i-blog.csdnimg.cn/direct/5e9f8fdb271e4d32b078d0df0c3696c0.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]