Vue3学习：从入门到初步掌握

2024/12/25 0:02:42

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

概述

Vue3学习涵盖了从基础概念到核心特性的全面介绍，包括Vue3的安装、项目搭建、组件开发和路由管理等内容。文章还详细讲解了Composition API、模板语法、状态管理和实战演练，帮助读者从入门到初步掌握Vue3。

Vue3基础概念介绍

Vue3简介

Vue3 是 Vue.js 的最新稳定版本，它在 Vue2 的基础上进行了多项改进和优化。Vue3 带来了更好的性能、更小的体积、更好的 TypeScript 支持以及更强大的 Composition API。Vue3 的核心设计理念包括可组合性、响应式系统和更高效的渲染机制。

Vue3 通过重构响应式系统，引入了新的 Proxy 代理对象，使得响应式数据可以更精确地追踪和更新，从而提高性能。同时，Vue3 还优化了模板编译器，减少了内存和 DOM 操作的开销。

安装Vue3

安装 Vue3 可以通过 Vue CLI（Vue命令行工具）或者直接引入 Vue3 的 CDN 来进行。

使用 Vue CLI 安装

  1. 首先确保安装了 Node.js 和 npm。
  2. 全局安装 Vue CLI：
npm install -g @vue/cli
  1. 使用 Vue CLI 创建一个新的 Vue3 项目：
vue create my-vue3-app

在创建项目时选择 Vue 3，或者在创建项目后手动修改 package.json 文件中的 dependencies 字段，将 vue 版本设置为 3.x。

使用 CDN 安装

在 HTML 文件中引入 Vue3 的 CDN，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3入门示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue3!'
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

Vue3项目搭建

使用 Vue CLI 创建一个 Vue3 项目，可以轻松地配置开发环境。

  1. 创建项目：
vue create my-vue3-app
  1. 在项目创建过程中，选择 Vue 3 作为基础模板。
  2. 安装完成后，进入项目目录并启动开发服务器：
cd my-vue3-app
npm run serve

这将启动开发服务器，默认在 localhost:8080 运行。

Vue3的核心特性

Composition API

Vue3 引入了 Composition API，它允许更灵活地组织和复用逻辑。Composition API 通过 setup 函数来集中所有响应式数据、生命周期钩子和方法。

基本使用

在模板中使用 Composition API：

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

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Hello, Composition API!');
const count = ref(0);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('Component has been mounted.');
});
</script>

模板语法

Vue3 的模板语法是基于 HTML 的，通过指令和插值来实现数据绑定和动态渲染。

指令

Vue3 中的指令以 v- 开头。例如，v-if 用于条件渲染，v-for 用于列表渲染。

<template>
  <div>
    <p v-if="show">Hello, World!</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);
</script>

数据绑定与响应式系统

Vue3 的响应式系统基于 Proxy 对象实现，能够更精确地追踪数据变化。

响应式数据

在 Vue3 中，可以通过 ref 和 reactive 来创建响应式数据。

import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({
  count: 0,
  name: 'Vue3'
});

function increment() {
  count.value++;
  state.count++;
}

console.log(count.value); // 输出 0
increment();
console.log(count.value); // 输出 1
Vue3组件开发

组件的基本使用

Vue3 的组件是构建应用的基本单元。组件可以重复使用，也可以嵌套使用。

创建组件

创建一个 Vue3 组件：

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

<script setup>
import { ref } from 'vue';

const title = ref('My Component');
const message = ref('Hello, from Vue3!');
</script>

引用组件

在其他组件或模板中引用这个组件：

<template>
  <div>
    <h1>App Component</h1>
    <MyComponent />
  </div>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

插槽与作用域插槽

Vue3 支持插槽来复用和定制组件的内部结构。

基本插槽

定义一个带有插槽的组件：

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

<script setup>
import { ref } from 'vue';

const message = ref('Default Message');
</script>

使用插槽：

<template>
  <div>
    <h1>App Component</h1>
    <MyComponent>
      <p>Custom Message</p>
    </MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

作用域插槽

定义一个带有作用域插槽的组件：

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Scoped Slot');
</script>

使用作用域插槽：

<template>
  <div>
    <h1>App Component</h1>
    <MyComponent>
      <template v-slot="{ message }">
        <p>{{ message }}</p>
      </template>
    </MyComponent>
  </div>
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

动态组件与异步组件

Vue3 支持动态组件，可以根据条件渲染不同的组件。

动态组件

使用 <component> 标签动态切换组件：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Component A</button>
    <button @click="currentComponent = 'ComponentB'">Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');
</script>

异步组件

使用 defineAsyncComponent 来延迟加载组件：

<template>
  <div>
    <component :is="asyncComponent"></component>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';

const asyncComponent = defineAsyncComponent(() => import('./ComponentA.vue'));
</script>
Vue3路由管理

Vue Router安装与配置

Vue Router 是 Vue.js 官方推荐的路由库，用于管理单页面应用中的导航。

安装 Vue Router

使用 npm 安装 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');

路由参数与查询参数

路由参数

定义带参数的路由：

const routes = [
  { path: '/user/:id', component: User }
];

访问带参数的路由：

<router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>

在组件中访问参数：

import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = ref(route.params.id);

