《Vue3 二》Vue 的模板语法
在 React 中，想要编写 HTML，是使用 JSX，之后通过 Babel 将 JSX 编译成 React.createElement 函数调用；在 Vue 中，也支持 JSX 的开发模式，但大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，在底层的实现中，Vue 会将面编译成虚拟 DOM 渲染函数。
Mustache 插值语法：
Mustache 插值语法：可以通过双大括号将 data 中的数据、methods 中的函数或者 JavaScript 表达式显示到 template 模板中。
<div id="app">
<!-- data 中的数据 -->
<div>当前数字：{{count}}</div>
<!-- methods 中的函数 -->
<div>{{formatCount(count)}}</div>
<!-- JavaScript 表达式 -->
<div>三倍当前数字：{{count * 3}}</div>
<!-- JavaScript 表达式只能是单个表达式，下面的语法会报错 -->
<div>{{ const count = 10 }}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count: 10,
}
},
methods: {
formatCount(argu) {
return `双倍当前数字：${argu*2}`
},
}
})
app.mount('#app')
<script>
常见的基本指令：
指令都是用在元素的属性上。
v-bind：
v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递 props 值。语法糖是 :。
<div id="app">
<img v-bind:src="imgUrl" />
</div>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
}
},
})
app.mount('#app')
</script>
使用 v-bind 动态绑定 class 属性值：
动态绑定的 class 和普通静态的 class 是可以一起使用的，不会被覆盖。
- 绑定对象：可以给
:class绑定一个对象来动态切换 class。对象中的属性名是 class 名，属性值是布尔类型，只有属性值为 true 时才会渲染对应的 class。<!-- 只有当 isActive 为 true 时才会显示 active 样式 --> <div v-bind:class="{ active: isActive }"></div> - 绑定数组：可以给
:class绑定一个数组来渲染多个 class。<div v-bind:class="[activeClass, errorClass]"></div>
使用 v-bind 动态绑定 style属性值：
- 绑定对象：属性名可以使用驼峰式或者用引号括起来的短横线分割来命名。
<div v-bind:style="{ color: activeColor, fontWeight: activeFontWeight, 'font-size': activeFontSize + 'px' }"></div> - 绑定数组：可以将多个样式对象应用到同一个元素上。
<div :style="[baseStyles, {color: activeColor}]"></div>
使用 v-bind 动态绑定属性名：
如果属性名称不是固定的，可以使用 v-bind:[属性名]="属性值" 的格式来定义。
<~-- name 是动态的 -->
<div v-bind:[name]="value"></div>
使用 v-bind 直接绑定一个对象：
常用于给组件传递 props 属性值。
<div id="app">
<!-- 会自动地遍历对象中的所有属性，将它们作为属性添加到当前的元素上 -->
<div v-bind="props">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
props: {
name: 'Lee',
height: 1.88,
},
}
},
})
app.mount('#app')
</script>
v-on：
v-on：用于绑定事件。语法糖是 @。
<div id="app">
<div v-on:click="handleClick">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
console.log('click')
}
}
})
app.mount('#app')
</script>
传递参数：
- 只有默认参数：如果在绑定事件时，没有传递任何参数，那么 event 对象会被默认传递进来。
<div id="app"> <div v-on:click="handleClick">Hello Vue</div> </div> <script> const app = Vue.createApp({ methods: { handleClick(event) { console.log('click', event) } } }) app.mount('#app') </script> ```  - 只有明确传递的参数：如果在绑定事件时，有显式地传递参数，那么只有明确传递的参数会被传递进来。
<div id="app">
<div v-on:click="handleClick('Lee')">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick(name) {
console.log('click', name)
}
}
})
app.mount('#app')
</script>
- 既有明确传递的参数，也有默认参数：如果在绑定事件时，有显式地传递参数和
$event，那么明确传递的参数和 event 对象都会被传递进来。<div id="app"> <div v-on:click="handleClick('Lee', $event)">Hello Vue</div> </div> <script> const app = Vue.createApp({ methods: { handleClick(name, event) { console.log('click', name, event) } } }) app.mount('#app') </script>
修饰符：
v-on 支持修饰符，相当于是对事件进行一些特殊的处理。
.stop：调用event.stopPropagation()阻止事件冒泡。.prevent：调用event.preventDefault()阻止默认事件。.capture：添加事件侦听器时使用 capture 捕获模式。.passive：添加事件侦听器时使用{passive: true}模式，提前告知浏览器不要阻止事件的默认行为。.self：只有当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias}：只有当事件是从特定键触发时才触发回调。.left：只有当点击鼠标左键时才触发回调。.right：只有当点击鼠标右键时才触发回调。.middle：只有当点击鼠标中键时才触发回调。.once：只触发一次回调。
v-model：
v-model：用于实现双向绑定。经常和表单一起使用，可以用于 input、textarea、select、checkbox、radio 等表单控件。
双向数据绑定：是指将视图（用户界面）中的数据与模型（业务逻辑）中的数据进行双向关联。当视图中的数据发生变化时，模型中的数据也会随之更新；同样，当模型中的数据发生变化时，视图中的数据也会随之更新。
select 如果是单选，
v-model绑定到属性中的值是就是单个的值；如果是多选，v-model绑定到属性中的值就是数组类型。
checkbox 如果只有一个选择框时，v-model绑定到属性中的值是布尔值类型，此时即使明确地给元素绑定 value 属性，当选中时也不会影响到v-model绑定的值； 如果有多个选择框时，v-model绑定到属性中的值是数组类型， 此时必须明确地给元素绑定 value 属性，当选中时 value 属性值会被自动地添加到v-model绑定的数组中。
<div id="app">
<!-- 手动实现双向数据绑定 -->
<input :value="message" @input="handleMessageInput" />
<!-- Vue 实现双向数据绑定，本质上就是上面代码的语法糖 -->
<input v-model="message" />
<div>{{message}}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
methods: {
handleMessageInput(event) {
this.message = event.target.value
}
},
})
app.mount('#app')
</script>
v-model 的原理：
v-bind绑定 value 属性的值。v-on绑定 input 事件监听函数，在函数中会获取到最新的值赋值到绑定的属性中。
v-model 的修饰符：
多个修饰符可以并列使用。
- lazy：默认情况下，
v-model在进行双向数据绑定时，绑定的是 input 事件，那么在每次内容输入后就会将最新的值和绑定的属性进行同步；如果在v-model后面跟上 lazy 修饰符，那么就会将绑定的事件切换为 change 事件，只有在提交时才会触发。<div id="app"> <input v-model.lazy="message" /> <div>{{message}}</div> </div> <script> const app = Vue.createApp({ data() { return { message: 'Hello Vue', } }, }) app.mount('#app') </script> - number：自动将内容转换为数字。
- trim：去除内容首尾的空格。
v-text：
v-text：用于设置元素的 textContent 文本内容。
<divv-text="message"></div>
<!-- v-text 会直接替换掉元素中的内容 -->
<divv-text="message">你好，Vue</div>
<!-- 和Mustache 插值语法的效果一样，只不过Mustache 插值语法更灵活 -->
<div>{{message}}</div>
v-html：
v-html：默认情况下，如果显示的内容本身是 HTML，Vue 是不会对其进行解析的；如果想要解析出来，需要使用 v-html。
<div id="app">
<!-- 会直接将字符串显式出来 -->
<div>{{content}}</div>
<!-- 会解析 HTML -->
<divv-html="content"></div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
content: `<span style="color:red">Hello Vue</span>`,
}
},
})
app.mount('#app')
</script>
v-pre：
v-pre：用于跳过元素及其子元素的编译过程，显示原始 Mustache 标签。可以跳过不需要编译的节点，加快编译速度。
<div id="app">
<!-- Vue 会跳过对其的编译过程，将其直接显示出来 -->
<div-pre>{{message}}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
</script>
v-cloak：
v-cloak：这个指令会保持在元素上直到关联的实例结束编译。和 CSS 规则例如 [v-cloak]{display:none} 一起用时，可以用于隐藏未编译的 Mustache 标签直到实例编译完成。
<div id="app">
<!-- 初始会显示 {{message}}，直到三秒后才显示正确的效果 -->
<div>{{message}}</div>
</div>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
},3000)
</script>
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 由于有 v-cloak 指令，叠加设置的 CSS 属性，初始什么都不会显示；直到三秒后，Vue 实例编译完成，v-cloak 指令会被 Vue 自动移除，显示正确的效果 -->
<divv-cloak>{{message}}</div1>
</div>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
},3000)
</script>
v-once：
v-once：只渲染元素/组件一次，当数据发生变化时，元素/组件及其所有的子节点将被视为静态内容直接跳过，不会重新渲染。可以用于优化更新性能。
<div id="app">
<!-- 点击按钮也不会改变 message 显示的内容，因为只会渲染一次 -->
<divv-once>{{message}}</div>
<button @click="handleMessageChange">改变 Message</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
methods: {
handleMessageChange() {
this.message = 'Hello World'
},
}
})
app.mount('#app')
</script>
v-memo：
v-memo：缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较，如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。可以用于优化更新性能。
v-memo传入空依赖数组v-memo="[]"将与 v-once 效果相同。
<!-- 当组件重新渲染，如果 valueA 和 valueB 都保持不变，div 及其子项的所有更新都将被跳过。 -->
<div v-memo="[valueA, valueB]">
...
</div>
条件渲染：
v-if、v-else、v-else-if、v-show ：根据条件决定是否显示元素或组件。类似 JavaScript 中的条件语句。
<div id="app">
<div v-if="Object.keys(info).length">
<p>姓名：{{info.name}}</p>
<p>年龄：{{info.age}}</p>
</div>
<div v-else>
<p>暂无个人信息</p>
<p>请填写后查看</p>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
info: {
name: 'Lee',
age: 18,
},
}
}
})
app.mount('#app')
</script>
v-if 和 v-show 的区别：
v-show 和 v-if 类似，但二者也有一些区别：
- 用法上的区别：
v-show不可以和v-else一起使用，不支持在 template 上使用。 - 本质上的区别：
v-show无论条件是 true 还是 false，它的 DOM 都是实际存在的，只不过是通过 CSS 的 display 属性来进行切换。
v-if只有当条件为 true 时，才会渲染条件块中的元素内容，当条件为 false 时，条件块中的元素内容完全不会被渲染。
因此，如果元素切换频繁，就使用v-show；如果元素切换不频繁，就使用v-if。
列表渲染：
v-for：用来遍历一组数据。类似 JavaScript 中的 for 循环 。基本格式是 v-for="(item, index) in 数据"，其中 item 和 index 分别是每项元素的自定义别名和自定义索引。
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
v-for 遍历支持的类型：
其实只要是可迭代对象，v-for 都可以遍历。
- 数组：基本格式是
v-for="(item, index) in 数组"。Vue 对被侦听的数组的变更方法进行了包裹，所以使用它们也会触发视图更新，这些方法包括 push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
可以发现，上面的方法都是会修改到原数组的；如果是不会修改到原数组的方法，是无法触发视图更新的，例如 map() 、filter() 等。 - 对象：基本格式是
v-for="(value, key, index) in 对象"。 - 字符串：基本格式是
v-for="(str, index) in 字符串"。 - 数字：基本格式是
v-for="(num, index) in 数字"。
v-for 中的 key 属性：
在使用 v-for 进行列表渲染时，经常会给元素或者组件绑定一个 key 属性，属性值要求是唯一的。
<div id="app">
<ul>
<li v-for="movie in movies" v-bind:key="item">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
key 的作用：
key 属性主要用于 Vue 中的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
- 如果不使用 key，Vue 会使用一种最大限制减少动态元素并且尽可能尝试就地复用/修改相同类型元素的算法。在源码中是使用 patchUnkeyedChildren() 方法。
- 如果使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。在源码中是使用 patchkeyedChildren() 方法。
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
假设要在大话西游后面插入夏洛特烦恼，原本是大话西游、少年派、盗梦空间，现在是大话西游、夏洛特烦恼、少年派、盗梦空间。
4. 不使用 key 的话：Vue 只能一个一个对比对应位置的元素。会发现第一个元素一样，可以直接复用；但是第二个元素就不一样了，原本是少年派，现在是夏洛特烦恼，因此需要修改其中的值；第三个元素也不一样，需要修改其中的值；还需要创建一个新的第四个元素。
5. 使用 key 的话：Vue 可以通过 key 来比较是否是同一个元素。会发现大话西游、少年派、盗梦空间的元素都一样，可以直接复用，只需要创建一个新的元素插入即可。
template 元素：
template 元素作为一个不可见的包裹元素，最终是不会被浏览器渲染出来的，与条件渲染和列表渲染结合使用可以减少元素层级的嵌套。
<div id="app">
<template v-if="Object.keys(info).length">
<p>姓名：{{info.name}}</p>
<p>年龄：{{info.age}}</p>
</template>
<template v-else>
<p>暂无个人信息</p>
<p>请填写后查看</p>
</template>
</div>
<script>
const app = Vue.createApp({
data() {
return {
info: {
name: 'Lee',
age: 18,
},
}
}
})
app.mount('#app')
</script>
可以看到，p 元素外面并不会再嵌套一层多元的元素。
