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

知者何南 · 4 天前

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的值

测试1—— 改变data中的值

对于测试一来说，这两种绑定value的方式没什么区别。
测试2——改变前端显示的值

以是可以看出来，v-bind是单项的数据绑定，v-model是双向的数据绑定。且v-bind可以使用在任何HTML标签当中，但是v-model只能使用在表单类元素上，比方: input标签、select标签、textarea标签。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块