查询参数

定义带查询参数的路由：

<router-link :to="{ path: '/search', query: { q: 'vue3' } }">Vue3 Search</router-link>

在组件中访问查询参数：

import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const query = ref(route.query);

路由守卫

Vue Router 提供了多种路由守卫，可以在不同的时机对路由进行控制。

前置守卫

定义一个全局的前置守卫：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes,
  beforeEnter: (to, from, next) => {
    if (to.meta.requiresAuth) {
      // 检查是否已登录
      next();
    } else {
      next('/');
    }
  }
});

在路由中设置元信息：

const routes = [
  { path: '/user', component: User, meta: { requiresAuth: true } }
];

导航守卫

定义一个全局的导航守卫：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes,
  beforeEach: (to, from, next) => {
    if (to.meta.requiresAuth) {
      // 检查是否已登录
      next();
    } else {
      next('/');
    }
  }
});
Vue3状态管理

Vuex基础

Vuex 是 Vue.js 的状态管理库，用于在应用中集中管理状态。

安装 Vuex

使用 npm 安装 Vuex：

npm install vuex@next

创建 Vuex Store

创建一个 Vuex Store：

import { createStore } from 'vuex';
import { ref } from 'vue';

export default createStore({
  state: {
    count: ref(0)
  },
  mutations: {
    increment(state) {
      state.count.value++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count.value * 2;
    }
  }
});

在主应用中使用 Vuex Store：

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

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

Vuex Store的创建与使用

在组件中使用 Vuex Store：

import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

onMounted(() => {
  console.log(store.state.count); // 输出当前计数
  store.dispatch('increment');
  console.log(store.state.count); // 输出计数增加后的结果
});

Getter与Mutation

Getter

在 Vuex Store 中定义 Getter：

getters: {
  doubleCount(state) {
    return state.count.value * 2;
  }
}

在组件中使用 Getter：

import { ref, onMounted } from 'vue';
import { useStore, useGetter } from 'vuex';

const store = useStore();
const doubleCount = useGetter('doubleCount');

onMounted(() => {
  console.log(doubleCount); // 输出当前计数的两倍
});

Mutation

在 Vuex Store 中定义 Mutation：

mutations: {
  increment(state) {
    state.count.value++;
  }
}

在组件中使用 Mutation：

import { ref, onMounted } from 'vue';
import { useStore, useMutation } from 'vuex';

const store = useStore();
const mutation = useMutation('increment');

onMounted(() => {
  mutation(); // 执行 mutation
});
Vue3项目实战

小项目实战演练

创建一个简单的登录表单应用。

创建项目结构

mkdir login-app
cd login-app
vue create .
npm install axios

创建登录表单组件

创建一个登录表单组件 LoginForm.vue：

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <label>
        Username:
        <input v-model="username" type="text" required>
      </label>
      <label>
        Password:
        <input v-model="password" type="password" required>
      </label>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const username = ref('');
const password = ref('');

async function handleLogin() {
  try {
    const response = await axios.post('/api/login', { username: username.value, password: password.value });
    if (response.data.success) {
      console.log('Login successful!');
    } else {
      console.error('Login failed!');
    }
  } catch (error) {
    console.error('Error:', error);
  }
}
</script>

创建后端模拟接口

创建一个简单的后端接口来模拟登录请求。可以使用 Express.js 来搭建后端。

  1. 安装 Express.js：
npm install express
  1. 创建后端服务器 server.js：
const express = require('express');
const app = express();
const PORT = 3001;

app.use(express.json());

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === 'password') {
    res.json({ success: true });
  } else {
    res.status(401).json({ success: false });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});
  1. 启动后端服务器：
node server.js

常见问题与解决方法

问题：组件内数据变化但页面不更新

确保数据是响应式的，使用 ref 或 reactive 来创建响应式数据。

import { ref } from 'vue';

const count = ref(0);

问题：路由跳转后页面样式丢失

确保在路由配置中正确引入全局样式文件。

import './App.css';

问题：Vue3与旧版本代码兼容

使用 Vue3 的 compat 模式来兼容旧版本代码：

import { createApp, compat } from 'vue';
import App from './App.vue';

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

Vue3项目部署

部署到 GitHub Pages

  1. 安装 gh-pages：
npm install gh-pages --save-dev
  1. 在 package.json 中添加 homepage 和 predeploy 脚本：
{
  "name": "my-vue3-app",
  "version": "1.0.0",
  "homepage": "https://<your-github-username>.github.io/<your-repo-name>",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}
  1. 构建项目并部署：
npm run predeploy
npm run deploy
  1. 访问部署链接：
https://<your-github-username>.github.io/<your-repo-name>

部署到 Netlify

  1. 创建 Netlify 账号并登录。

  2. 使用 Netlify 的 CLI 进行部署：
npm install netlify-cli --save-dev
  1. 在 package.json 中添加部署脚本：
{
  "name": "my-vue3-app",
  "version": "1.0.0",
  "scripts": {
    "build": "vue-cli-service build",
    "deploy": "netlify deploy --dir=dist"
  }
}
  1. 构建并部署项目：
npm run build
npm run deploy


这篇关于Vue3学习：从入门到初步掌握的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程