内置指令
内置指令
内置指令是一组用于操作 DOM 和响应式数据的特殊属性
以下是一些常用的 Vue3 内置指令及其用法：
1. v-text
更新元素的文本内容
js
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>2. v-html
v-html 指令用于将一个字符串渲染为 HTML
html
<template>
<div v-html="rawHtml"></div>
</template>
<script>
export default {
data() {
return {
rawHtml: "<strong>Hello World!</strong>",
};
},
};
</script>安全说明
在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
3. v-show
v-show 指令用于根据表达式的值来控制元素的显示和隐藏
html
<template>
<div v-show="isVisible">Hello World!</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
},
};
</script>注意事项：v-show 只是简单地切换元素的 CSS 属性 display
4. v-if
v-if 指令用于根据表达式的值来条件性地渲染元素
html
<template>
<div v-if="isVisible">Hello World!</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
},
};
</script>注意事项：v-if 会创建一个新的虚拟节点。如果需要频繁地切换元素可见性，建议使用 v-show。
5. v-else
v-else 指令用于与 v-if 配合，表示当条件不满足时执行的内容
html
<template>
<div v-if="isVisible">Hello World!</div>
<div v-else>Not visible</div>
</template>
<script>
export default {
data() {
return {
isVisible: false,
};
},
};
</script>6. v-else-if
v-else-if 指令用于与 v-if 配合，表示当多个条件都不满足时执行的内容。
html
<template>
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other type</div>
</template>
<script>
export default {
data() {
return {
type: "B",
};
},
};
</script>7. v-for
v-for 指令用于遍历数组或对象，生成重复的元素。
html
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ["apple", "banana", "orange"],
};
},
};
</script>8. v-on
v-on 指令用于监听事件，可以简写为 @
html
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log("Button clicked");
},
},
};
</script>9. v-bind
v-bind 指令用于绑定属性到元素上，可以简写为 :
html
<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src="src" -->
<img :src />
<!-- 动态 attribute 名的缩写 -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />
<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>10. v-model
v-model 指令用于实现双向数据绑定, 详见 v-model 与表单{target="_blank"}
html
<template>
<input v-model:value="inputValue" />
</template>
<script>
export default {
data() {
return {
inputValue: "",
};
},
};
</script>11. v-slot
v-slot 指令用于定义插槽内容，可以在组件中预留位置，然后在父组件中使用插槽填充内容。缩写为: #
vue
<!-- 具名插槽 -->
<BaseLayout>
<template v-slot:header>
Header content
</template>
<template v-slot:default>
Default slot content
</template>
<template v-slot:footer>
Footer content
</template>
</BaseLayout>
<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</InfiniteScroll>
<!-- 接收 prop 的默认插槽，并解构 -->
<Mouse v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</Mouse>12. v-pre
v-pre 指令用于保留原始文本内容，不会进行编译。
html
<template>
<div v-pre>{{ rawText }}</div>
</template>13. v-once
v-once 指令用于确保某个元素只被渲染一次，即使它的内容发生了变化。
html
<template>
<div v-once>{{ text }}</div>
</template>14. v-memo
v-memo 指令用于对函数进行缓存，避免重复计算。
html
<template>
<div v-memo="computeExpensiveValue">{{ expensiveValue }}</div>
</template>指令语法导图
在这里你可以直观地看到完整的指令语法： 