01-Vue

Aboboguai

1132人浏览 · 2025-11-20 09:17:40

Aboboguai · 2025-11-20 09:17:40 发布

1. 快速上门

1.1. 概念

Vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据渲染出用户看到的页面

渐进：循序渐进

框架：一套完整的项目解决方案

优点：大大提升开发效率（70%以上）

缺点：需要理解记忆规则 -> 官网

1.2 创建实例

在这里插入图片描述

开发版本：开发环境版本，包含了有帮助的命令行警告

生产版本：生产环境版本，优化了尺寸和速度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ msg }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello 努力学习上进的你!'
        }
    })
</script>

</body>
</html>

1.3 插值表达式

在这里插入图片描述

1.4 响应式特性

核心特性

数据的响应式处理 --> 响应式：数据变化，视图自动更新

访问数据：实例.属性名（app.msg）

修改数据：实例.属性名 = ‘值’

在这里插入图片描述

1.5 开发者工具

在这里插入图片描述

2. Vue指令

Vue会根据不同的指令，针对标签实现不同的功能

指令：带有v-前缀的标签属性

2.1 v-html

在这里插入图片描述

2.2 v-show & v-if

在这里插入图片描述

2.3 v-else & v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if=‘表达式’

注意：需要紧挨着v-if进行使用

2.4 v-on

内联语句

在这里插入图片描述

methods中的函数名

menthod中的函数，this指向当前实例

在这里插入图片描述

传参

在这里插入图片描述

2.5 v-bind

在这里插入图片描述

2.5.1 拓展增强 - 操作class

在这里插入图片描述

2.5.2 拓展增强 - 操作style

在这里插入图片描述

2.6 v-for

在这里插入图片描述

v-for中的key

在这里插入图片描述

2.6 v-model

在这里插入图片描述

2.6.1 v-model原理

在这里插入图片描述

2.6.2 拓展增强 - 其他表单元素

在这里插入图片描述

2.7 指令修饰符

在这里插入图片描述

3. 计算属性 computed

在这里插入图片描述

<body>
<div id="app">
    <p>{{ msg }}</p>
    <div v-html="dataBaiDu"></div>
    {{total}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello 努力学习上进的你!',
            dataBaiDu:'<a href="http://baidu.com">百度</a>',
            list:[
                {id:1,price:10},
                {id:2,price:16},
                {id:3,price:15},
                {id:4,price:12},
                {id:5,price:13}
            ]
        },
        computed:{
            total(){
                return this.list.reduce((sum,item)=>{return sum += item.price},0)
            }
        }
    })

</script>

</body>

3.1 computed & method

在这里插入图片描述

3.2 计算属性的完整写法

在这里插入图片描述

<body>
<div id="app">
    <p>{{ msg }}</p>
    <div v-html="dataBaiDu"></div>
    {{total}}
    <button @click="add">修改计算属性</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello 努力学习上进的你!',
            dataBaiDu:'<a href="http://baidu.com">百度</a>',
            list:[
                {id:1,price:10},
                {id:2,price:16},
                {id:3,price:15},
                {id:4,price:12},
                {id:5,price:13}
            ]
        },
        methods:{
            add(){
                this.total = 123
            }
        },
        computed:{
            // total(){
            //     return this.list.reduce((sum,item)=>{return sum += item.price},0)
            // }
            total:{
                get(){
                    return this.list.reduce((sum,item)=>{return sum += item.price},0)
                },
                set(value){
                    console.log(value)
                    this.list[0].price = 100
                }
            }
        }
    })

</script>

</body>

4 watch监听器

在这里插入图片描述

完整写法

5. 生命周期

在这里插入图片描述

5.1 生命周期钩子函数

在这里插入图片描述

6. 工程化开发 & 脚手架Vue CLI

在这里插入图片描述

6.1 脚手架Vue CLI

在这里插入图片描述

6.2 目录文件

在这里插入图片描述

6.3 项目运行流程

在这里插入图片描述

6.4 组件化开发 & 根组件

在这里插入图片描述

.vue文件三个组成部分

6.5 普通组件的注册使用

6.5.1 局部注册

局部注册：只能在注册的组件内使用

创建.vue组件（三个组成部分）

在使用的组件内导入并注册

在这里插入图片描述

使用

当成html标签使用<组件名></组件名>

命名规范–>大驼峰命名

6.5.2 全局注册

全局注册

创建.vue文件（三个组成部分）

main.js中进行全局注册

在这里插入图片描述

使用

当成html标签使用<组件名></组件名>

命名规范–>大驼峰命名

