Vue.js 框架

精选 Vue.js 框架 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。 精选 Vue 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。包含最重要概念、响应式系统、组件系统、路由等内容的 Vue 3 备忘单。更新至最新版本，适合初学者和高级用户。

Star 项目
关注 X (Twitter)
赞赏饮咖啡

#📘 Vue.js 3 速查手册 – 从初学者到高级

掌握 Vue 3 的终极参考。

#⚙️ 1. 安装设置 (Setup)

#CDN（快速开始）

<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
  Vue.createApp({
    data() {
      return { message: "Hello Vue!" };
    }
  }).mount("#app");
</script>

#Vite + Vue 脚手架

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

#🧠 2. 应用结构 (App Structure)

src/
├─ components/
├─ views/
├─ App.vue
├─ main.js

#📦 3. 数据、方法、模板 (Data, Methods, Template)

data() {
  return {
    count: 0,
    message: "Welcome!"
  };
},
methods: {
  increment() {
    this.count++;
  }
}

<h1>{{ message }}</h1>
<button @click="increment">+</button>

#🧰 4. 指令 (Directives)

指令 用途
v-bind / : 绑定属性
v-model 双向绑定
v-if / v-else 条件渲染
v-show 切换可见性
v-for 列表渲染
v-on / @ 事件处理
v-slot 命名/作用域插槽使用

#示例 (Example)

<input v-model="name" />
<p v-if="name">Hi, {{ name }}!</p>
<ul>
  <li v-for="item in list" :key="item.id">{{ item }}</li>
</ul>

#🪝 5. 生命周期钩子 (Lifecycle Hooks)

created() {},
mounted() {},
updated() {},
unmounted() {}

#🎯 6. 事件 (Events)

<button @click="sayHi">Click</button>
<input @keyup.enter="submit" />

#🔁 7. 计算属性与监听器 (Computed & Watch)

computed: {
  reversed() {
    return this.message.split('').reverse().join('');
  }
},
watch: {
  count(newVal, oldVal) {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  }
}

#🧱 8. 组件 (Components)

#注册与使用 (Register + Use)

app.component("Greeting", {
  props: ["name"],
  template: `<h1>Hello, {{ name }}!</h1>`
});

<Greeting name="Sumangal" />

#🔗 9. Props 与 Emits

#Props 属性

props: {
  title: String,
  age: {
    type: Number,
    default: 18
  }
}

#Emit 事件

this.$emit("custom-event", payload);

#🔄 10. v-model 与组件

props: ['modelValue'],
emits: ['update:modelValue']

<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
/>

#⚒ 11. 组合式 API (Composition API)

import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    const increment = () => count.value++;

    return { count, double, increment };
  }
};

#🌐 12. Vue Router 路由

npm install vue-router

#router.js 路由配置

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
];

export default createRouter({
  history: createWebHistory(),
  routes
});

#main.js 入口

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router).mount("#app");

#📦 13. Pinia（Vuex 替代）

npm install pinia

#store/counter.js 状态示例

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

const counter = useCounterStore();
counter.increment();

#🎨 14. 插槽 (Slots)

<!-- 默认 -->
<slot></slot>

<!-- 命名 -->
<slot name="header"></slot>

<!-- 作用域 -->
<slot :user="user"></slot>

#🧪 15. 测试 (Testing)

#Vitest + Vue Test Utils 测试

npm install vitest @vue/test-utils

import { mount } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent.vue";

test("renders", () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain("Hello");
});

#🧼 16. 最佳实践 (Best Practices)

  • 对原始值使用 ref()，对对象使用 reactive()
  • 在 SFC 中使用 <script setup> 语法
  • 将 UI 分解为小型、可重用的组件
  • 在 v-for 中始终定义 key
  • 使用插槽实现灵活的组合

#🛠 17. 开发工具 (Dev Tools)

#📚 18. 官方资源 (Official Resources)