vue3 模板语法
最新回答
海心
2024-10-03 01:55:59
各种语言都有实现自己的模板引擎，比如PHP的Twig，Java的Thymeleaf等。
Vue内置了自己的模板引擎，当然也可以引入第三方模板引擎，这里主要介绍Vue默认模板引擎。书写格式如下：
指令是Vue模板区别于其它模板的重要特征，也是本文的重点。指令的使用方法简单，但是语法比较难记，所以在此，按照方便记忆的方式对指令进行归类和讲解，方便日后查询。个人习惯上把指令分为两类：复杂指令和简单指令。复杂指令是模板引擎的核心指令，使用更频繁、更复杂；简单指令使用频率较低，使用起来也更简单，此外随着Vue更新，这些指令接口被删除的几率更大。
详细的用法参考官方文档。本文按照方便记忆和复习的方式，把这些指令进行了归类总结。
下面是一些复杂指令：
v-if 书写格式：v-if="content"，content是一个bool类型的变量、表达式、或者返回值是bool类型的函数。v-else 搭配 v-if 使用，它必须紧跟在v-if 或者 v-else-if 后面，否则不起作用。作用：用于条件展示。
v-show 书写格式：v-show="content"，content是一个bool类型的变量、表达式、或者返回值是bool类型的函数。作用：和v-if一样，也是用于条件展示。和v-if不同的是，如果v-if后的值是false，指令所在元素会被销毁；当v-show后的值为false，指令所在元素仍然存在于内存当中，只是隐藏起来没有显示。
v-on 书写格式：v-on:event="content"，event是事件名，content是一个函数名。v-on可以用@替代。作用：用于把事件和事件处理函数绑定。
v-bind 书写格式：v-bind:attr="content"，attrs是属性，content是一个string类型的字符串。作用：用于动态设置标签对中的属性值。
v-for 书写格式：v-for="content"，content是一个遍历表达式。有下面两种遍历形式，items是一个数组。
在Vue3中，v-if的优先级高于v-for，导致v-if访问不了v-for中的变量，因此绝对不要把v-if和v-for同时用在同一个元素上。
下面是一些简单指令：
v-text 作用：用于向标签对中添加文本。与下面的写法等价。
v-html 作用：用于添加富文本。举个例子：
两者渲染出来的差别：
v-pre 作用：用来跳过这个元素和它的子元素编译过程，从而加快编译，举个例子：
第一个标签对中的{{message}}不会被message变量替换，而是直接显示{{message}}；第二个{{message}}会被替换为message变量值。
v-once 作用：v-once关联的元素，只会渲染一次。之后的重新渲染，实例及其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。上面的例子中，msg即使产生改变，也不会重新渲染。
v-cloak 作用：解决插值表达式闪烁问题。举个例子：
在页面加载上述组件的时候会闪烁，先显示:
然后才会编译为：
这就是插值表达式闪烁问题，可以用v-cloak指令解决插值表达式闪烁问题。
v-memo 作用：用于控制子元素是否需要重新渲染。举个例子：
在刷新的时候，如果valueA，valueB的值都没有变，该元素及其子元素都不会重新渲染。
热门标签
