一、数据绑定类
1. v-text
-
作用：绑定文本内容（等价于
{{ }}，但不会解析 HTML）。
<div id="app">
<div v-text="message"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
});
app.mount('#app');
</script>
2. v-html
-
作用：绑定并解析 HTML 内容（注意 XSS 风险）。
<div id="app">
<div v-html="htmlContent"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
htmlContent: '<h1 style="color:red">这是红色标题</h1>'
}
}
});
app.mount('#app');
</script>
3. v-bind（简写 : ）
-
作用：绑定一个或多个属性。
<div id="app">
<img v-bind:src="imgUrl" :alt="imgAlt">
<a :href="link">点击访问</a>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'https://picsum.photos/200',
imgAlt: '示例图片',
link: 'https://vuejs.org'
}
}
});
app.mount('#app');
</script>
4. v-model
-
作用：双向绑定表单元素的值。
<div id="app">
<input v-model="username" placeholder="请输入用户名">
<p>你输入的是：{{ username }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
username: ''
}
}
});
app.mount('#app');
</script>
二、事件处理类
5. v-on（简写 @）
-
作用：绑定事件监听器。
<div id="app">
<button v-on:click="count++">点击增加</button>
<button @click="reset">重置</button>
<p>计数：{{ count }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
reset() {
this.count = 0;
}
}
});
app.mount('#app');
</script>
6. v-once
-
作用：只渲染一次，数据变化后不再更新。
<div id="app">
<div v-once>{{ message }}</div>
<button @click="message = '更新后的内容'">修改</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: '初始内容'
}
}
});
app.mount('#app');
</script>
三、条件渲染类
7. v-if
-
作用：条件渲染，不满足条件时元素会被销毁。
<div id="app">
<div v-if="show">显示内容</div>
<button @click="show = !show">切换</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
}
});
app.mount('#app');
</script>
8. v-else
- 作用：与
v-if配合使用。
<div id="app">
<div v-if="isLogin">欢迎回来！</div>
<div v-else>请先登录</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
isLogin: false
}
}
});
app.mount('#app');
</script>
9. v-else-if
-
作用：多条件判断。
<div id="app">
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
score: 75
}
}
});
app.mount('#app');
</script>
10. v-show
-
作用：条件显示（通过
display: none控制，元素始终存在）。
<div id="app">
<div v-show="visible">我是可见的</div>
<button @click="visible = !visible">切换</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
visible: true
}
}
});
app.mount('#app');
</script>
四、列表渲染类
11. v-for
-
作用：循环渲染列表（必须配合
key）。
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
list: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橘子' }
]
}
}
});
app.mount('#app');
</script>
五、其他常用指令
12. v-pre
-
作用：跳过编译，原样显示标签内容。
<div id="app">
<div v-pre>{{ message }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
});
app.mount('#app');
</script>
13. v-cloak
-
作用：防止插值闪烁（配合 CSS）。
<style>
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: '加载完成'
}
}
});
app.mount('#app');
</script>
14. v-slot（简写 #）
-
作用：定义插槽。
<div id="app">
<my-component>
<template v-slot:header>
<h1>头部内容</h1>
</template>
<template #default>
<p>默认内容</p>
</template>
</my-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({});
app.component('my-component', {
template: `
<div>
<slot name="header"></slot>
<slot></slot>
</div>
`
});
app.mount('#app');
</script>
六、Vue 3 新增指令
15. v-memo
-
作用：缓存模板片段，仅在依赖变化时重新渲染。
<div id="app">
<div v-memo="[valueA, valueB]">
{{ valueA }} + {{ valueB }} = {{ valueA + valueB }}
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
valueA: 1,
valueB: 2
}
}
});
app.mount('#app');
</script>
16. v-is
-
作用：动态绑定组件（解决 DOM 解析限制）。
<div id="app">
<component v-is="currentComponent"></component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
currentComponent: 'component-a'
}
},
components: {
'component-a': { template: '<div>组件A</div>' },
'component-b': { template: '<div>组件B</div>' }
}
});
app.mount('#app');
</script>
