在Vue 3中,基本指令和Vue 2大致相同,但仍然有一些改进和新增的指令。Vue中的指令(Directives)是用于在模板中声明式地绑定数据的特殊标记。以下是Vue 3的基本指令及其含义:
1. v-bind
- 语法:
v-bind:attribute="expression"
或:attribute="expression"
- 用途:绑定一个或多个属性,动态地将属性值绑定到表达式。
2. v-model
- 语法:
v-model="dataProperty"
- 用途:创建双向数据绑定,通常用于表单输入控件。
3. v-if
, v-else-if
, v-else
- 语法:
v-if="condition"
、v-else-if="condition"
、v-else
- 用途:条件渲染,根据表达式的值决定是否渲染元素。
- 示例:
<template> <p v-if="seen">Now you see me</p> <p v-else>Now you don't</p> </template> <script> export default { data() { return { seen: true }; } }; </script>
4. v-show
- 语法:
v-show="condition"
- 用途:基于表达式的值切换元素的可见性,使用
display
样式属性。 - 示例:
<template> <p v-show="isVisible">You can see me</p> </template> <script> export default { data() { return { isVisible: true }; } }; </script>
5. v-for
- 语法:
v-for="item in items"
或v-for="(item, index) in items"
- 用途:基于一个数组或对象来渲染列表。
- 示例:
<template> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </template> <script> export default { data() { return { items: ['Apple', 'Banana', 'Cherry'] }; } }; </script>
6. v-on
- 语法:
v-on:event="method"
或@event="method"
- 用途:绑定事件监听器,响应用户输入。
7. v-slot
- 语法:
v-slot:name
或#name
- 用途:用于插槽分发内容。
- 示例:
<template> <child-component> <template #default> <p>This is default slot content</p> </template> </child-component> </template> <script> export default { components: { 'child-component': { template: '<div><slot></slot></div>' } } }; </script>
8. v-pre
- 语法:
v-pre
- 用途:跳过这个元素和它的子元素的编译过程,用于显示原始的Mustache语法或用于性能优化。
- 示例:
<template> <div v-pre>{{ raw mustache }} not compiled</div> </template>
9. v-cloak
- 语法:
v-cloak
- 用途:保持在元素上直到关联实例完成编译,用于防止闪烁。
- 示例:
<style> [v-cloak] { display: none; } </style> <template> <div v-cloak>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; } }; </script>
10. v-once
- 语法:
v-once
- 用途:只渲染元素和组件一次,用于性能优化。
11. v-memo
(Vue 3新增)
- 语法:
v-memo="[condition]"
- 用途:用于缓存元素或组件的子树,当指定的依赖变化时重新渲染。
- 示例:
<template> <p v-memo="[count]">This will be cached until count changes: {{ message }}</p> </template> <script> export default { data() { return { count: 0, message: 'Hello, Vue!' }; } }; </script>
总结
Vue 3保留了Vue 2中的大多数指令,并在此基础上进行了优化和改进。通过这些基本指令,开发者可以在模板中轻松地进行数据绑定、事件处理、条件渲染和列表渲染等操作,提高开发效率和代码可读性