Vue 3基础知识快速入门
- 1. Vue 3 概述
- 2. 环境搭建
- 3. Vue 3 项目结构
- 4. 基础语法
- 5. 组合式API
- 6. 组件基础
- 7. 组件通信
- 8. 动态与异步组件
- 9. 计算属性和侦听器
- 10. 生命周期钩子
- 11. 路由与状态管理
- 12. 类型化开发
- 13. 调试与测试
- 14. 实战演练
- 15. 持续学习
1. Vue 3 概述
Vue 3是渐进式的JavaScript框架，它让构建用户界面变得既简单又强大。新特性比如组合式API，让代码组织更灵活；还有对TypeScript的支持，让静态类型检查变得容易。
-
官网： https://cn.vuejs.org/
-
Vue3js.cn（非官方，Vue 3的学习资源聚合网站）： https://vue3js.cn/
2. 环境搭建
在你开始大冒险之前，得确保你的武器库（开发环境）已经准备好了。安装Node.js，然后选择Vue CLI或Vite来创建你的Vue 3项目。
创建Vue 3项目的例子：
# 使用Vue CLI创建项目
vue create my-vue-app
# 或者使用Vite
npm create vite@latest my-vue-app -- --template vue-ts
3. Vue 3 项目结构
每个Vue 3项目都像一个小城镇，有它自己的布局。主要的部件包括src文件夹，里面有components（组件）、views（视图）、router（路由）等。
4. 基础语法
模板语法是Vue的超级力量，让你能够把数据和逻辑直接写进HTML。
模板语法的例子：
<template>
<div>{{ message }}</div>
<button v-on:click="counter++">Click me</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
counter: 0
};
}
}
</script>
5. 组合式API
setup函数是Vue 3的新招式，它是组合式API的中心舞台。
组合式API的例子：
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => console.log('Component is mounted'));
return { count };
}
};
6. 组件基础
组件就像是Vue的乐高积木，你可以用它们搭建任何东西。
定义组件的例子：
<template>
<h1>{{ title }}</h1>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
title: 'My Component'
};
}
});
</script>
7. 组件通信
组件间通信就像是组件们在说悄悄话。Props用于父子间，事件用于更广范围。
组件通信的例子：
<!-- Child.vue -->
<template>
<h1 :title="msg">{{ msg }}</h1>
</template>
<script>
export default {
props: ['msg']
};
</script>
<!-- Parent.vue -->
<template>
<ChildComponent :msg="parentMsg" @update:msg="parentMsg = $event" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMsg: 'Hello from parent'
};
}
};
</script>
8. 动态与异步组件
动态组件就像是变形金刚，可以根据需要变换形态。
动态组件的例子：
<template>
<component :is="currentComponent" />
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
data() {
return {
currentComponent: ComponentA
};
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === ComponentA ? ComponentB : ComponentA;
}
}
};
</script>
9. 计算属性和侦听器
计算属性就像是超级智能的计算器，而侦听器就像是你的私人侦探，帮你盯着数据的变化。
计算属性和侦听器的例子：
import { ref, computed, watch } from 'vue';
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
watch(count, (newValue) => console.log(`Count is now: ${newValue}`));
// 试着改变count的值，看看doubledCount和控制台输出的变化
10. 生命周期钩子
生命周期钩子就像是生命周期中的关键时刻，你可以在这些时刻做特定的操作。
生命周期钩子的例子：
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => console.log('The component is mounted!'));
return {};
}
};
11. 路由与状态管理
Vue Router和Vuex是Vue的两个超能力小伙伴，帮你管理路由和应用状态。
Vue Router的例子：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
// ...其他路由
]
});
export default router;
12. 类型化开发
TypeScript是Vue 3的好朋友，帮你提前发现错误。
TypeScript的例子：
import { defineComponent, ref } from 'vue';
interface Person {
name: string;
age: number;
}
export default defineComponent({
setup() {
const person = ref<Person | null>(null);
// TypeScript会确保person是Person类型或null
person.value = { name: 'John Doe', age: 30 };
return { person };
}
});
13. 调试与测试
调试和测试就像是给你的应用做体检，确保它健康运行。
单元测试的例子（使用Vitest）：
import { describe, it, expect } from 'vitest';
import { sum } from '../src/utils';
describe('sum function', () => {
it('adds 1 + 1 to equal 2', () => {
expect(sum(1, 1)).toBe(2);
});
// 可以添加更多的测试案例
});
14. 实战演练
通过构建小型应用，比如待办事项列表或者天气应用，将所学知识付诸实践。
15. 持续学习
Vue的社区非常活跃，加入社区，比如Vue Discord服务器，可以帮助你更快地学习和解决问题。
