1. v-bind
v-bind 用于动态地绑定一个或多个属性，语法是 v-bind:attribute="expression" 或者缩写形式 :attribute="expression"。
<template>
<div :class="dynamicClass"></div>
</template>
<script>
export default {
data() {
return {
dynamicClass: 'red',
};
},
};
</script>
2. v-model
v-model 用于在表单元素上创建双向数据绑定，语法是 v-model="data"。
<template>
<input v-model="message">
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!',
};
},
};
</script>
3. v-if、v-else-if、v-else
用于条件性地渲染元素。
<template>
<div v-if="isTrue">True</div>
<div v-else-if="isFalse">False</div>
<div v-else>Neither true nor false</div>
</template>
<script>
export default {
data() {
return {
isTrue: true,
isFalse: false,
};
},
};
</script>
4. v-for
用于循环渲染列表。
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
],
};
},
};
</script>
5. v-on
v-on 用于监听 DOM 事件，语法是 v-on:event="handler" 或者缩写形式 @event="handler"。
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
},
},
};
</script>
6. v-show
用于根据表达式的真假切换元素的显示状态，类似于 v-if，但是通过设置 CSS 的 display 样式实现。
<template>
<div v-show="isVisible">Visible content</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
},
};
</script>
自定义指令
除了内置指令外，Vue 3.0 还支持自定义指令。你可以使用 directive 函数来定义全局或局部的自定义指令。
<template>
<div v-my-directive>Custom Directive</div>
</template>
<script>
export default {
directives: {
'my-directive': {
// 自定义指令的生命周期钩子
mounted(el, binding) {
// 在元素挂载时调用
console.log('Custom directive mounted');
},
updated(el, binding) {
// 在元素更新时调用
console.log('Custom directive updated');
},
// ...
},
},
};
</script>
自定义指令的具体用法和实现方式取决于你的需求，可以根据文档中的指引来创建适合自己应用的指令。
以上是一些 Vue 3.0 中常见的指令，它们提供了丰富的功能，使你能够方便地处理视图层的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/575/Vue 3.0