Vue.js 提供了许多指令，这些指令用于在模板中绑定数据、事件、属性等。以下是一些常用的 Vue 指令及其示例代码：
1.v-bind：用于绑定属性。
|
|
<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 的官方文档。
