Vue3学习：从入门到初级实战教程

2024/12/28 0:03:24

本文主要是介绍Vue3学习：从入门到初级实战教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

Vue3学习涵盖了从环境搭建到基础语法、组件化开发、路由与状态管理以及实战项目的全面教程，帮助开发者快速掌握Vue3的核心特性。文章详细介绍了Vue3的主要特性和开发环境的搭建步骤，通过实例演示了Vue3的基础语法和组件开发。此外，还介绍了Vue Router和Vuex的使用方法，并提供了构建一个简单的待办事项应用的实战指导。

Vue3简介与环境搭建

Vue3的主要特性

Vue3 是 Vue.js 的最新版本，发布于2020年9月。Vue3的主要特性包括：

更小的体积：Vue3的核心库大小减少了约41%。
更快的渲染速度：Vue3对模板编译器进行了重构，模板执行速度提升了约2倍。
Composition API：引入了Composition API，使得复杂应用的状态管理更加方便。
更好的TypeScript支持：Vue3与TypeScript更加兼容，提供了更好的类型推断。
更好的性能优化：Vue3引入了自定义渲染器API，允许开发者更好地控制渲染流程。
更简单的API：Vue3对API进行了精简和优化，使得开发体验更加流畅。

开发环境搭建

为了开始使用Vue3，你需要确保你的开发环境已经搭建好。以下是搭建Vue3开发环境的步骤：

安装Node.js：Vue3需要Node.js环境，确保已经安装了Node.js 14.0或以上版本。
```
# 检查Node.js是否已安装
node -v
```
安装Vue CLI：Vue CLI是Vue.js的官方脚手架工具。使用以下命令安装Vue CLI：
```
npm install -g @vue/cli
```
验证Vue CLI安装：
```
vue --version
```
创建Vue3项目：使用Vue CLI创建一个新的Vue3项目：
```
vue create my-vue3-app
```
在创建项目时，选择Vue3版本：
```
Use Vue 3
```
运行项目：进入项目目录并启动开发服务器。
```
cd my-vue3-app
npm run serve
```

第一个Vue3应用实例

创建一个简单的Vue3应用实例，输出“Hello World”。

在项目目录下，找到src/App.vue文件，将其中的内容替换为以下代码：

<template>
 <div id="app">
   <h1>{{ message }}</h1>
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello World'
   }
 }
}
</script>

<style>
#app {
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

启动开发服务器并访问http://localhost:8080/，你应该能看到“Hello World”显示在页面上。

Vue3基础语法

数据绑定与响应式系统

在Vue3中，数据绑定是通过数据属性（data properties）和模板语法实现的。数据属性是响应式的，当你修改数据属性，视图会自动更新。

模板语法：
```
<div id="app">
 <p>{{ message }}</p>
</div>
```
在Vue中，{{ message }}是一个插值表达式，用于在模板中动态显示数据属性的值。

定义数据属性：

export default {
 data() {
   return {
     message: 'Hello, Vue3!'
   }
 }
}

更改数据属性：

在模板中，当message发生变化时，视图会自动更新：

export default {
 data() {
   return {
     message: 'Hello, Vue3!'
   }
 },
 mounted() {
   setTimeout(() => {
     this.message = 'Hello, World!'
   }, 3000);
 }
}

计算属性与方法

计算属性（computed properties）是对数据属性进行计算并返回一个值。计算属性是缓存的，只有依赖的数据发生变化时，才会重新计算。

定义计算属性：

export default {
 data() {
   return {
     firstName: 'John',
     lastName: 'Doe'
   }
 },
 computed: {
   fullName() {
     return `${this.firstName} ${this.lastName}`;
   }
 }
}

模板中使用计算属性：

<div id="app">
 <p>{{ fullName }}</p>
</div>

方法（methods）则是用于定义函数，这些函数可以被模板中的事件处理器调用。

定义方法：

export default {
 data() {
   return {
     message: 'Hello, Vue3!'
   }
 },
 methods: {
   greet() {
     alert(this.message);
   }
 }
}

在模板中调用方法：

<div id="app">
 <button @click="greet">Greet</button>
</div>

模板语法与指令

Vue的模板语法提供了一系列的HTML指令，用于在视图中添加交互。

条件渲染：

<div id="app">
 <p v-if="show">Hello, Vue3!</p>
 <p v-else>Goodbye, Vue3!</p>
</div>

export default {
 data() {
   return {
     show: true
   }
 }
}

列表渲染：

<div id="app">
 <ul>
   <li v-for="item in items">{{ item }}</li>
 </ul>
</div>

export default {
 data() {
   return {
     items: ['Apple', 'Banana', 'Cherry']
   }
 }
}

事件绑定：

<div id="app">
 <button @click="increment">Increment: {{ count }}</button>
</div>

export default {
 data() {
   return {
     count: 0
   }
 },
 methods: {
   increment() {
     this.count++;
   }
 }
}

