Vue3教程：新手入门与基础详解

概述

本文介绍了Vue3的基础概念、安装步骤和项目搭建方法，详细讲解了组件化开发中的定义与使用、模板语法和数据绑定等内容。此外，文章还深入探讨了Vue3的响应式原理、路由与状态管理以及常用插件与工具的使用。

Vue3基础概念介绍

Vue3简介

Vue.js 是一个轻量级的前端框架，它提供了一套简洁、高效的API来构建用户界面。Vue3是Vue.js的最新版本，引入了许多新特性，如Composition API、更好的响应式系统、性能优化等。Vue3的开发可以更好地满足现代Web应用的需求，提供了更好的开发体验和性能。

安装Vue3

要开始使用Vue3，首先需要安装Vue CLI，这是一个强大的命令行工具，可以快速创建Vue项目并进行项目管理。以下是安装Vue CLI和Vue3的步骤：

1. 先安装Node.js（确保安装了最新的LTS版本）。
2. 使用npm安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建新的Vue3项目：

vue create my-vue3-project

在创建项目的过程中，会提示选择预设配置或者手动配置。选择手动配置后，可以指定使用Vue3版本。

Vue3项目搭建

创建项目后，可以使用以下命令启动开发服务器：

cd my-vue3-project
npm run serve

这将启动开发服务器，并在浏览器中打开默认的启动页面（通常是http://localhost:8080）。

在Vue3中，项目的结构通常如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json
├── babel.config.js
└── vue.config.js

App.vue 是应用的入口组件，main.js 是应用的入口文件。

Vue3组件化开发

组件定义与使用

在Vue3中，组件是构建应用的基本单元。组件可以被独立地开发、测试和复用。定义组件的方式与Vue2非常相似，但有一些语法上的变化。

1. 定义组件：

创建一个新的组件文件，例如HelloWorld.vue，内容如下：

<template>
  <div class="hello">
    <h1>欢迎来到Vue3!</h1>
    <p>这是我的第一个Vue3组件。</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
}
</style>

1. 使用组件：

在其他组件中使用这个组件，例如在App.vue中：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

模板语法详解

Vue3的模板语法主要包括插值、指令和事件等。

1. 插值：

插值是将数据绑定到DOM中的文本内容。使用{{ }}语法：

<p>{{ message }}</p>

在<script>标签中定义数据：

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

1. 指令：

指令是带有v-前缀的特殊属性，用于定义行为。例如，v-bind用于绑定属性：

<div v-bind:class="dynamicClass"></div>

1. 事件：

使用v-on指令来监听事件：

<button v-on:click="handleClick">点击我</button>

在<script>标签中定义事件处理函数：

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

数据绑定与监听器

1. 数据绑定：

数据绑定是将数据与DOM元素绑定，使DOM动态更新。例如，使用v-model进行双向绑定：

<input v-model="inputValue" />
<p>{{ inputValue }}</p>

在<script>标签中定义数据：

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

1. 监听器：

监听器用于监听数据变化。使用watch选项：

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal)
    }
  }
}
</script>

Vue3响应式原理与使用

响应式数据绑定

Vue3通过Proxy对象来实现响应式数据绑定，Proxy可以更灵活地拦截和操作对象的属性。下面是一个简单的例子：

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

在模板中使用{{ message }}，当message改变时，页面会自动更新。

计算属性与侦听器

1. 计算属性：

计算属性是基于依赖的数据进行缓存的计算结果。定义计算属性：

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

在模板中使用{{ fullName }}。

1. 侦听器：

侦听器用于监听数据的变化，适合执行异步操作或副作用操作。定义侦听器：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  }
}
</script>

生命周期钩子函数

Vue3的生命周期钩子函数用于在组件的不同生命阶段执行代码。主要的生命周期钩子函数包括：

1. beforeCreate：实例初始化之前
2. created：实例初始化完成后
3. beforeMount：挂载开始之前
4. mounted：挂载完成后
5. beforeUpdate：数据更新之前
6. updated：数据更新之后
7. beforeUnmount：卸载开始之前
8. unmounted：卸载完成之后

定义生命周期钩子函数：

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  }
}
</script>

Vue3路由与状态管理

Vue Router基础

Vue Router是Vue.js的官方路由插件，可以处理URL路由和组件之间的导航。安装Vue Router：

npm install vue-router@next

1. 定义路由：

创建一个路由配置文件router/index.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 }
]

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

export default router

1. 使用路由：

在main.js中引入并使用路由：

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

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

Vuex介绍与使用

