Vue

在当今快速发展的前端技术领域，Vue.js以其简洁的语法、高效的组件化系统以及出色的灵活性，迅速成为开发者的宠儿。对于那些渴望提升开发效率，拥抱现代Web应用开发方式的开发者而言，掌握Vue.js无疑是一条通往高效率开发之路的捷径。

简单了解

Vue是一个开源的渐进式JavaScript框架，用于构建用户界面。它有着许多简洁的API设计和灵活的数据绑定机制，以及组件化开发的方式，非常容易上手。

单页应用（SPA）

我们熟悉的掘金就是通过Vue搭建的，在掘金的导航栏中有许多导航链接，当点击不同的导航链接就会跳转不同的页面。如果让你使用Vue构建掘金，你会为每一个导航链接创建一个独立的HTML文件构建相应的页面，然后用这些页面构成掘金吗。其实掘金的搭建并不需要创建那么多独立的HTML文件去搭建不同的页面，通常只需要创建一个HTML文件就可以搭建所有的页面。

Vue通常基于单页应用的架构模式，在这种模式下只需要有一个主要的入口HTML文件。在单页应用的架构模式中，页面的切换是通过前端路由实现的，而不是通过多个独立的HTNL文件切换页面。

Vue Router （路由系统）

Vue Router 是Vue.js官方提供的路由管理器，它专为Vue应用设计，用于实现客户端的页面导航、路由分发以及组件的切换。

路由是一种机制，它负责管理和解析浏览器的URL，并且根据URL的变化展示相应的内容，这样不需要加载整个页面。URL是用于标识互联网上资源位置的字符串。它的重要部分有协议、域名、端口号、路径和查询参数。

Vue Router的核心机制正是改变URL路径，然后根据路径的变化来匹配并渲染对应的组件。

如：https://juejin.cn是首页页面的url，https://juejin.cn/bots是Bot页面的url，从首页跳转到Bot页面是通过改变url路径然后将Bot页面的组件渲染在页面上实现页面的切换。

组件化

页面的不同部分可以被拆分成多个独立的组件。每一个组件都是由.vue文件定义的。一个 .vue 文件通常包含三个部分：<template> 模板用于定义组件的结构和外观；<script> 脚本用于处理组件的逻辑；<style> 样式用于定义组件的样式，支持 CSS 预处理器。

举个例子：

在一个具有导航栏的单面应用中，可以将导航栏放在唯一的入口HTML文件里，让导航栏一直显示在页面上。然后将页面内容拆分成多个独立的部分，并且分别创建对应的.vue文件实现这些独立的部分。可以将单页应用看作是我们自己，入口html文件就是我们的身体，组件就是我们的衣服，我们可以选择搭配不同的衣服，单页应用也是这样，通过渲染不同的组件构成不同的页面。

页面跳转也就是访问不同的url路径，url路径变化后，路由将展示相应的内容，也就是匹配并渲染不同的组件在页面上。

Vue项目创建

首先在终端输入以下指令后按回车创建一个Vue项目。

sql 复制代码

npm create vue@latest

然后输入项目名称后一路按回车，因为刚刚入门Vue还用不到这些。

在项目创建完成，我们看看这些文件都有什么作用。

.vscode： Visual Studio Code 编辑器的配置文件夹。
extensions.json：用于记录在 VS Code 中为该项目启用或推荐的扩展。
public：存放公共静态资源。
src：源代码目录。
- assets：存放项目中的静态资源，如图像、样式表等。
- components：用于存放自定义的组件。
- App.vue：应用的根组件，通常是整个应用的起点。
- main.js：项目的入口文件，用于初始化 Vue 应用。
.gitignore：在版本控制中指定忽略一些文件或文件夹。
index.html：应用的主页面模板。
jsconfig.json：JavaScript 项目的配置文件，用于提供代码编辑和导航的相关设置。
package.json：包含项目的依赖、脚本等信息。
README.md：项目的说明文档，介绍项目的用途、安装步骤等。
vite.config.js：Vite 构建工具的配置文件，用于自定义构建行为。

其中比较重要的文件是package.json。我们可以通过浏览package.json了解项目需要的依赖。

选择创建的Vue项目还不能运行，因为还没有安装需要的依赖。我们需要在该Vue项目文件的终端输入以下指令，这条指令的执行就是将package.json中需要的依赖全部安装。

npm install

然后通过以下代码运行Vue项目。

arduino 复制代码

npm run dev

按住ctrl再用鼠标点击打开链接。

这就是完成了Vue项目的创建了。

常用Vue指令

简单介绍

v-html:将数据作为纯 HTML 的形式插入到 DOM 中。
v-text：将数据以纯文本的显示插入到DOM中。
v-on：给dom添加一个事件绑定，v-on:可以简写为@。
v-bind：给dom动态绑定一个或多个属性，v-bind:可以简写为:。
v-if ：根据表达式的真假来决定是否渲染元素，如果条件为ture则显示DOM，如果为false则移除该DOM节点。（较v-show 性能差）
v-else ：与v-if配合使用，当前面的v-if条件为false时渲染当前元素。
v-show ：通过条件判断DOM设置css样式display的属性。（较v-if 性能好）
v-for：遍历数组或对象，渲染多个DOM结构。
v-model：在表单元素上创建双向数据绑定，实现页面上显示的内容于组件中的数据之间的自动的同步更新。

