当前位置： 首页 > news >正文

前端笔记 --- vue框架

news 来源：原创 2025/5/10 15:30:05

目录

基础知识

指令的修饰符

计算属性

watch侦听器的写法

Vue的生命周期

工程化开发&脚手架 VUE CLI

组件注册的方式

scoped样式冲突与原理

data

组件之间的关系和组件通信

v-model详解

sync修饰符

Dom介绍

操作HTML标签

总结

ref 和 $refs

$nextTick

自定义指令

安装axios

安装less

前端基于json设计临时用的“接口”

插槽

1.默认插槽

2.后备内容（默认值）

3.具名插槽

4.作用域插槽（是插槽的一个 传参语法）

单页应用程序（SPA）& 路由介绍

路由的基本使用

VueRouter的使用（5 + 2）

组件分类

路由模块封装

声明式导航

定义

两个类名

自定义类名

跳转传参

路由重定向

Vue路由-404

模式设置

编程式导航

两种跳转方式

跳转传参

跳转方式一（通过路径跳转）：

跳转方式二（通过name命名路由跳转）：

嵌套二级路由（子路由）

返回上一页

组件缓存

基于VueCli自定义创建项目

ESLint代码规范

vuex

定义与作用

构建vuex[多组件数据共享]环境

创建一个空仓库

提供&访问vuex的数据（核心概念 --- state状态）

核心概念：mutations

辅助函数 mapMutations

核心概念：actions

辅助函数：mapActions

核心概念：getters

分模块

vant组件库

Element组件库

项目中的vw适配问题（开发移动端必须要考虑的）

商城项目学习

图形验证码功能实现

api接口模块

Toast轻提示

响应拦截器统一处理错误提示

登录权证信息存储

vuex持久化处理---storage存储模块

loading效果

基于全局前置守卫，进行页面访问拦截处理

搜索---历史记录管理 功能实现

v-model实现组件数据父传子（常用）

mixins混入

打包优化

利用ElmentUI组件实现的节流处理

Vue3

基础知识

创建一个Vue实例，

插值表达式，

响应式，

各种指令。。。

发请求都是异步的原因：发起请求为异步的主要原因是为了避免阻塞页面的渲染和交互。如果前端发起请求是同步的，那么在请求返回之前，浏览器会一直等待，页面就会被阻塞，用户无法进行其他操作，这会给用户带来不好的体验。

route获取数据，router跳转。

v-html：

自定义属性且可以动态设置。

双向绑定指令v-model ：可以让数据 与 视图 进行双向绑定

filter实现删除操作：

methods: {
  del(id){
    this.booksList = this.booksList.filter(i => i.id !== id)
    console.log(id)
  }
}

unshift实现对数组元素的增加：

add(){
  if(!this.subject){
    alert('请输入科目')
    return
  }
  if(typeof this.score !== "number"){
    alert('请输入正确的数据')
    return
  }
  this.list.unshift({
    id: +new Date(),
    subject: this.subject,
    score: this.score
  })
  this.subject = ''
  this.score = ''
}

reduce实现对数据求和的计算

computed: {
  totalScore(){
    return this.list.reduce((sum,item) => sum + item.score,0)
  }
},

class：与css样式有关

指令的修饰符

计算属性

watch侦听器的写法

1.简单写法 ----> 监视简单类型的变化

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

Vue的生命周期

问题：

解决：

生命周期函数（钩子函数）：

VUE生命周期过程中，会自动运行一些函数，被称为 [生命周期钩子] 。让开发者可以在【特定阶段】运行自己的代码。

工程化开发&脚手架 VUE CLI

看package.json文件：

创建项目的方法：

方法一：vue create 项目名 （目前我的电脑只有 命令提示符和Git Bath能获取到全局vue，终端和WebStorm终端获取不到）

方法二：npm create vue@latest

项目目录介绍

根组件：App.vue

没有安装less依赖。

组件注册的方式

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

全局注册：所有组件内都可以使用

注意：

组件名规范 --> 大驼峰命名法：如HmHeader

技巧：
一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

scoped样式冲突与原理

data

组件之间的关系和组件通信

Props：

props 定义：组件上注册的一些自定义属性。

props校验

非父子关系的通信

event bus 事件总线（拓展）（只是简单场景用这个）

步骤：

例子：

发布方 接收方

非父子通信-provide-inject（拓展）

v-model详解

原理：

对v-model进行拆解

表单类组件封装

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

sync修饰符

Dom介绍

