Vue 3基础知识快速入门
1. Vue 3 概述
Vue 3是渐进式的JavaScript框架,它让构建用户界面变得既简单又强大。新特性比如组合式API,让代码组织更灵活;还有对TypeScript的支持,让静态类型检查变得容易。
-
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服务器,可以帮助你更快地学习和解决问题。