如果还想深入了解可以看官方文档------传送门：API 参考 | Vue.js (vuejs.org)

实战了解

实现一个todos，功能如下：

添加待做事项。
删除待做事项。
标记已做事项。
全部标记和全部取消标记。

第一步：安装todomvc-app-css。todomvc-app-css是一个css库，它提供了一些待办事项应用默认的样式和动画。
```
npm install todomvc-app-css
```
搭建界面结构。
- 通过v-model指令添加待做事项的对输入框内的内容和JavaScript中的数据进行双向绑定，并且在添加待做事项的输入框上绑定一个键盘回车的事件用于触发添加待做事项的处理函数，实现动态添加待做事项功能。
- 在JavaScript中待做事项中有一个属性值为布尔类型的completed属性用于记录待做事项的状态，因此给全选复选框绑定一个点击事件用于触发改变所有待做事项completed属性值的处理函数，实现对全部待做事项的标记和不标记的功能。
- 在li标签中运用v-for指令遍历待做事项数组，并且添加相同的DOM结构，实现对所有待做事项的渲染；通过使用v-bind为其绑定一个class属性，值为todo ${todo.completed ? 'completed' : ''}，用于通过待做事项的completed属性值为需要标记的待做事项添加标记动画。
- 为标记待做事项的复选框绑定一个点击事件用于用于触发改变指定待做事项completed属性值的处理函数，实现手动标记单个待做事项。
- 为删除按钮绑定一个点击事件，用于触发删除待做事项的处理函数实现删除待做事项。
html 复制代码
```
<section class="todoapp">
    <header class="header">
        <h1>todos</h1>
        <input type="text" class="new-todo" placeholder="想做的事" v-model="newTodo.title" @keyup.enter="addTodo">
    </header>
    <section class="main">
        <input type="checkbox" class="toggle-all" id="toggle-all" @click="toggleAll">
        <label for="toggle-all">Mark all as complete</label>

        <ul class="todo-list">
            //todo表示待做事项，index表示待做事项数组的下标
            <li v-for="(todo,index) in state.todos" :class="`todo ${todo.completed ? 'completed' : ''}`">
                <div class="view">
                    <input type="checkbox" class="toggle" v-model="todo.completed" @click="toggle(index)">
                    <label>{{todo.title}}</label>
                    <button class="destroy" @click="subTodo(index)"></button>
                </div>
            </li>
        </ul>
    </section>
</section>
```
搭建逻辑结构。
- 从Vue库中导入 reactive 和 ref 函数，reactive 用于创建响应式的数据对象，ref 用于创建简单的响应式变量。响应式就是在数据发生变化时，与之相关的界面就会自动更新以反映数据的最新状态。
- 创建一个响应式的待做事项数组存储所有待做事项。
- 并且创建一个新增待做事项对象，其中的用于存储待做事项文本的属性title就是与添加待做事项的输入框内容进行双向绑定的数据，然后通过添加待做事项的处理函数将该新增的待做事项添加进待做事项数组。
- 创建一个变量用于记录下次点击全选复选框后所有待做事项的状态，然后结合全选复选框绑定的处理函数实现改变每个待做事项的状态。
- 创建删除待做事项的处理函数，通过待做事项数组的下标参数可以在待做事项数组中将指定的待做事项删除。

javascript 复制代码

import { reactive, ref } from 'vue'
const state = reactive({
    todos: [
        {
            id: 1,
            title: '学习',
            completed: false
        },
        {
            id: 2,
            title: '吃饭',
            completed: true
        }
    ]
})
const newTodo = reactive(
    {
        id: 1,
        title: '',
        completed: false
})
const addTodo = () => { 
    newTodo.id = state.todos.length + 1
    state.todos.push(newTodo)
}
let is_erase = true
const toggleAll = () => { 
    state.todos.forEach((todo) => {
        todo.completed = is_erase
    })
    is_erase = !is_erase
}
const toggle = (index) => { 
    state.todos[index].completed = !state.todos[index].completed
}
const subTodo = (index) => { 
    state.todos.splice(index,1)
}

Vue Router

安装Vue Router

通过以下指令安装Vue Router。

css 复制代码

npm install vue-router@4

在安装了Vue Router后会增加router-link和router-view两个组件。

router-link组件用于创建导航链接，它默认会被渲染为一个<a>标签，它的to属性用于指定链接的目标路由，当用户点击该链接时，Vue Router 会根据路由配置进行页面跳转。
router-view组件用于渲染匹配当前路由的组件内容。它是一个占位符，根据当前的路由匹配情况，动态地渲染对应的组件。

通过使用router-link和router-view组件，可以实现页面之间的导航和组件的动态渲染，从而构建出单页应用的页面结构。

