Vue.js 是一个渐进式的JavaScript框架，它的核心功能非常简单，但可以通过插件或者库来扩展。下面是一些常用的Vue.js标签和它们的用法示例：
v-text: 用于更新元素的文本内容。
<div v-text="message"></div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-html: 用于更新元素的innerHTML，可以解析HTML标签。
<div v-html="rawHtml"></div>
new Vue({
el: '#app',
data: {
rawHtml: '<span>Hello Vue!</span>'
}
})
v-if、v-else-if、v-else: 用于条件性地渲染一块内容。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Other
</div>
new Vue({
el: '#app',
data: {
type: 'B'
}
})
v-for: 用于循环数组或对象来渲染一个列表。
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
new Vue({
el: '#app',
data: {
items: [
{ text: 'Item 1' },
{ text: 'Item 2' },
{ text: 'Item 3' }
]
}
})
v-on: 用于监听事件，比如点击事件。
<button v-on:click="doSomething">Click me</button>
new Vue({
el: '#app',
methods: {
doSomething: function() {
console.log('Button clicked!')
}
}
})
v-bind: 用于绑定一个属性，比如绑定一个值到href。
<a v-bind:href="url">Click here</a>
new Vue({
el: '#app',
data: {
url: 'https://www.example.com'
}
})
v-model: 创建数据双向绑定，用于表单输入和应用状态之间。
<input v-model="message">
new Vue({
el: '#app',
data: {
message: ''
}
})
v-prev: 用于绑定元素的显示状态。
<div v-show="isVisible">Visible</div>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
v-cloak: 这个指令保持在元素上直到关联的实例结束编译。
<div v-cloak>
{{ message }}
</div>
v-once: 用于执行单次渲染，后续改变不会更新。
<div v-once>{{ message }}</div>
这些是Vue.js中常用的指令，每个指令都有其特定的用途，可以根据需要选择合适的指令来使用。