常见指令
-
v-text:
- 用于文本替换，会替换标签内原本所有的文本
-
v-html：
- 也是用于文本替换，能够识别html和css结构，但不推荐使用
-
v-show：
- 通过 css 控制标签显示还是隐藏
-
v-if/v-else/v-else-if:
- 通过是否加载标签控制标签显示还是隐藏
-
v-for:
- 遍历一组数据，循环渲染一些标签
-
v-on/@：
- 给组件绑定一些事件
-
v-bind/: :
- 单向绑定属性
-
v-model:
- 双向绑定数据
-
v-slot:
- 插槽内需要使用的指令
-
v-pre:
- 跳过 vue 的编译
-
v-once:
- 只会被编译一次, 后续的编译与当前标签没有关系
-
v-memo:
- 只有绑定的依赖发生变化的时候, 才会重新渲染标签
-
v-cloak:
- 用于隐藏尚未完成编译的 DOM 模板。
注意
如何选择 v-show 和 v-if
因为如果v-if的条件是假，则不会渲染标签，v-show无论如何都会渲染 所以展示隐藏切换不频繁的话推荐使用v-if，否则推荐v-show
并且：v-if 和 v-else之间不能有其他标签
循环遍历的内容
<li v-for="(item, index) in listArr">{{ item }} --- {{ index }}</li>
如果遍历的是数组，第一个参数是数组元素，第二个参数是数组下标； 如果遍历的是对象，第一个参数是属性值，第二个参数是属性名。
key属性是我们在循环遍历的时候一般都会写上的，key的值需要时一个唯一值，一般选用id； key 是用来给每一个节点做唯一标识的属性，它的作用是帮助 Vue 进行 DOM 元素的复用
- v-for 和 v-if 能不能一起使用？
在vue2中，因为v-for的优先级会比v-if高，所以vue2中禁止两者同时使用；在 vue3 中, vue 调整了 v-if 的优先级, 所以在 vue3 中可以同时使用 v-for 和 v-if, 但是我们开发习惯上不会出现 v-for 和 v-if 同时使用
事件绑定
- 事件修饰符
@click.stop，stop就是事件修饰符，用于阻止事件冒泡，once作用是事件执行一次后, 自动解绑......; vue中也可以使用事件对象---e