7. 解决样式冲突scoped

在这里插入图片描述

8. data是一个函数

在这里插入图片描述

9. 组件通信

组件通信，就是指组件与组件之间的数据传递。

组件的数据是独立的，无法直接访问其他组件的数据

想要访问其他组件的数据---->组件通信

组件关系

在这里插入图片描述

9.1 组件通信解决方案

在这里插入图片描述

9.1.1 父子通信

在这里插入图片描述

prop

父传子：props将数据传递给子组件

在这里插入图片描述

props校验：

prop & data & 单向数据流

子传父：$emit通知父组件进行修改更新

在这里插入图片描述

9.1.2 非父子通信 – event bus 事件总线

一对多的关系可以使得多个组件接收到消息

在这里插入图片描述

9.1.3 非父子通信 – provide & inject

provide & inject作用：跨层级共享数据
推荐：数据类型为复杂类型响应式数据

在这里插入图片描述

9.1.4 表单类组件封装 & v-model简化代码

在这里插入图片描述

v-model简化

在这里插入图片描述

9.2 .sync修饰符

10 ref & $refs

10.1 获取dom

在这里插入图片描述

10.2 获取组件实例

在这里插入图片描述

11. Vue异步更新，$nextTick

Vue是异步dom更新，dom还没有被解析出来的时候获取dom是不行的，所以要等待dom更新，执行方法操作dom的时候要$nextTick

在这里插入图片描述

12 自定义指令

在这里插入图片描述

12.1 传值

在这里插入图片描述

13 插槽

插槽：让组件内部的数据可以自定义

在这里插入图片描述

后备内容（默认值）

在这里插入图片描述

具名插槽

在这里插入图片描述

作用域插槽

在这里插入图片描述

使用步骤

14 路由

14.1 单页面应用程序

单页面应用（SPA - Single Page Application）：所有的功能在一个html页面上实现

最大的原因是因为：页面按需更新

在这里插入图片描述

14.2 路由的介绍

生活中的路由

在这里插入图片描述

Vue中的路由：路径和组件的映射关系

14.3 VueRouter

作用：修改地址栏路径是，切换显示匹配的组件
说明：Vue官方的一个路由插件，是一个第三方包

14.3.1 VueRouter的使用（5+2）

5个统一步骤

在这里插入图片描述

2个核心步骤

在这里插入图片描述

14.3.2 组件分类

.vue文件分为页面组件和复用组件，更易维护

在这里插入图片描述

14.4 路由模块封装

位置：src/router/index.js

import Vue from 'vue'
import VueRouter  from "vue-router";
import MyMusic from '@/views/MyMusic.vue'
import MyFriend from '@/views/MyFriend.vue'
Vue.use(VueRouter)
const router = new VueRouter({
    routes:[
        {path:'/friend',component:MyFriend},
        {path:'/music',component:MyMusic},
    ]
})
export default router

引入：src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

14.5 router-link 高亮(声明式导航)

在这里插入图片描述

直接设置类名样式即：
.router-link-exact-active{
 background-color: aqua;
}

在这里插入图片描述

14.5.1 定制类名

在这里插入图片描述

14.5.2 跳转传参

查询参数传参

动态路由传参

查询参数传参

在模板中使用的时候不加this，但是在js中比如生命周期created中使用要＋this

动态路由传参

区别对照

注意！！！：动态路由传参如search/:words表示必须要传参数。如果不传参数，也希望匹配，可以加个可选符“？”即：‘search/:words?’

14.6 重定向

问题：网页打不开，url默认是/路径，未匹配到组件时会出现空白
说明：重定向 --> 匹配到path后，强制跳转到path路径

在这里插入图片描述

14.7 404

在这里插入图片描述

14.8 路由模式

在这里插入图片描述

14.9 编程式导航

跳转语法

path路径跳转

name命名跳转

14.9.1 path路径跳转

简单

在这里插入图片描述

路由传参：

两种传参方式：查询参数 + 动态路由传参

两种跳转方式：对于两种方式都支持

1. path路径跳转传参（query传参）：

2. path路径跳转传参（动态路由传参）：

14.9.2 name命名跳转

比较适合path路径长的场景

在这里插入图片描述

路由传参：

两种传参方式：查询参数 + 动态路由传参

两种跳转方式：对于两种方式都支持

1. name路径跳转传参（query传参）：

2. name路径跳转传参（动态路由传参）：

参数名和参数值要和路由对应

14.10 组件缓存 keep-alive

在这里插入图片描述

灵活配置组件是否需要缓存，根据组件名数组

在这里插入图片描述