DOM树是一个层次结构，其中每个HTML标签都可以视为一个节点。这些节点包括但不限于：

  • 文档节点：代表整个HTML文档，通常以document对象表示。
  • 元素节点：代表HTML中的标签，例如<div>, <p>, <input>等。
  • 文本节点：代表元素内的文本，例如<p>Hello, world!</p>中的"Hello, world!"。
  • 属性节点：代表元素的属性，例如<img src="image.jpg">中的src属性。

HTML标签与DOM节点

操作HTML标签

通过DOM API，我们可以访问并操作这些元素节点：

  • 获取节点：
    • document.getElementById('id')：根据ID获取一个特定的元素节点。
    • document.querySelector('selector')：使用CSS选择器获取第一个匹配的元素节点。
    • document.querySelectorAll('selector')：使用CSS选择器获取所有匹配的元素节点。
  • 创建节点：
    • document.createElement('tagName')：创建一个新的元素节点。
    • document.createTextNode('text')：创建一个新的文本节点。
  • 插入节点：
    • parentElement.appendChild(childNode)：向父节点添加一个新的子节点。
    • parentElement.insertBefore(newNode, referenceNode)：在参考节点之前插入一个新节点。
  • 修改节点：
    • element.setAttribute('attr', 'value')：设置元素的属性值。
    • element.innerHTML = 'content'：更改元素内部的内容。
  • 删除节点：
    • parentElement.removeChild(childNode)：从父节点中移除一个子节点。
总结

DOM提供了操作HTML文档的API，而HTML标签则是DOM树中的元素节点。通过这些API，我们可以获取、创建、修改和删除这些节点，从而动态地改变网页的内容和布局。

ref 和 $refs

作用：利用 ref 和 $refs 可以用于获取dom元素，或 组件实例
特点：查找范围 ---> 当前组件内（更精确稳定）

作用一：（获取dom，即获取HTML的各种标签）

作用二：

$nextTick

vue的底层是异步dom更新的。

自定义指令

全局注册

指令的值

需求：实现一个 color 指令 - 传入不同的颜色，给标签设置文字颜色。

总结：

自定义 v-loading 指令

安装axios

npm install axios 或者 yarn add axios

然后再：import axios from 'axios'

axios请求都是异步的。

安装less

npm install --save-dev less less-loader

  1. less: 这是一个 CSS 预处理器，允许你使用变量、嵌套规则、混合、函数等特性来编写更简洁、可维护的 CSS 代码。
  2. less-loader: 这是一个 Webpack 加载器，用于将 .less 文件转换为浏览器可以理解的 CSS。

  • npm install: 这是 npm (Node Package Manager) 的 install 命令，用于安装 Node.js 包。
  • --save-dev: 这个选项告诉 npm 将安装的包添加到 package.json 文件的 devDependencies 部分。这意味着这些包只在开发过程中需要，并不是生产环境必需的。
  • less: 这是要安装的第一个包的名称。
  • less-loader: 这是要安装的第二个包的名称。

前端基于json设计临时用的“接口”

插槽

1.默认插槽

2.后备内容（默认值）

3.具名插槽

默认插槽无法满足，需要使用具名插槽。

4.作用域插槽（是插槽的一个 传参语法）

单页应用程序（SPA）& 路由介绍

路由的基本使用

VueRouter的使用（5 + 2）

npm install vue-router@3.6.5

组件分类

路由模块封装

好处：
拆分模块，利于维护
快速引入组件：
基于 @ 指代 src 目录，从 src目录 出发找组件

声明式导航

定义

两个类名

自定义类名

跳转传参

目标：在跳转路由时，进行传值。

方法一：

方法二：

两种方法比较：

方法二补充：

路由重定向

Vue路由-404

模式设置

编程式导航

两种跳转方式

方法一：

上面的写法分为简写和完整写法。

方法二：

跳转传参

同样是查询参数传参和动态路由传参。

跳转方式一（通过路径跳转）既可以使用查询参数传参也可以使用动态路由传参。

跳转方式二（通过路由名字跳转）也是一样的，既可以使用查询参数传参也可以使用动态路由传参。

跳转方式一（通过路径跳转）：

1.查询参数传参：

简写方式：

比如：

或者（完整写法）

组件内参数的接收方式：

比如：

2.动态路由传参：

第一步：先去配置动态路由

然后：

简写方式:

this.$router.push(`/路径/参数值`)

或者（完整写法）：

比如：


 

组件内参数的接收方式：

比如：

跳转方式二（通过name命名路由跳转）：

1.查询参数传参

参数接收方式：

2.动态路由传参