Vuex是Vue.js的官方状态管理库，用于在大型单页应用中更方便地管理状态。安装Vuex：

npm install vuex@next

1. 创建Vuex Store：

创建一个store/index.js文件：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

1. 使用Store：

在main.js中引入并使用Store：

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

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

路由与状态管理实践

结合Vue Router和Vuex，可以创建更复杂的应用。例如，创建一个计数器应用：

1. 定义计数器组件：

创建Counter.vue：

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

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

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

1. 定义路由：

在router/index.js中添加计数器路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Counter from '../components/Counter.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/counter', component: Counter }
]

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

export default router

1. 使用路由：

在main.js中引入并使用路由：

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

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

Vue3常用插件与工具

路由与状态管理插件

除了Vue Router和Vuex，还有其他一些常用的插件，如Element UI、Axios等。

1. Element UI：

Element UI是一个基于Vue的组件库，提供了很多常用的UI组件。安装：

npm install element-ui@latest

引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

1. Axios：

Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。安装：

npm install axios

使用Axios：

import axios from 'axios'

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

UI框架与自定义组件

除了Element UI，还可以使用其他UI框架，如Ant Design Vue等。此外，自定义组件可以提高代码复用性和开发效率。例如，创建一个自定义按钮组件：

1. 定义自定义按钮组件：

创建CustomButton.vue：

<template>
  <button :class="buttonClass" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Button'
    },
    buttonClass: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
button {
  background-color: #42b983;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

1. 使用自定义按钮组件：

在其他组件中使用这个自定义按钮组件：

<template>
  <div>
    <CustomButton text="点击我" buttonClass="custom-button" @click="handleButtonClick" />
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'

export default {
  components: {
    CustomButton
  },
  methods: {
    handleButtonClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

<style scoped>
.custom-button {
  background-color: #f44336;
}
</style>

开发工具与调试技巧

1. Vue Devtools：

Vue Devtools是一个Chrome插件，可以帮助开发者更方便地调试Vue应用。安装插件后，可以查看组件树、状态管理、性能分析等信息。

1. 调试技巧：

• 使用console.log输出调试信息。
• 使用Vue.$options查看组件选项。
• 使用Vue.$set设置新的响应式属性：

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
  methods: {
    setNewProperty() {
      Vue.$set(this, 'newProperty', 'New value')
    }
  }
}

实战项目案例

项目需求分析

假设需要开发一个简单的待办事项（To-Do List）应用。应用应该具备以下功能：

1. 添加新的待办事项。
2. 显示所有待办事项。
3. 标记待办事项为已完成。
4. 删除待办事项。

项目结构设计

项目结构如下：

my-todo-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AddTodo.vue
│   │   ├── TodoList.vue
│   │   └── TodoItem.vue
│   ├── App.vue
│   ├── main.js
├── package.json
├── babel.config.js
└── vue.config.js

项目编码实现

1. 创建AddTodo组件：

创建AddTodo.vue：

<template>
  <div class="add-todo">
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.$emit('add-todo', this.newTodo)
        this.newTodo = ''
      }
    }
  }
}
</script>

<style scoped>
.add-todo {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
}
</style>

1. 创建TodoItem组件：

创建TodoItem.vue：

<template>
  <div class="todo-item">
    <input type="checkbox" :checked="todo.completed" @change="toggleTodo" />
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <button @click="deleteTodo">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleTodo() {
      this.$emit('toggle-todo', this.todo.id)
    },
    deleteTodo() {
      this.$emit('delete-todo', this.todo.id)
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.completed {
  text-decoration: line-through;
}
</style>

1. 创建TodoList组件：

创建TodoList.vue：

<template>
  <div class="todo-list">
    <AddTodo @add-todo="addTodo" />
    <TodoItem
      v-for="(todo, index) in todos"
      :key="index"
      :todo="todo"
      @toggle-todo="toggleTodo"
      @delete-todo="deleteTodo"
    />
  </div>
</template>

<script>
import AddTodo from './AddTodo.vue'
import TodoItem from './TodoItem.vue'

export default {
  components: {
    AddTodo,
    TodoItem
  },
  data() {
    return {
      todos: []
    }
  },
  methods: {
    addTodo(todo) {
      this.todos.push({ id: Date.now(), text: todo, completed: false })
    },
    toggleTodo(id) {
      const todo = this.todos.find(todo => todo.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    },
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style scoped>
.todo-list {
  padding: 20px;
}
</style>

1. 创建App组件：

创建App.vue：

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1. 配置main.js：

配置main.js：

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

createApp(App).mount('#app')