Vue3组件化开发

组件基础

Vue组件是可重用的Vue实例片段，每个组件可以有自己的数据、模板、样式和方法。

定义组件：

<template>
 <div>
   <h1>{{ title }}</h1>
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 props: {
   title: String,
   message: String
 },
 data() {
   return {
     count: 0
   }
 }
}
</script>

<style scoped>
h1 {
 color: blue;
}
p {
 color: green;
}
</style>

在父组件中使用子组件：

<template>
 <div id="app">
   <app-header title="My App" message="Welcome to Vue3!" />
 </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
 components: {
   AppHeader
 }
}
</script>

Props与自定义事件

组件之间可以传递数据，父组件通过props向子组件传递数据，子组件通过自定义事件向父组件传递数据。

传递Props：

<template>
 <div id="app">
   <app-child-component :name="username" />
 </div>
</template>

<script>
import AppChildComponent from './components/AppChildComponent.vue'

export default {
 components: {
   AppChildComponent
 },
 data() {
   return {
     username: 'John Doe'
   }
 }
}
</script>

<script>
export default {
 props: ['name']
}
</script>

自定义事件：

<template>
 <div id="app">
   <app-child-component @child-event="handleChildEvent" />
 </div>
</template>

<script>
import AppChildComponent from './components/AppChildComponent.vue'

export default {
 components: {
   AppChildComponent
 },
 methods: {
   handleChildEvent(payload) {
     console.log(payload);
   }
 }
}
</script>

<script>
export default {
 methods: {
   triggerEvent() {
     this.$emit('child-event', 'Hello from child component!');
   }
 }
}
</script>

插槽使用

插槽（slots）用于在组件中定义可插入的内容。父组件可以向子组件的插槽提供内容。

定义插槽：

<template>
 <div>
   <slot></slot>
 </div>
</template>

<script>
export default {
 props: {
   title: String
 }
}
</script>

<style scoped>
.slot-container {
 background-color: lightblue;
 padding: 10px;
}
</style>

使用插槽：

<template>
 <div id="app">
   <app-slot-component>
     <h1>Custom Title</h1>
     <p>Custom content</p>
   </app-slot-component>
 </div>
</template>

<script>
import AppSlotComponent from './components/AppSlotComponent.vue'

export default {
 components: {
   AppSlotComponent
 }
}
</script>

Vue3路由与状态管理

Vue Router基础

Vue Router是Vue.js官方的路由管理器，用于实现单页面应用（SPA）的导航。

安装Vue Router：
```
npm install vue-router@next
```

配置路由：

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 }
];

const router = createRouter({
 history: createWebHistory(),
 routes
});

export default router;

在主应用文件中使用路由：

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

createApp(App).use(router).mount('#app');

创建视图组件：

<template>
 <div>
   <h1>Home</h1>
   <router-link to="/about">Go to About</router-link>
 </div>
</template>

<template>
 <div>
   <h1>About</h1>
   <router-link to="/">Go to Home</router-link>
 </div>
</template>

在模板中使用路由链接：

<template>
 <div id="app">
   <router-view></router-view>
 </div>
</template>

Vuex入门

Vuex是Vue.js的状态管理模式。它提供了一个集中式的存储，使得多个组件能共享状态。

安装Vuex：
```
npm install vuex@next
```

创建Vuex Store：

import { createStore } from 'vuex';

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 }
});

export default store;

在主应用文件中使用Vuex Store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

在组件中使用Vuex Store：

<template>
 <div id="app">
   <p>Count: {{ count }}</p>
   <button @click="increment">Increment</button>
 </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
 computed: {
   ...mapState(['count'])
 },
 methods: {
   ...mapActions(['increment'])
 }
}
</script>

Vue Devtools调试工具

Vue Devtools是一个浏览器扩展，用于调试Vue.js应用。它允许你查看组件的结构、状态和生命周期等信息。

安装Vue Devtools：
- 对于Chrome和Firefox，可以在浏览器的扩展商店中搜索Vue Devtools并安装。
- 对于Edge，可以在Microsoft Edge商店中搜索Vue Devtools并安装。
使用Vue Devtools：
- 安装并启动你的Vue3项目。
- 打开浏览器扩展图标，选择你的Vue3应用进行调试。
- 在Devtools中，查看组件树、状态、计算属性等信息。

实战项目：构建简单的Vue3应用

项目需求分析

在这个实战项目中，我们将构建一个简单的待办事项（To-Do List）应用。用户可以添加、删除和标记待办事项为已完成。

功能实现步骤

创建项目：

使用Vue CLI创建一个新的Vue3项目：
```
vue create my-todo-app
```
在创建项目时，选择Vue3版本：
```
Use Vue 3
```
安装必要的依赖：

使用Vue Router和Vuex来管理路由和状态：
```
npm install vuex@next vue-router@next
```

创建项目结构：

mkdir src/views
mkdir src/components
touch src/router/index.js src/store/index.js