vue的常用指令

Vue.js 提供了许多指令，这些指令用于在模板中绑定数据、事件、属性等。以下是一些常用的 Vue 指令及其示例代码：

1.v-bind：用于绑定属性。
<template>
<div>
<img v-bind:src="imageUrl" alt="My Image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
}
}
</script>
2.v-model：用于在表单元素上创建双向数据绑定。
<template>
<div>
<input v-model="message" placeholder="Enter something...">
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
3.v-if、v-else-if、v-else：用于条件渲染。
<template>
<div>
<p v-if="score > 90">Excellent</p>
<p v-else-if="score > 60">Pass</p>
<p v-else>Fail</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 85
}
}
}
</script>
4.v-for：用于列表渲染。
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>
5.v-on：用于监听 DOM 事件。
<template>
<div>
<button v-on:click="increment">Click me</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
6.v-show：用于根据条件显示或隐藏元素。
<template>
<div>
<p v-show="isVisible">This is visible</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
}
}
</script>
7.v-pre：跳过该元素及其子元素的编译过程。
<template>
<div>
<p v-pre>{{ mustache will not be compiled }}</p>
</div>
</template>
8.v-cloak：在元素加载之前，隐藏未编译的 Mustache 标签。
<template>
<div v-cloak>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
mounted() {
// 延迟显示消息
setTimeout(() => {
this.message = 'Hello Vue!'
}, 1000)
}
}
</script>
<style>
[v-cloak] {
display: none;
}
</style>
这只是 Vue 指令的一部分，Vue 还提供了许多其他有用的指令和特性。为了更深入地了解这些指令和特性，建议查阅 Vue 的官方文档。