Vue3 模板语法
Vue3的模板语法和Vue2有所不同,有了一系列的改进和优化。下面我们就来详细地了解一下Vue3的模板语法。
插值
Vue3里的插值用的是{{}}
,如:{{message}}
,这个和Vue2的一样。
指令
指令用v-开头,Vue3的指令和Vue2有所不同,下面是Vue3的指令:
- v-bind:动态绑定数据。用法与Vue2相同。
- v-model:表单元素双向绑定。用法与Vue2相同。
- v-if、v-else-if、v-else:条件渲染。与Vue2一致。
- v-show: 条件渲染。与Vue2一致。
- v-for: 列表渲染。与Vue2一致。
- v-once: 只渲染一次。
- v-html: 将绑定的值解析为HTML。
动态属性
Vue3里可以动态地绑定属性,如<img :src="imgSrc">
,其中imgSrc
是动态的。Vue3还支持动态地绑定多个属性,如<img :src="imgSrc" :alt="imgAlt">
,其中imgSrc
和imgAlt
都是动态的。
动态组件
Vue3动态组件的用法和Vue2一致,使用<component>
标签。
自定义指令
自定义指令有所改变。Vue3中使用app.directive()
方法来自定义全局指令,如:
app.directive('focus', {
mounted(el) {
el.focus()
}
})
使用时在标签中使用v-focus
即可。
Vue3中还可以使用setup()
函数来定义局部指令。
插槽
插槽在Vue3里也有所改变,使用<slot>
代替了Vue2中的<slot></slot>
。Vue3还支持具名插槽,使用<slot name="xxx">
来实现。另外,Vue3还支持了动态插槽。
Teleport
Vue3中引入了Teleport(传送门)的概念来解决弹窗遮罩层的问题。使用方法为:
<teleport to="#modal">
<dialog>
...
</dialog>
</teleport>
<div id="modal"></div>
这样,弹窗遮罩层就可以在不同的位置渲染了。
Suspense
Suspense可以实现对懒加载组件或异步请求的等待状态的自定义展示,使用如下:
<suspense>
<template #default>
<component :is="asyncComponent" />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
当异步请求完成,展示组件。如果异步请求失败,或者异步请求过程中需要等待,则展示等待状态,即Loading…
综上所述,Vue3的模板语法相比Vue2有了许多优化和改进,如支持动态属性、自定义指令、Teleport和Suspense。Vue3的模板语法更加贴近JavaScript,也更加易读易懂,开发效率得到了很大的提高。