Vue.js 常用语法速查表
Vue.js 是渐进式 JavaScript 框架，整理 Vue 3 常用语法和 API，快速查阅开发高频用法。
返回 编程语言模板语法 6
{{ message }}文本插值
v-bind:href="url" 或 :href="url"属性绑定
v-on:click="handler" 或 @click="handler"事件绑定
v-model="inputValue"双向数据绑定
v-if / v-else-if / v-else条件渲染
v-for="item in items" :key="item.id"列表渲染
组合式 API 5
const count = ref(0)响应式基本类型
const state = reactive({ name: "John" })响应式对象
const doubled = computed(() => count.value * 2)计算属性
watch(count, (newVal, oldVal) => {})侦听器
onMounted(() => {})生命周期钩子
组件通信 4
defineProps<{ msg: string }>()接收父组件 props
const emit = defineEmits(["change"])向父组件发送事件
provide("key", value) / inject("key")跨层级依赖注入
defineExpose({ count })暴露组件实例给父组件
常用指令 4
v-show="isVisible"条件显示（CSS display）
v-html="rawHtml"渲染原始 HTML
v-slot:default 或 #default具名插槽
v-memo="[valueA, valueB]"记忆优化（Vue 3.2+）
💡 提示
- ref 用于基本类型，reactive 用于对象；ref 需要 .value 访问，reactive 不需要。
- computed 有缓存，只在依赖变化时重新计算；methods 每次调用都执行。
- defineProps 和 defineEmits 是编译器宏，不需要 import。
- Vue Router 用 createRouter 创建，Pinia 用 defineStore 定义状态。