初始路由配置

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
const routers = []
const router = createRouter({
    history: createWebHistory(),
    routes: routers
});
export default router;

首先从vue-router中导入createRouter 和 createWebHistory 两个函数，createRouter 用于创建路由实例，createWebHistory 用于创建基于 HTML5 历史模式的路由导航方式。

创建一个routers空数组用于存储后续定义的路由配置对象。

然后使用 createRouter 函数创建了一个名为 router 的路由实例。history: createWebHistory() 指定了路由的历史模式为基于 HTML5 的历史模式；routes: routers 将之前定义的空 routers 数组赋值给 routes 属性。

路由跳转

路由跳转常见的两种方式：

通过设置router-link组件的to 属性值指定目标路由。
使用useRouter 钩子函数获取路由实例router，并调用 router.push('/xxx') 方法实现编程式路由跳转至 /xxx 路径。
javascript 复制代码
```
import { useRouter } from 'vue-router';
const router = useRouter()
router.push('/xxx')
```

实战了解

简单实现掘金的导航栏切换页面

安装Vue Router后开始操作。

在APP.vue文件中添加首页、Bot和沸点的导航栏实现页面跳转，以及用<router-view>根据当前的路由匹配情况，动态地渲染对应的组件内容。

vue 复制代码

<template>
<div>
    <nav>
        <router-link to="/home">首页</router-link>|
        <router-link to="/bot">Bot</router-link>|
        <router-link to="/hot">沸点</router-link>
    </nav>
    <router-view></router-view>
    </div>
</template>

创建Home.vue定义首页组件，然后在里面添加二级导航栏实现页面的跳转，并且通过<router-view>预留了渲染位置。

vue 复制代码

<template>
<div>
    <h2>首页</h2>
    <div class="nav">
        <router-link to="/home/newest">最新</router-link>|
        <router-link to="/home/suggest">推荐</router-link>
    </div>
    <router-view></router-view>
    </div>
</template>

创建Bot.vue定义Bot组件，并且在里面添加一个按钮用于跳转到沸点页面。
vue 复制代码
```
<template>
    <div>
        <h2>Bot页面</h2>
        <button @click="toHot">去沸点页面</button>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toHot = () => { 
    router.push({ path: '/hot', query: { id: 1 } })
}
</script>
```
从vue-router中导入useRouter 钩子函数，然后用useRouter 获取了路由实例实例并且赋值给 router 变量，再定义一个跳转函数，其中通过使用 router.push()方法进行路由跳转。

创建Hot.vue定义沸点组件。

vue 复制代码

<template>
<div>
    <h2>沸点页面</h2>
    </div>
</template>

创建Newest.vue定义首页的最新组件。

vue 复制代码

<template>
<div>
    最新文章列表
    </div>
</template>

创建Suggest.vue定义首页的推荐组件。

vue 复制代码

<template>
<div>
    推荐文章列表
    </div>
</template>

创建一个路由文件，进行路由的配置。

JavaScript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import Bot from '../pages/Bot.vue';
// 定义路由数组，一级路由
const routers = [
    // 根路径重定向到 /home
    {
        path: '/',
        redirect: '/home'
    },
    // /home 路由
    {
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            // 访问 /home 时重定向到 /home/newest
            {
                path: '/home',
                redirect: '/home/newest'
            },
            // /home/newest 子路由，对应的组件通过动态导入
            {
                path: '/home/newest',
                component: () => import('../pages/home/Newest.vue')
            },
            // /home/suggest 子路由，对应的组件通过动态导入
            {
                path: '/home/suggest',
                component: () => import('../pages/home/Suggest.vue')
            }
        ]
    },
    // /bot 路由，对应的组件
    {
        path: '/bot',
        component: Bot
    },
    // /hot 路由，对应的组件通过动态导入
    {
        path: '/hot',
        component: () => import('../pages/Hot.vue')
    }
]
// 创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes: routers
});
// 导出路由实例，供其他模块使用
export default router;

知识点：

component中有两种导入组件的方式。用沸点路由的配置进行了解，一种是动态导入沸点组件component:() => import('../pages/Hot.vue')，另外一种是先用import Hot from '../pages/Hot.vue'导入沸点组件，然后component: Hot。第一种方法更好用。
重定向路径：
JavaScript 复制代码
```
{
    path: '/',
    redirect: '/home'
}
```
当用户访问网站的根路径 / 时，如果没有明确的首页内容，重定向到 /home 这样明确表示首页的路径，能让用户更清晰地知道他们正在访问的主要内容区域。

下一级路由：通过children设置下一级路由。

javascript 复制代码

{
    path: '/xxx',
    component: () => import('组件位置'),
    children: []
}

结尾

在快速了解API的常用指令和Vue Router中的路由配置和路由跳转后的就可以开始搭建单页应用了。

Vue 快速入门：几分钟学会搭建单页应用

Vue

简单了解

单页应用（SPA）

Vue Router （路由系统）

组件化

Vue项目创建

常用Vue指令

简单介绍

实战了解

Vue Router

安装Vue Router

初始路由配置

路由跳转

实战了解

结尾