当前位置：首页 > news >正文

Vue的模板语法——指令语法

news 来源：原创 2025/4/22 12:35:25

2025/4/21

向全栈工程师迈进！

一、插值语法

之前通过插值语法，其显示的效果如下。

<!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>

二、指令语法

2.1 Vue框架指令

Vue框架的指令都是以 v- 开头。那么对于指令语法该写在哪里呢，对于差值语法来说是写在{{ }}中的，并且{{}}放在标签体当中。

对于指令来说，其书写位置位于标签的属性位置。类似于上述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>

显示如下：

当改动msg的值的时候，可以发现加了v-once指令的标签，其并没有因为msg的改动而刷新。

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。

当a>b时，显示如下：

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>

虽然上述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的值