14.11 全局前置守卫

在这里插入图片描述

15 实战 - 面经exp

15.1 创建项目

在这里插入图片描述

脚手架自定义创建，下面是自定义选择和注释

在这里插入图片描述

15.1.1 代码规范

JavaScript Standard style规则

在这里插入图片描述

ESlint规范

在这里插入图片描述

解决办法

15.2 调整初始化目录

在这里插入图片描述

15.3 路由配置

15.4 主题色配置

vant官网找到定制主题

在这里插入图片描述

15.5 打包

在这里插入图片描述

在打包的时候想要根据当前位置进行获取静态资源的时候在文件vue.config.js进行如下配置publicPath: './',

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 将资源访问路径从/ 配置为./
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            blue: '#FA6D1D'
          }
        }
      }
    }
  }
})

15.5.1 打包优化 - 路由懒加载

在这里插入图片描述

16 vant组件库

vant网址

按需导入

在这里插入图片描述

16.1 项目中的vw适配

浏览器适配—> postcss-px-to-viewport

在这里插入图片描述

17 VueX

在这里插入图片描述

17.1 基于脚手架构建vuex多组件数据共享

创建一个空仓库如下：

在这里插入图片描述

// 存放veux核心代码
import Vue from 'vue'
import Vuex from 'vuex'

// 插件安装
Vue.use(Vuex)

// 创建store
const store = new Vuex.Store()

// 导出给main.js使用
export default store

17.1.1 state状态

提供数据 + 使用仓库的数据

核心概念：state状态

存放数据

1. 通过store直接访问

获取数据

通过store直接访问

通过辅助函数进行访问

17.1.2 mutations

在这里插入图片描述

概念和使用

在这里插入图片描述

mutations 传参语法，不支持传多个参数，如果仍需要传递可以传递对象或者数据即可

在这里插入图片描述

17.1.3 辅助函数 - mapMutations

在这里插入图片描述

17.1.4 actions

在这里插入图片描述

17.1.5 辅助函数 - mapActions

在这里插入图片描述

17.1.6 getters

在这里插入图片描述

17.2 模块 - moudle

在这里插入图片描述

moudle模块创建

在这里插入图片描述

访问模块的state

在这里插入图片描述

访问模块中的getters

在这里插入图片描述

模块mutation调用方法

在这里插入图片描述

18 项目经验

18.1 认识sass基础语法

在这里插入图片描述

18.2 想要深度渗透样式

在这里插入图片描述

20 权限控制

在这里插入图片描述

20.1 菜单权限控制

在这里插入图片描述

20.2 按钮权限控制

在这里插入图片描述

全局指令方案

21 vue3

在这里插入图片描述

21.1 创建vue3项目

npm create vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

前提条件
熟悉命令行
已安装 ^20.19.0 || >=22.12.0 版本的 Node.js

21.2 熟悉项目和关键文件

create-vue

在这里插入图片描述

关键文件

在这里插入图片描述

21.3 组合式API

vue3 同样支持vue2的API风格 ---- 选项式API

组合式API可以简单理解为同一个逻辑相关的所有代码都放在一起维护

setup 语法糖：把原本比较复杂的语法经过编译环境编程比较简单的语法开发体验会更改但实际在浏览器中运行的还是原本的语法

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

const count = ref(0);
const buttonHandle = () => {
  count.value++;
}
</script>

<template>
  <button @click="buttonHandle">{{ count }}</button>
</template>

<style scoped></style>

setup 组合式API的入口

执行时机：初始化自动执行 beforeCreate之前

this中的问题：setup中的this是不可用的不指向当前的组件实例

setup中变量在模板中使用问题：必须以对象的方式return出去

reactive和ref

reactive

作用：函数可以执行用来生成响应式数据

语法：reactive(初始数据) --> 返回一个响应式对象

初始值要求：必须是复杂类型（引用类型数组对象）

ref

函数用来生成响应式数据

语法：ref(初始值既支持简单类型也支持复杂类型) 响应式对象在对象内部有一个.value属性

需要通过.value属性获取或者修改响应式数据（在模板中不要添加）

对比

都是用来生成响应式数据

reactive不能处理简单类型的数据

ref参数类型支持更好，但是必须通过.value做访问修改

ref函数内部的实现于reactive

实际工作中推荐ref函数，减少记忆负担

计算属性 computed

表现是一样的知识API写法改变了

计算属性：基于一个已经存在的响应式数据基于一定的计算公式得到一个新的数据，并且可以依赖的数据发生变化时重新计算（派生状态）