第一步：先去配置动态路由

const router = new VueRouter({
  router: [
    ...,
    {
      name: 'search',
      path: 'search/:words?',
      component: Search
    }
  ]
})

然后

比如：

参数接收方式；

嵌套二级路由（子路由）

通过 children 配置项，可以配置嵌套子路由。

步骤：
第一步：在children配置项中，配规则

比如


第二步：准备二级路由出口

比如

返回上一页

组件缓存

组件缓存keep-alive

举例：

进入缓存的组件时会自动访问生命周期钩子函数：activated()

离开缓存的组件时会自动访问生命周期钩子函数：deactivated()

总结：

项目案例实现的步骤：

基于VueCli自定义创建项目

Linter：ESLint代码规范

Vuex也可以勾上。

ESLint代码规范

https://standardjs.com/rules-zhcn.html

JavaScript Standard Style (standardjs.com)

解决方法：

手动修正。。。

自动修正：装插件，。。。。。

vuex

定义与作用

构建vuex[多组件数据共享]环境
创建一个空仓库

npm install vuex@3

或者npm install vuex@3 -force

提供&访问vuex的数据（核心概念 --- state状态）

严格模式：

核心概念：mutations

传参语法：

注意点：

辅助函数 mapMutations

核心概念：actions

辅助函数：mapActions

核心概念：getters

分模块

模块创建

访问模块中的state

访问模块中的getters

模块中的mutation的调用语法

模块中的action的调用语法

vant组件库

第一步：

导入方式：

1.全部导入

2.按需导入（自动按需导入）

（npm i babel-plugin-import -D)

Element组件库

安装和使用请看官网！！！！！

项目中的vw适配问题（开发移动端必须要考虑的）

使用npm安转插件：

npm i postcss-px-to-viewport@1.1.1 -D

商城项目学习

图形验证码功能实现

api接口模块

Toast轻提示

响应拦截器统一处理错误提示

登录权证信息存储

vuex持久化处理---storage存储模块

loading效果

基于全局前置守卫，进行页面访问拦截处理

搜索---历史记录管理 功能实现

v-model实现组件数据父传子（常用）

mixins混入

可提供在所有的Vue组件中可复用的一些数据或者方法或者生命周期函数。

导入方法：

打包优化

指令：

npm run build

首屏加载慢：单页应用程序的缺点。

解决方法：（路由懒加载）

异步组件改造举例：

------->

利用ElmentUI组件实现的节流处理

步骤

  1. 安装 Lodash：用于节流处理。
npm install lodash --save
  1. 创建 Loading 实例：在请求拦截器中创建 Loading 实例，并在请求开始时显示，请求结束时隐藏。
  2. 节流处理：使用 Lodash 的 throttle 函数来控制 Loading 的显示和隐藏。

具体操作看wgxm项目。

Vue3

未完待续。。。

相关文章：

  • RabbitMQ 从入门到精通
  • ffmpeg打开麦克风，录制音频并重采样
  • Diffusion-Probabilistic-Models环境配置
  • 【leetcode hot 100 148】排序序列
  • FreeRTOS之队列集
  • Vulnhub-sundown
  • 关于MCP SSE 服务器的工作原理
  • 波特率、比特率、传信率、传码率......
  • 17 | 实现简洁架构的 Biz 层
  • 前端轮播图carousel案例（带详细注释）
  • 深入探索 Java Stream
  • 赶紧白P这款免费神器!
  • AGI大模型（3）：大模型生成内容
  • 【ES6】在ES6中自定义数组
  • STM32 HAL库实战：高效整合DMA与ADC开发指南
  • 向智能辅助驾驶的道路车道线检测算法研究
  • Franka机器人ROS 2 发布：赋能机器人研究和行业应用
  • 职坐标IT技能提升全攻略
  • 得物，蓝禾，快手，优博讯，三七互娱，途游游戏，顺丰，oppo，游卡，汤臣倍健，康冠科技，作业帮25春招内推
  • 驾培市场与低空经济无人机融合技术详解
  • 中国社科院：网文市场超430亿元，作者破3000万人
  • 警方通报男子地铁上拍视频致乘客恐慌受伤：列车运行一度延误，已行拘
  • 领证不用户口本，还需哪些材料？补领证件如何操作？七问七答
  • 上海市委常委会会议暨市生态文明建设领导小组会议研究基层减负、生态环保等事项
  • 方正证券总裁何亚刚到龄退休，54岁副总裁姜志军接棒
  • 纽约大学朗格尼医学中心的转型带来哪些启示？