前端笔记 --- vue框架

基础知识

指令的修饰符

计算属性

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组件实现的节流处理

基础知识

创建一个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, // 是否立刻执行一次handlerhandler (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

less: 这是一个 CSS 预处理器，允许你使用变量、嵌套规则、混合、函数等特性来编写更简洁、可维护的 CSS 代码。
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组件实现的节流处理

步骤

安装 Lodash：用于节流处理。

npm install lodash --save

创建 Loading 实例：在请求拦截器中创建 Loading 实例，并在请求开始时显示，请求结束时隐藏。
节流处理：使用 Lodash 的 throttle 函数来控制 Loading 的显示和隐藏。

具体操作看wgxm项目。

Vue3

未完待续。。。