特点：缓存的特性第一次执行计算属性得到的结果结果缓存后面在使用直接使用缓存

watch 监听器：表示和vue2是一致的只是语法发生了变化

作用：监听响应式数据的变化执行一个回调函数（支持副作用 ajax请求 dom操作。。。）

额外的参数： immediate立刻执行 deep 深度监听 只要针对于嵌套层次比较深的对象

watch基础使用

参数1：监听哪个数据就把它放过来 ref 对象 不能加 .value

参数2：监听数据发生变化时执行的回调

watch(参数1,(newValue,oldvalue)=>{逻辑。。。})

额外参数：
watch(参数1,(newValue,oldvalue)=>{逻辑。。。},{immediate:true})

精确监听：监听对象某一个特定属性

21.4 生命周期

从组件创建到销毁的各个阶段时机到了自动执行的函数

在这里插入图片描述

21.5 父子传递

父 —> 子

简单使用：
1. 在子组件身上绑定要传递的值
2. 在子组件内部接收传过来的数据 defineProps宏函数进行接收:<Son :father-msg ="msg" />
3. 接收数据，如果想在脚本区域使用传递过来的数据要进行props对象进行接收里面包含父传子传入的所有数据：const props = defineProps({父数据:{type:string}}) props.父数据

子 —> 父

在子组件调用父组件的方法

21.6 模板引用 – 获取dom对象

在这里插入图片描述

vue3里面组件自己的属性和方法默认情况下不容许父组件通过实例对象访问是封闭的。

如果想要访问子组件的属性则在子组件通过defineExpose({})显示暴露

子组件

父组件

21.7 provide & inject

场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

基础用法

反向修改数据

21.8 创建vue3 + ts环境

在这里插入图片描述

22 vue3 + ts

22.1 ref标注类型

为ref标注类型之后，既可以在给ref对象的value赋值时校验数据类型，同时在使用value的时候可以获得代码提示

说明：本质上时给ref对象的value属性添加约束类型

在这里插入图片描述

进行类型标注

在这里插入图片描述

22.2 reactive标注类型

为reactive标注类型之后，既可以在响应式对象在修改属性值的时候约束类型，也可以在使用时获得代码提示

在这里插入图片描述

如何类型标准

在这里插入图片描述

22.3 computed进行类型标注

在这里插入图片描述

22.4 为事件处理函数标注类型

在这里插入图片描述

事件处理标注类型

在这里插入图片描述

22.5 为模板引用标注类型

好处：给模板引用标注类型，本质上是给ref对象的value属性添加了类型约束，约定value属性中存放的是特定类型的DOM对象，从而在使用的时候获得相应的代码提示。

在这里插入图片描述

如何进行使用：通过具体的DOM类型联合null作为泛型参数，比如我们想要获取一个input dom元素

在这里插入图片描述

可以采用非空值判断三种方式：

可选链？

条件判断非空

非空断言!

22.6 为props标注类型

优势

在这里插入图片描述

基础使用

在这里插入图片描述

提供默认值

在这里插入图片描述

22.7 给emits标注类型

在这里插入图片描述

基础使用

在这里插入图片描述

22.8 类型声明文件 - d.ts

在这里插入图片描述

使用DefinitelyTyped提供类型声明文件

在这里插入图片描述

TS内置类型声明文件

在这里插入图片描述

自定义类型声明文件：d.ts文件在项目中是可以进行自定义创建的，通常有两种作用，第一个是共享TS类型，第二种是给js文件提供类型

在这里插入图片描述

第二种

在这里插入图片描述

22.9 pinia

Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品

在这里插入图片描述

添加Pinia到Vue项目

在这里插入图片描述

Pinia的基础使用

在这里插入图片描述

getters实现

在这里插入图片描述

异步action

在这里插入图片描述

storeToRefs工具函数

在这里插入图片描述

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

从 Prompt 到 Platform：企业级 AI Agent 平台工程专栏导读

AI Agent技术社区

agent面试必备50-AI Agent 核心进阶：多智能体“状态管理与同步”

AI Agent技术社区

为什么AI Agent需要可观测性

随着AI Agent在复杂任务处理、多步决策和自主执行中扮演越来越重要的角色，其内部推理过程却如同一个"黑盒"。本文将探讨如何通过可观测性技术，让AI Agent的思考过程变得透明、可追溯、可调试。工具调用的复杂性：外部API调用、代码执行、数据查询的监控与审计。性能瓶颈的定位：识别推理延迟、工具调用失败、上下文窗口溢出的根源。上下文关联：将用户会话、Agent实例、工具调用串联起来。数据采集层：