攀枝花城市建设网站网站首页模板
目录
基础知识
指令的修饰符
计算属性
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, // 是否立刻执行一次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
未完待续。。。
