# Vue 3 入门培训 ## 1. Vue 3 概述 - **什么是 Vue.js**: Vue.js 是一个用于构建用户界面的渐进式框架。 - **Vue 3 的新特性**: - Composition API - 更好的性能 - 新的生命周期钩子 - 更好的 TypeScript 支持 ## 2. 环境搭建 - **安装 Node.js**: 确保安装了 Node.js 和 npm。 - **创建 Vue 项目**: - ```bash npm install -g @vue/cli vue create my-project ``` ## 3. Vue 3 基础 ### 3.1 组件 - **组件定义**: - ```javascript - // MyComponent.vue - <template> - <div>Hello, Vue 3!</div> - </template> - <script> - export default { - name: 'MyComponent', - } - </script> - ``` - **组件使用**: - ```javascript <template> - <MyComponent /> - </template> - ``` ### 3.2 响应式数据 - **使用 `ref` 和 `reactive`**: - ```javascript - import { ref, reactive } from 'vue'; - const count = ref(0); - const state = reactive({ name: 'Vue' }); - ``` ### 3.3 计算属性和侦听器 - **计算属性**: - ```javascript import { computed } from 'vue'; - const fullName = computed(() => `${state.firstName} ${state.lastName}`); - ``` - **侦听器**: - ```javascript import { watch } from 'vue'; - watch(count, (newValue) => { - console.log(`Count changed to: ${newValue}`); - }); - ``` ## 4. 路由与状态管理 ### 4.1 Vue Router - **安装 Vue Router**: - ```bash - npm install vue-router - ``` - **基本配置**: - ```javascript - import { createRouter, createWebHistory } from 'vue-router'; - const routes = [ - { path: '/', component: Home }, - { path: '/about', component: About }, - ]; - const router = createRouter({ - history: createWebHistory(), - routes, - }); - ``` ### 4.2 Vuex - **安装 Vuex**: - ```bash npm install vuex ``` - **基本配置**: - ```javascript import { createStore } from 'vuex'; - const store = createStore({ - state: { - count: 0, - }, - mutations: { - increment(state) { - state.count++; - }, - }, - }); - ``` ## 5. 组件间通信 - **Props 和 Events**: - **父组件传递 Props**: - ```javascript <ChildComponent :message="parentMessage" /> - ``` - **子组件发出事件**: - ```javascript - this.$emit('eventName', payload); - ``` ## 6. 结语 - **学习资源**: - 官方文档: [Vue.js Documentation](https://vuejs.org/) - 在线课程和教程 通过以上模块，您可以逐步掌握 Vue 3 的基础知识和应用。