🎨 前端开发

Vue.js

Vue.js Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 前端开发🧭 Markdown 速查🏷️ 2 个标签

#vue#framework

向下滚动查看内容

返回全部 Cheat Sheets

📘 Vue.js 3 Cheatsheet – Beginner to Advanced

The ultimate reference for mastering Vue 3.

⚙️ 1. Setup

CDN (Quick Start)

HTML

滚动查看更多

<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

BASH

滚动查看更多

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

🧠 2. App Structure

CODE

滚动查看更多

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

📦 3. Data, Methods, Template

滚动查看更多

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

HTML

滚动查看更多

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

🧰 4. Directives

Directive	Purpose
`v-bind` / `:`	Bind attributes
`v-model`	Two-way binding
`v-if / v-else`	Conditional rendering
`v-show`	Toggle visibility
`v-for`	List rendering
`v-on` / `@`	Event handling
`v-slot`	Named/Scoped slot usage

Example

HTML

滚动查看更多

<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

HTML

滚动查看更多

<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

滚动查看更多

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

HTML

滚动查看更多

<Greeting name="Sumangal" />

🔗 9. Props & Emits

Props

滚动查看更多

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

Emit

滚动查看更多

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

🔄 10. v-model with Components

滚动查看更多

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

HTML

滚动查看更多

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

⚒ 11. 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

BASH

滚动查看更多

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 Alternative)

BASH

滚动查看更多

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

HTML

滚动查看更多

<!-- Default -->
<slot></slot>

<!-- Named -->
<slot name="header"></slot>

<!-- Scoped -->
<slot :user="user"></slot>

🧪 15. Testing

Vitest + Vue Test Utils

BASH

滚动查看更多

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

Use ref() for primitives, reactive() for objects
Use <script setup> syntax in SFCs
Break UI into small, reusable components
Always define key in v-for
Use slots for flexible composition

🛠 17. Dev Tools

🧩 Vue DevTools
🧠 Volar for VSCode
⚡ Vite for fast dev environment

📚 18. Official Resources

相关 Cheat Sheets

1v1免费职业咨询

We Accept

Top Categories

Web全栈班 DevOps项目班数据工程全栈班数据分析项目班编程入门班 Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习 Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)

Level 2, 171 La Trobe St, Melbourne VIC 3000

四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号

Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au 0421-672-555

Disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

ABN 26621887572

Vue.js

📘 Vue.js 3 Cheatsheet – Beginner to Advanced

⚙️ 1. Setup

🧠 2. App Structure

📦 3. Data, Methods, Template

🧰 4. Directives

🪝 5. Lifecycle Hooks

🎯 6. Events

🔁 7. Computed & Watch

🧱 8. Components

🔗 9. Props & Emits

🔄 10. v-model with Components

⚒ 11. Composition API

🌐 12. Vue Router

📦 13. Pinia (Vuex Alternative)

🎨 14. Slots

🧪 15. Testing

🧼 16. Best Practices

🛠 17. Dev Tools

📚 18. Official Resources

相关 Cheat Sheets

React

Svelte

CSS 3

HTML

Sass