VUE2笔记
Vue2
- 什么是vue
用于构建用户界面的渐进式js框架
渐进式：vue可以自底向上逐层的应用（简单应用只需要一个轻量小巧的核心库，面对复杂应用可以引入各式各样的Vue插件）
-
Vue的特点
- 采用组件化的模式，提高代码的复用率、且更好维护（生成了一个全新的文件.vue，包括了每个部件的js，html，css，使得每个部分有更好的封装）
- 申明式编码，让编码人员无需直接操作DOM，提高开发效率（区别于一般的命令式编码）指令封装到了各个命令之中
- 使用虚拟DOM,遇到改变值的时候比较快捷
-
学习vue之前需要掌握的js知识
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
-
官方文档
-
学习->教程
学习->API（相当于字典，编码时不会时进行查看）
学习->风格指南 可以写出更加好的结构和代码
学习->示例
学习->cookbook（一些小技巧）
-
生态系统->工具
->核心插件 -
资源列表->Awesome Vue（Vue的大量周边库）
->浏览和Vue相关的包
-
一、Vue2
1、vue基础
（1）安装vue
<1>使用
引入一段js文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EebNnGxg-1650258889023)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220312204447630.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgwkaloQ-1650258889027)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220312204457374.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Euu1fsO-1650258889029)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220312204431373.png)]
安装开发工具：略
<2>全局配置
Vue.config 是一个对象包含Vue的全局配置
最好在设置完全局配置之后再进行Vue对象的创建
<3>Vue对象的创建
Vue是一个构造函数
使用new的方法创建函数对象
const x =new Vue({配置对象})
十分重要必须使用这个之后的一切都建立在这个之上
配置对象：
- el
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-En761kau-1650258889030)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313103115790.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ke0J2daC-1650258889031)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313103227642.png)]
注意：id~#
class~.
与css之中的选择器对应方法一样
-
data
使得数据可变
插入语法
存储数据，供指定的容器使用，值暂时可以写为一个对象，之后要写为函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6LCIQOBv-1650258889032)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313104205000.png)]
-
加入Vue之后，整体的容器代码依然是符合HTML规范的
-
root容器之中的代码被称为Vue模板
知识点补充：按住shift在刷新是强制刷新，有些时候需要使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66Htlue6-1650258889033)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313105547934.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpXPW2mZ-1650258889035)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313105606242.png)]
一个实例最多只能对应一个容器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-THTezL1g-1650258889036)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313110028655.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFsCoE2Y-1650258889037)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313110342654.png)]
第一个实例已经接管了容器
第二个执行了，但是没有用
总结：
-
容器与实例的关系只能是一对一
-
双花括号里可以写的东西：必须是js表达式
补充：js表达式与代码（语句）的区别
表达式：一个表达式会产生一个值，可以放在任何需要值的地方
eg：变量a，a+b，demo（1），x=y?‘a’:‘b’
js代码（语句）
控制流程的走向和走几次
eg：if（）{}，for（）{}
<4>Vue开发者工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfotbr5p-1650258889038)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313150948725.png)]
（2）模板语法
<1>插值语法
上面所用的在某个地方插入可变的对象的语法
<2>指令语法
使得网页的跳转地址是可变的
-
v-bind
作用：给标签之中的属性绑定对应的值
eg.href与url进行绑定，使得url被当做一个js表达式进行运算，从而使得标签指向的网页进行变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDQSpsGc-1650258889044)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313154051885.png)]
注：
- v-bind：可以简写为“：”
- 每个标签绑定一个对应的属性值
<3>二者的区别
- 插值语法：用于解析标签体内容
- 指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件……）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPXRWYlq-1650258889048)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220313155836442.png)]
如图所示可以实现分级调用
<4>数据绑定
- 单向数据绑定：v-bind
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F5XZr2VZ-1650258889049)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314163517727.png)]
改变data的值，前台会变
但是改变前台的值，data不会变
-
双向绑定：v-model
改变前台，data数据同时改变
改变data之中的值，前台的数据也会改变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-az3EUUwq-1650258889050)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314164954582.png)]
注意：
- 不是所有元素类型都支持v-model
v-model只能用于表单类元素，或者叫做输入类元素之中（有value值的元素之中）
- v-model:value="……"可以简写为v-model=“……”
- 如果绑定的checkbox v-model如果是一个bool值就可以决定选中的状态
（3）el与data的两种写法
<1>el
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gLeDpHjp-1650258889051)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314171427339.png)]
使用图中的函数可以代替el将实例与容器进行绑定
mount---------挂载
<2>data
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqEkxugF-1650258889053)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314172230589.png)]
注意：
- 在学习到组件之后一定要使用函数式
- 这个函数只能是普通函数不可以是箭头函数（扩展:由Vue管理道的函数一定不可以是箭头函数一旦使用了Vue函数，this就是不是Vue实例而是windows了）
（4）MVVM模型
Vue在一定的程度上参考了这个模型
M:模型 对应data之中所写的数据
V:视图 模板
VM:视图模型 Vue实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BhV8g91-1650258889054)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314202547774.png)]
注：
- data之中所有的属性都出现在了vm身上
- vm身上所有的属性都可以在Vue模板之中使用
（5）复习Object.defineProperty语法
Object.defineProperty（对象，属性，{属性值与各种函数}）
这个函数用于个指定对象添加指定函数
枚举：遍历
不可枚举：不可以参加枚举
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awxBXMg3-1650258889055)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314212115156.png)]
直接用如图方法给对象添加上一个新的属性，这个属性是不可枚举型且不可修改且不可以删除的
只有如下图所示才可以把这个新的属性变为可枚举型、可删除，可修改的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uSHPxXO-1650258889055)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314213133552.png)]
configurable--------------------可配置的
一个高级用法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BB98dfg4-1650258889056)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314214952520.png)]
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMClSCHb-1650258889057)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314215030199.png)]
每次读取就执行一次函数
可以略去函数名简写为：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKNGicQ1-1650258889058)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220314215251494.png)]
另一个重要函数：setter
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jtl5G2YI-1650258889058)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315201116093.png)]
（6）数据代理
通过一个对象代理另一个对象中属性的操作（读\写）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJaQa0AX-1650258889060)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315202605484.png)]
如此通过obj2也可以操作obj中的x
（7）Vue之中的数据代理
所以Vme之中的修改读取数据，就是按照（6）之中的方法对data之中的每一个属性都进行了代理，可以更加方便的操作data之中的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kftl15fJ-1650258889060)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315204504494.png)]
注意：
- data被传到_data ，可以使用 对象名._data.属性名 来调用属性
（8）事件处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hB5wIe2a-1650258889061)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315215105047.png)]
alert-------------------------------警告，提示、
v-on:click的简写为@click
（注：如果函数功能简单可以直接写在showinfo的位置）
效果如下图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYvidNs3-1650258889062)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315215200485.png)]
点击事件时进行传参的方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7e9Q48X7-1650258889063)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220315220437987.png)]
（9）事件修饰符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nzGAs6pZ-1650258889064)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220316213509090.png)]
prevent就是事件修饰符（比如上图就不会进行跳转）
Vue中的常见事件修饰符：
- prevent：阻止默认事件
- stop：阻止事件冒泡
- once：事件只触发一次
- capture：使用事件的捕获模式（在捕获阶段就执行函数）
- self：只有event.target是当前操作的元素时才出发事件（event.target指向点击事件所点的按钮），所以一定程度上可以阻止冒泡
- passive：事件的默认行为立即执行，无需等待事件的回调执行完毕（优化用，移动端常用）
注：
-
当接收到一个事件时分为事件捕获和事件冒泡两个阶段，先进行事件捕获，再进行事件冒泡
事件捕获有父级到子级，事件冒泡反之
-
事件冒泡，即当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NKdtbtDD-1650258889065)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220316214541997.png)]
如上图所示由于事件冒泡，点击事件会从button传到div所以函数会执行两次
- 事件的执行顺序，默认执行绑定的函数，得到回调之后才执行默认事件（有些时候绑定函数太难执行，会造成卡顿就是因为这个）
- 修饰符也是可以连用的 @click.prevent.stop(先阻止默认事件，再阻止冒泡，注意顺序)
（10）键盘事件
-
keydown：按下去就触发
-
keyup：按下去，放开之后才触发（常用）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ad9keYyk-1650258889065)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220316223003956.png)]
enter就是回车键的别名，即当按下回车键时就调用函数
-
常见别名：
-
回车------------enter
-
删除------------delete（包括退格和删除）
-
退出------------esc
-
空格------------space
-
换行------------tab（tab键不适合用keyup因为它自己就有转开焦点的作用，所以如果使用keyup在生效之前就已经切换走了）
-
上----------------up
-
下----------------down
-
左--------------left
-
右--------------right
-
-
想要用没有别名的按键
则可以使用event.key得到对应的按键的名称，然后将单词改为小写再进行按键的绑定
（ 注：有些按键的名称是由两个单词组成的驼峰型，绑定时要改为“单词1-单词2”）
- 系统修饰键（用法特殊）：ctrl、alt、shift、meta（也叫win键）
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发（可以使用keyup.ctrl.y 指定只有按住y再松开才可以，其他的都不行）
- 配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键（将要废除不推荐）- Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名（其实也不推荐）
（11）计算属性与监视
插值语法也可以插入methods里的函数
补充：
- {{函数名}}---------------------------把函数的内容直接插入
- {{函数名()}}--------------------------插入函数的返回值
属性：data里的数据
计算属性：通过属性计算出一个全新的属性，写在computed里，配置方式类似data
即所需的属性不存在，需要对已有的属性进行计算得出
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h7KRZrq4-1650258889066)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220317205739718.png)]
缓存：
执行过一次之后，会有一个缓存，之后的相同调用都是直接提取缓存而不是重新调用函数4
get的执行时机：
- 初次读取Fullname时
- 所依赖的数据发生了改变的时候
注意
-
调用时直接像调用data之中的属性一样调用即可“{{Fullname}}”不是“{{Fullname.get()}}”
-
有get就有与之对应的set(非必要可以不用添加，更多的情况是只读取出来显示，而不必修改)，set在修改值的时候被调用，在这里对所需的属性进行改变才可以改变界面上的值
<1>计算属性的简写
当只读不改的时候才可以使用这个简写的方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTd5Y2CI-1650258889067)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318200944642.png)]
相当于直接使用这个函数做get
注意：
- 在模板之中可以直接调用vue对象之中的数据，也只可以找到vue对象上的，不可以找到别的地方的函数（比如：window上的就找不到）
- 计算属性可以使用其他计算属性进行计算
<2>监视属性
watch属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oygCHlHk-1650258889069)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318202956999.png)]
当所监视的属性值发生更改的时候，执行这个函数，并且传入修改前和修改后的两个值
watch的配置项：
-
immediate:默认为false改为true之后，打开页面时就会默认执行一次handler
写法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mL6NV1B-1650258889070)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318203524934.png)]
-
深度监测：
属性deep默认为false如果改为true就可以监视多级结构之中的所有属性的变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bavdRtHN-1650258889071)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318212819054.png)]
watch的简写形式：
当没有使用配置项的时候才可以使用简写形式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WoS8Rjzc-1650258889072)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318213714872.png)]
注：
-
computed之中的计算出的属性也可以进行监测
-
第二种监视的方式（比较灵活）：
在对象创建完毕之后写在对象之外Vue对象.$watch('要监视的属性名',{ //下面这部分代码和之前的写法一样 immediate:true, handler(newValue,oldValue){ console.log(newValue,oldValue) } }) -
监视属性必须存在才可以监视（但是不会报错）
-
监视多级属性中某个属性的变化：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLS3aU1t-1650258889072)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318212144125.png)]
注意这里必须加‘’还原默认写法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRd3vZCq-1650258889073)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220318212620591.png)]
-
Vue自身可以检测到每一层的改变，但是watch只有配置了deep才可以
-
watch可以使用定时器来完成异步任务，computed不行
-
所有被Vue管理的函数最好写成普通函数，使得函数的this指向Vue实例
-
所有不被Vue所管理的函数（定时器函数，ajax函数，promise回调函数）最好写成箭头函数
这样这些函数的指向才是Vue对象
（12）绑定样式
<1>绑定class样式
- 字符串写法，适用于：样式的类名不确定，需要动态指定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qe4WgYaM-1650258889074)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220319101016690.png)]
实现三种心情随机生成
- 数组写法，适用于样式的个数不确定，名字也不确定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Z2am2eq-1650258889075)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220319102254087.png)]
就可以用
vm.arr.shift()移除数组第一个样式
vm.arr.push(‘样式名’)添加一个样式
- 绑定class的样式写法：适用于绑定样式的个数确定，名字也确定，但是要动态觉定用不用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqvnlNLC-1650258889076)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220319103306214.png)]
由true和false来确定是否使用此样式
-
绑定style的写法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWg0zGxU-1650258889105)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320211134606.png)]
注：fontsize为data里设置的值
或者
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iD9kRslJ-1650258889107)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320211443981.png)]
同时想要使用多个样式，可以直接写数组
（13）条件渲染
- v-show
v-show="True或者False"
当为真的时候展示，当为假的时候隐藏，也可为data之中的属性，也可以是一个结果为bool值的函数，由此来进行动态的展示与消失
注：结构依然存在，只是页面上不显示
-
v-if
用法与v-show相同
注：页面上不存在，且结构也不存在了
- 如果变化频率较高，最好使用v-show
-
v-else-if
和v-if配合使，一组一组的进行判断，与正常语法之中的相同
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnD8UD6B-1650258889110)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320213424487.png)]
-
v-else
与正常的else相同（后面不用跟条件）
- 注意：这几个条件之间不能间隔开（之间插入了不带这种类型标签的语句）
- v-show也不可以与后面的这些进行匹配
- 当有多个标签都需要使用相同的判断条件时，可以使用template标签来对这些标签进行包裹，然后 直接绑定template，区别于使用div标签进行包裹，可以不破坏HTML 的结构，防止某些CSS代码不能正确指定对象，但是只能使用v-if，不能使用v-show
（14）列表渲染（重要）
-
v-for
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rIsD3F4L-1650258889111)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320221234157.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F5bR4SAu-1650258889112)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320221302630.png)]
可以通过for命令生成数组长度的列表
-
key标签
-
写法1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FSmggve-1650258889112)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320221606336.png)]
-
写法2：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c2XiXkNK-1650258889113)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320222432769.png)]
其实有两个形参，p就是其中的数据，index为索引值，可以直接使用index为key的值（index）默认从零开始遍历整数
注意：
- in可以使用of进行替换功能完全一样
- key标签非常的重要一定要写
-
遍历对象
除了遍历数组还可以对对象进行遍历
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbnvFjV8-1650258889114)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320230025016.png)]
-
遍历字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7aCwv96w-1650258889114)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320230247238.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKPOSuKB-1650258889115)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320230300671.png)]
字符和索引值
-
遍历指定次数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azd3WCKu-1650258889116)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320230531229.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PLBAHuo3-1650258889116)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220320230632946.png)]
值是正常从1开始计数，索引从0开始数
-
key的原理
为节点进行标识，相当于身份证号
为了提高效率
虚拟DOM对比算法：
当key值相同的时候，就对里面的内容进行对比，如果内容相同，则直接复用之前的真实DOM，如果内容不同则进行重新由虚拟DOM进行更新key值没有寻找到相同的时候直接生成新的
导致：使用index直接做key值时如果进行逆序添加，逆序删除等会进行破坏顺序的操作时，index会重新生成，导致顺序错乱，如果有输入类型的（虚拟DOM层完全相同），会导致数据错乱
所以使用id（数据唯一标识）来使得每个元素绑定指定的key可以较好的使用对比算法，既可以提高复用效果，又可以防止数据错乱
注：没写key的时候，Vue默认把index当key
-
列表过滤（一般交由后端处理）
-
列表排序（一般交由后端处理）
-
（15）Vue的底层监视方法
-
加工data
加入响应式：reactivegetter，reactivesetter（其实更加完善，复杂）
-
vm._data=data
-
Vue.set
用于给Vue对象上添加属性
Vue.set(vm.想要给哪一个对象添加属性,添加的属性名,添加的属性值)
也可用于替换（写已有的属性名，加上需要替换的属性值）
同样功能
vm.$set（vm.想要给哪一个对象添加属性,添加的属性名,添加的属性值）
注:
- 用其他方式进行添加都不会给新属性添加Vue所需要的getter和setter
- 不可以直接在vm，或者vm._data上直接加，必须还有一层
-
数组之中的项没有对应的getter和setter值（数组项之中的对象有，即加了一层才有），所以Vue无法监测到数组项的整体的改变
arr=[{对象1},{对象2},{对象3}]
arr[0],arr[1],arr[2]没有，对象1，对象2，对象3有
只有通过对数组进行操作的几个函数才可以被数组监视到，进行改变，重解析模板
其实这几个函数（push，pop……）已经和原型对象之上的函数不一样了（添加了一些东西，进行了包裹）
-
注意：filter---------过滤 也不会被监视，要使用时进行过滤之后直接替换即可
-
数据劫持：给写的data加上了getter和setter的操作，不直接给页面
2、收集表单数据
JSON.stringify(data里数据名)------------------------------------把数据转化为JSON数组
v-model的字符修饰
v-model.number--------------------将输入的变为数字格式
v-model.lazy---------------------------失去焦点的一瞬间才进行收集
v-model.trim---------------------------无视所有的空格
v-model收集的是value值，用户输入的就是value值
v-model收集的是value值，用户输入的就是value值
- 未配置value值的时候收集的就是checked（勾选or未勾选，是bool值）
- 配置了input的value值
- v-model的初始值如果是非数组，那么收集的就是checked（勾选or未勾选，是bool值）
- v-model的初始值如果是数组，那么收集的就是value组成的数组
3、（过滤器）（vue3已删除）
-
显示格式化的时间戳
-
引入第三方库
bootCDN下载dayjs（复制链接打开后直接保存下来）
然后引入库，最后在计算属性中，或者写成方法使用下列函数
day(时间戳).format(‘YYYY-MM-DD HH:MM:SS’)
-
过滤器实现
过滤器的实现也需要配置项（和data，methods是一个层级的）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vztTPes4-1650258889117)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220323211547685.png)]
把time传给对应得函数得到返回值之后，在把一个整体都使用返回值进行替代
注意：
-
如果给timeFormater()传参会有一个默认的Time传参，再加上自己给的另一个参数
-
过滤器可以进行串联
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-46LyRW0s-1650258889118)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220323212454258.png)]
-
time传给timeFormater，timeFormater再传给myslice最后返回
-
可以配合v-bind进行使用（v-model不支持）v-bind：属性=“xxx|过滤器”
-
注意这里的过滤器都是局部的，在别的组件（别的Vue对象）之中就不可以进行调用了）
-
全局过滤器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T6Lut4Jy-1650258889118)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220323212952278.png)]
注意这里是filter，只能一个一个的写
-
-
4、内置指令
-
v-text
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEFcZ37x-1650258889119)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220323213649450.png)]
效果相同，但是不如插值语法灵活，会替换掉节点之中的所有内容，把所有内容当做文本，不支持结果的解析
-
v-html
用法与v-text相同，只不过支持结果的解析（如果包含html标签会执行）
内容补充：
cookie
第一次请求，需输入用户名与密码进行登录，登陆成功后不仅返回界面，同时会返回一些cookie，被浏览器存储了。
第二次请求，携带着对应的cookie（身份的标识），校验之后，返回数据，有些可能还会带着新的cookie。
cookie是每个浏览器各自使用的，不可以跨浏览器进行读取
使用cookie可以直接伪造身份（安装插件：cookie editor可以批量导入，导出cookie）
如果使用了这个插入了且加入document.cookie便可以获得别人浏览器上的cookie（设置httponly可以防止此种情况的发生）
最好不要使用这个：
- 永远不要相信用户的输入
- 容易导致XSS攻击
-
v-cloak
js阻塞：如果，我没有执行完毕，其他的都不可以执行
这个属性，当Vue加载成功的时候移除这个属性
当Vue不工作，即网络不通畅的时候，防止未经解析的模板跑到界面上（先隐藏，Vue调用成功之后在显示）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPpzpT72-1650258889119)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220324102326029.png)]
-
v-once
v-once所在的节点在初次动态渲染之后就视为静态渲染了（不随data改变而改变了）
-
v-pre
跳过其节点所在的编译过程，即Vue不再去解析这个节点，直接进行呈现
可以用它跳过一些不需要编译的语法，加快编译速度
5、自定义指令
自己定义操作名和操作
第一种定义的方法：写成函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-omzw5Wyk-1650258889120)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220324104712536.png)]
自己定义了v-big
所有的函数都可以收到element和binding
element是实例即真实的dome元素，binding是绑定的对象（n）里面有value
执行的时机：
- 指令与元素成功绑定时
- 指令所在的模块重新解析时
第二种定义方法：对象形式
最完整的形式，可以包含多个指定函数，Vue会在特殊的时机帮你调用这几个函数（注意名称不能写错）
-
bind(element,binding){}
指令与元素成功绑定时调用
-
inserted(element,binding){}
指令所在元素被插入界面时调用
-
update(element,binding){}
指令所在模板被重新解析时调用
注意事项：
-
要使用多个单词来为函数命名的时候：
格式为：v-big-name
而不是：v-bigName （会报错）
调用时应该使用完整的写法：‘v-big-name’(){}
-
这里写出来的时局部的自定义指令，如果想要定义全局指令，和全局过滤器类似
Vue.directive(指令名,配置对象或函数）
6、生命周期
生命周期：在Vue的一个周期内某个指定的时间点进行指定的事
（1）生命周期回调函数（生命周期钩子、什么周期函数）
生命周期函数的名称是固定的非常重要
4对钩子
-
beforecreate
数据代理和数据监测创建之前
-
created
完成了数据监测和数据代理（可以监视到data和methods了）
-
beforeMount
页面呈现未经Vue编译的DOM结构
对DOM的所有操作都不奏效
-
mounted（与data平级）：挂载
页面呈现经过Vue编译的DOM
这时候对DOM的操作有效，但是应该尽量避免（否则Vue没有意义了）
至此初始化过程结束，一般在这里执行开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
在Vue完成模板的解析，并且把初始的真实DOM元素（之后改变了也不再调用了，之后的改变不叫挂载，叫更新）放入页面后（即挂载完成）调用
注：mounted的this指向vm或者组件实例对象
-
beforeUpdate
更新之前，立刻调用（页面和数据尚未保持同步）
-
updated
更新之后，进行调用（页面与数据都是最新的）
-
beforeDestroy
销毁vue对象之前调用（即调用了vm.$destroy()之后立即进行调用，很少亲自调用）清理与其他实例的链接解绑所有自定义事件监听器（原生事件不会解绑：比如说点击事件）
注意：
- 销毁了vm之后，DOM依然存在，只是没有vm帮助管理了
- 此时vm的所有东西仍处于可以使用的状态：一般在此阶段进行关闭定时器、取消订阅消息、解绑自定义事件等收尾操作（但是这里不会再触发数据更新了）
-
destroyed
-
还有3个钩子需要在讲路由的时候才可以看到
7、template
可以通过这个配置项来对一个空的div进行配置**``使用这个符号进行包裹**（使用模板字符串进行包裹可以随意的进行换行，否则只能一行写完），使得div显示模板（多个标签必须包裹在一个根元素（比如div）之中，否则会报错，注：不能用template做根元素）
二、组件化编程
1、为什么要用组件化编程
传统方式：
- 依赖关系混乱，不好维护
- 代码复用率不高
组件方式：
每个区域都包含有自己的CSS,HTML,JS，一个vm可以下属多个组件，每个组件也可以有自己的下属组件
实现应用之中局部功代码和资源的集合
注：模块化：即把一个大的js文件拆为几个小的js文件
2、非单文件组件（开发时几乎不用）
一个文件中包含n个组件
a.html
使用组件需要三步：
-
创建
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y8qrBZ5K-1650258889121)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327163840410.png)]
注意：
- 组件定义
- data一定要写成函数式（）因为每次调用都会生成一组新的变量，否则只有一组的话在一个地方被修改，则所有调用的地方都会修改
带上模板
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BgZiDLlE-1650258889121)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327213357271.png)]
-
注册
局部注册（叫常用）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b6ivK4xP-1650258889122)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327213134405.png)]
components
定义时的名字：组件名（可自取）
全局注册
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXY0PUp4-1650258889122)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327214135076.png)]
component
-
使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8FVsnst-1650258889123)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327214839433.png)]
-
注意：
-
关于组件名：
-
一个单词：
首字母小写
首字母大写
-
多个单词组成
短横杠链接 my-school
首字母都大写：MySchool（需要脚手架支持）
-
回避与HTML已有的相同标签（大小写都不行）
-
-
name
创建时可以添加一个name标签项，这样Vue开发者工具里的显示就不是你在注册时所赋予的名字而是这里name的名字，但是在页面之中进行调用的时候，依然要使用注册时所赋予的名字(防止组件错乱)
-
在脚手架环境下，调用时可以写为闭合单标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ko5O60ZA-1650258889123)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220327220211536.png)]
-
简写模式
const student=Vue.extend({option}) const s={option}
-
-
组件的嵌套
父组件
子组件
在父组件之中使用components对子组件进行注册
子组件应该在父组件之前进行创建
注册给谁，数据就只有谁能调用，就去谁的结构里面写
-
app组件，一般使用app组件管理所有的组件，vm只管理app
-
VueComponent
-
组件本质上是一个名字为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
-
我们只需要按照前面的方法就可以让Vue在解析的时候帮助我们创造实例对象
-
特别注意每次调用Vue.extend，返回的都是一个全新的VueComponent（每new一次就会生成一个新的，不同的实例对象）
-
关于this的指向
-
组件配置中：
data、methods、watch、computed中的函数他们的this均是【VueComponent实例对象】
-
new Vue(option)配置中：
data、methods、watch、computed中的函数他们的this均是【Vue实例对象】
二者其实类似可以进行类比（数据代理，数据监视）
VueComponent实例对象，简称vc
Vue实例对象，简称vm
-
-
-
一个重要的内置关系
VC.prototype.__proto__===Vue.prototype 注： prototype显示原型对象（只有函数才有） __proto__隐式原型对象当查找一个数据没有找到时会沿着原型链进行寻找
目的让VC可以访问到Vue原型上的属性与方法
3、单文件组件
一个文件中只包含1个组件
a.vue（创建了一个新的文件名）经过处理和加工变为.js才可以被浏览器识别（使用脚手架，即一个搭建好的webpack，进行搭建）
条理清晰，便于管理
-
命名规则（与组件命名相同）：
-
一个单词：
首字母小写
首字母大写
-
多个单词组成
短横杠链接 my-school
首字母都大写：MySchool（需要脚手架支持）
-
-
书写格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LPyfuejE-1650258889124)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220330211805297.png)]
只有这三个标签
安装插件后 一定要在script里面写上暴露： 默认暴露（建议使用，引入时较为简单） 写法： 在组件结束后写上 export default vc 或者在开头直接写上 export default Vue.extend({ }) 或者简写为 export default{ name:’’, } App组件引入其他组件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZraqHnx-1650258889125)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331091022059.png)] 并对其他组件进行注册 使用main.js（入口文件）引入App组件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9rRFoZzS-1650258889126)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331091846123.png)] 并对App组件进行注册 在html之中引入main.js和Vue（在body的底部进行引入，先引入Vue再引入main.js） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B1WVgdPF-1650258889127)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331092537039.png)] CLI----------------------command line interface命令行接口工具 Vue脚手架是Vue的官方标准化开发工具 最新版本4.x 全局 安装 @vue/cli（仅第一次使用时需要） 备注：最好配置淘宝镜像安装 在进行安装 安装完毕后退出cmd再重新打开 切换到你要创建项目的目录，然后使用命令创建项目 cd Desktop（在桌面上创建） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nZvtj5G-1650258889128)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331095709177.png)] 执行vue create [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTJZo3FB-1650258889129)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331100115943.png)] 实际上帮你创建了一个包含hello world的案例和脚手架，使用自己的项目对hello world进行替换即可 选择Vue的版本 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFN2umm1-1650258889129)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331102111852.png)] 最后一项是自定义的意思 babel：ES6转ES5 eslint：语法检查 选择好对应的版本之后等待安装即可 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dEHB1xM-1650258889135)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331102912605.png)] 创建完成 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGUB3CMv-1650258889139)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331102931520.png)] 按提示执行如图所示的命令 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vGbp3mmA-1650258889140)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331103211684.png)] 给了一个两个端口，一个自己使用，另一个同局域网使用 复制地址，到浏览器之中打开 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4pNC8Fs-1650258889143)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331103436722.png)] 进入到vue所给的例子 注意：使用快捷键ctrl+c可以停止进程(按两遍) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3yKPfpa-1650258889145)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331223828678.png)] 文件结构讲解 主页面 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2DIdfhEp-1650258889146)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331225418223.png)] src [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Ye635JW-1650258889148)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331225716492.png)] main.js-----------------运行nmp run serve之后执行的文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPZp4hOQ-1650258889149)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220331230746560.png)] assets文件夹 在前端工作之中常常被用于存储静态资源（logo图，png……） components文件夹 存放处App组件之外的所有组件 注：在vscode之中打开终端（cmd）的方法按住Ctrl+~（esc下方的按键）即可 App.vue public文件夹 favicon.ico 网站的页签标签 index.tml 网站主页 render配置项（因为引入的是不完整的vue，没有模板解析器，所以需要使用rander来解析模板） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7AbVeSH-1650258889150)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402105213379.png)] 这里的a是一个函数叫createElement [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69xrE8T0-1650258889150)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402105455792.png)] 比如a(‘h1’,‘你好啊’)会展现出 的效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ieIKx9bF-1650258889151)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402105929789.png)] 改写成箭头函数之后的简写形式 vue的引入 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rm6PLlzy-1650258889152)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402110049016.png)] 为什么要有精简版的vue（vue.runtime.xxx.js） 完整的vue=核心+模板解析器 可是在使用webpack进行打包之后，就不在需要模板解析器了 所以使用精简版的可以减少代码的含量 (组件之中的template有专门的的解析，不用当心) 修改脚手架的默认配置 注意：Vue脚手架隐藏了所有webpack的相关配置，若想要查看具体的webpack配置需要在控制台之中执行 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kNYZ4vFh-1650258889153)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402165439208.png)] 即将vue隐藏的信息一output.js的形式输出到当前所在的文件夹内 直接打开由于是一个对象但是不完整所以会报错，加上const a =就不会报错了(这里只能查看，不可以修改) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krVStdXt-1650258889154)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402165734209.png)] 不能随便修改的默认配置 如果想要修改 可以修改的属性都已经在 Vue官网->Vue CLI->配置参考中进行了注明 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i6aXy802-1650258889154)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402170554768.png)] 新建一个vue.config.js文件夹在与package.json同级的地方，之后在文件之中结合配置参考中的代码来进行修改（现用现查，不需要背） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vi2ORXpH-1650258889155)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402171129297.png)] 修改之后一定要重新定义 注：要么就不写用默认的，如果写了，就算空白，也不会去调用默认的了，而是报错 关闭语法检查， 在配置参考之中找到lintOnSave [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MjJyYV82-1650258889156)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402172044786.png)] 注：配置参考的所有项都是平级的都要写在函数之中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HzpvMTb0-1650258889157)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402172405132.png)] 关闭了语法检查之后才可以跑起来，否则定义了没有用到的函数会导致报错，进而导致脚手架无法启动 给某个标签打标识，（相当于id） vc.$refs.ref名（获取vc的真实dom） 给子组件名打ref（这里用id） vc.$refs.ref名得到组件实例对象（重要） 组件的复用，动态的从外面传入新的数据 方法一：简单申明接收 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjFYo1tK-1650258889158)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402191517261.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xa1YmFUr-1650258889158)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402191544934.png)] 在App组件之中给School组件传入一个值，要用props进行接收（传多个值的时候，顺序不一定要求对应） 方法二：类型限制接收 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-haXxusuM-1650258889159)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402210621945.png)] 限制接收的对象的类型 注： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5X4Qq76-1650258889160)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402210657149.png)] 这里age前加了:进行了数据绑定，""内的内容视为一个代码操作，所以最后传下去的时数字， 如果不加的话传下去的就是字符串了(非常重要，传一个对象的时候也要加) 方法三：最完整版的接收 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPMH5V5g-1650258889160)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402211215999.png)] 配置所需的类型的同时，配置是否必须，或配置一个默认值（后两者一般不一起写，没有意义） 注意： prop-----------------------属性 不可以申明不存在的数据 props中的值优先被放到vc上（和data之中的数据同名的时候看props上的） 传入的属性值可以改，但是最好不要改，可能会出现问题 如果要修改的话： 在data之中定义一个新的数据使它=this.传入的数据 然后对新定义的数据进行修改即可 什么都可以传，数组、函数这些都可以传 混入：两个组件共享一个相同的配置 创建一个新的js文件在其中书写一个配置项并将其暴露 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bKMIZLrT-1650258889161)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402214033932.png)] 在组件中引入这个配置项 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MDVTictU-1650258889162)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220402214341453.png)] 使用数组引用 所有的配置项都可以进行混合（包括data） 就是复用配置 注： 已有的配置项进行混合不是替换，会在原有的基础上进行添加， data中的数据，methods中的方法如果发生冲突的时候，以源码为主 但是生命周期钩子冲突的时候，都进行执行，且源码的执行靠后 全局引入 Vue.mixin(混合项) 写在main.js之中 这样进行引入之后，所有的vm，vc上都会有混合项 可以增强vue 本质上是一个必须包含install的对象 一般写在plugins.js文件之中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w77DY2hC-1650258889163)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220403104319238.png)] 然后在main.js之中进行应用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Z9u8cpc-1650258889163)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220403104614898.png)] 注：install（）函数的第一个参数是Vue第二个参数第二个以后的参数是使用者传递的数据 可以在里面添加全局过滤器、全局指令、全局混入、添加实例方法，然后在，main.js之中进行调用，所有的对象就都可以对它进行使用 问题：vue最后会把所有组件的样式都汇总到一起，如果出现了相同的样式名，后引入的样式会把先引入的样式进行覆盖 解决 在style标签上添加一个scoped属性 表示，这个样式只作用于这个组件（注意App组件最好不要加这个，不然不会对所有组件进行管理） 补充：如果要使用less来写样式，可以在style之中的lang标签改为less然后安装less-loader 注意安装的版本要与webpack对应（@7即安装7的最新版本） scope-------------------作用域，范围 ajax 实现静态组件：抽取组件，使用组件实现静态页面效果 展示动态数据： 数据的类型和名称 类型：数组或者对象 数组包对象很常用 [{id:’’,data:’’},{}] 数据保存在哪一个组件 注意：兄弟组件之间不好传数据 现在只能使用父子之间的传递 所以一个组件在用的数据：放到在用的组件 一些组件在用，放到父组件之中（状态提升） 使用props进行通信 父传子使用props就行 子传父： 父亲创建一个函数，且使用props传给儿子，儿子在合适的时机进行调用（把值传入函数），函数定义在父亲里，就可以实现向父亲的数组中传入数据 父组件 子组件： 注： 键盘事件绑定好add函数后通过e.traget.value可以拿到输入框之中的值（e是自己 命名的） 数据在哪里，操作就在哪里 数据只可以逐层传递，父亲给儿子，不可以给孙子 v-model绑定的值不可以是props的值，因为props是不可以修改的 向本地缓存一些数据 localStorage 执行以下代码就可以存储 localStorage.setItem(‘键名’,‘键值’) 存储的键名和键值都要是字符串， 执行以下代码进行读取 localStorage.getItem(‘键名’) 执行以下代码进行删除 localStorage.removeItem(‘键名’) 执行以下代码进行清空 localStorage.clear() 数据全部在本地就算关闭浏览器也依然存在 手动清除才可以 sessionStorage 执行以下代码就可以存储 sessionStorage.setItem(‘键名’,‘键值’) 存储的键名和键值都要是字符串， 执行以下代码进行读取 sessionStorage.getItem(‘键名’) 执行以下代码进行删除 sessionStorage.removeItem(‘键名’) 执行以下代码进行清空 sessionStorage.clear() 与localStorage的API都相同 但是浏览器一关闭就清空了 session----------------------会话 以上两者统称webStorage 存储大小一般5MB左右 配合监视属性（watch）进行数据的存储 与读取 内置事件：click、keyup…… 自定义事件：只可以给组件使用 是一种组件间的通信方式，适用于子组件给父组件数据 使用场景：A：父组件，B：子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 原则：给谁绑定的事件，就在谁那里触发 绑定自定义事件： 方式一： 在父组件中： 回调函数写在methods之中，可以接受触发之后传回的值 方式二： 在父组件之中： 若想让自定义事件只触发一次，可以使用once修饰符，或$once方法 触发自定义事件：this.$emit(‘自定义事件名’,给回调函数传的参数) 解绑自定义事件：this.$off(‘自定义事件名’) 组件上也可以绑定原生DOM事件（click……）,但是需要添加native修饰符 注意：通过 this. r e f s . x x x . refs.xxx. refs.xxx.on(‘自定义事件名’,回调)绑定自定义事件的时候，要么只写回调函数名（this.回调函数名），把函数本体写在methods中，要么直接在这里写回调函数，但是要写为箭头函数 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JfHojzoS-1650258889164)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404095927160.png)] 图中的选项卡可以查看自定义事件的触发 emit-------------------爆发 native------------------原生的，本来的 可以实现任意组件之间的通信，开发的时候非常常用 其实是一个把现有的知识进行组合之后的经验，不是一个新的API 要求： 综上： 标准的写法（写在main.js的vue对象之中） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywm8T5PA-1650258889165)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404105719104.png)] 使用生命周期钩子进行创建，在Vue的原型对象上添加一个$bus,以实现上面的需求 注意： 不再用这个绑定了事件的vc时要在beforeDestroy(){}中对这个事件进行销毁，否则这个事件名会一直跟着vm保持占用 谁接收数据就在谁的地方给发送数据的绑定一个事件 在发送数据的地方进行触发 在挂载的时候进行绑定 应用场景： 也可以实现全局数据的传递 需第三方库，推荐：pubsub-js（所有的框架都可以使用） 安装 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rd4d8AFY-1650258889166)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404111835956.png)] 引入 订阅消息 发布消息 解除订阅 每次订阅都是通过订阅id进行订阅的，解绑的时候也需要使用订阅id 其实全局事件总线更好 语法：vc.nextTick(回调函数) 作用：在下一次DOM更新结束后执行指定的回调函数 什么时候使用：但数据变更之后需要基于更新后的DOM元素进行一些操作的时候，就要使用这个API 写法： 准备好样式 使用transition包裹要过度的元素，并且配置name属性 注意 animate库的使用 打开网站选择对应动画 https://animate.style/ 先进行安装 进行引入 然后看这里 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkyFPbrJ-1650258889166)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404171645925.png)] 在想要添加的标签后添加这一句 到这里配置完毕 给标签添加标签项 enter-active-class=“xxx” //进入效果 leave-active-class=“xxx” //离开效果 xxx的获取方法 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DojM8E6e-1650258889167)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404172052697.png)] 在网站上选择相应的样式后进行复制 xhr（元祖，不常用） new XMLHHttpRequest() xhr.open() xhr.send() jQuery (对xhr进行封装) $.get $.post axios（对xhr进行封装） vue进行使用比较好 fetch（与xhr是平级的关系） 进行了两次封装，且兼容性不好 vue-resource（对xhr进行封装） vue中插件库 早期vue常用 下载axios 在App组件之中引入axios 绑定函数并调用 跨域 数据传递时有同源要求 即协议名、主机名、端口号必须一样 如果有一个或者多个不一样的话就会有跨域的问题出现 会发出请求，服务器也会进行返回数据，但是浏览器不会把数给你 解决方法： cros 后端进行解决（配置特殊的响应头，实际意义上的解决） jsonp 借助script标签在引入src时不受同源影响 巧妙但是很少用（前后端都改，而且只可以解决get请求的跨越问题） 配置代理服务器 代理服务器与浏览器当前的地址是相同的 浏览器向代理服务器要数据 代理服务器向目标服务器要数据 目标服务器向代理服务器返回数据 代理服务器再将数据返回给浏览器 （注：ajax只是前端技术，服务器之间传数据，不用ajax，不要求同源） 代理服务器的开启方法 Nginx（学习成本较高） 使用Vue进行直接开启 在vueconfig.js中进行添加 配置方法一： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h7agbKI3-1650258889168)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404204323138.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WmJRuCIF-1650258889168)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404204606479.png)] 之后重新启动就可以开启代理服务器了 请求数据时所使用的的地址变为： 当前服务器地址/所请求的数据 缺点： public文件夹中的数据就相当于当前代理服务器中的数据，如果请求了这个文件夹含有的数据，则代理服务器不会向目标服务器进行请求，而是把文件夹中的数据进行返回 只能配置一个代理（一个目标服务器） 配置方式二：（解决方式一的问题） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xE6Lr8Su-1650258889169)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404205605527.png)] 请求的写法： 加前缀走代理，不加前缀则不走代理（优先匹配前端资源） 注： 请求的时候如果要使用到js的语法则可以像下面这样写 vue-resource的使用 在引入vue的地方进行引入 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E08pRChb-1650258889169)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220404222425099.png)] 对插件进行使用 用法与axios完全相同， 只需要把axios变为this.$http即可 但是这个库维护的较少了（官方已经不维护了），所以还是推荐使用axios 让父组件可以向子组件的指定位置放一些东西 默认插槽 具名插槽 作用域插槽 使用场景：数据存在组件的自身，但是数据的显示结构需要组件的使用者（父组件）进行决定 这样在父组件的结构之中也可以通过数据名来点出所需要的数据 几个插槽直接可以互相配合 专门在Vue中实现集中式状态（数据）管理的Vue插件，对vue应用中多个组件的共享状态进行 集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信 使用时机： 一个数据的读取和返回如果涉及到组件太多，那么全局事件总线需要绑定的就太多了，这时候就选择把数据存在vuex通过两个API进行读取和修改（即多个组件依赖于同一状态，不同组件的行为需要变更同一状态） vuex的工作原理 安装vuex 注：vue2只能用vuex的3版本，vue3只能用vuex的4版本 引入vuex [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FpCLe1Z-1650258889170)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220405113659353.png)] （注：这里不用第二个框中的代码了，在第三步进行使用） 在src目录下新建一个store文件夹，在里面新建一个index.js 按如下方法配置store 在new vue的时候引入store配置项，这样所有的vm，vc都可以看到 在main.js中再次引入store 并且在vm实例中进行配置：写一个配置项叫store就可以 注：脚手架的引入方式，不论你的import在哪都会先进行引入之后在执行其他的代码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EC0w8G8q-1650258889171)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220405162710748.png)] 注： 引入了vuex后，所有的vm与vc身上都有了$store属性，通过这个属性和上图对应的方法可以进行调用 this.$store.dispatch() 与actions对话，调用actions之中与 其实也集成在了vue的开发者工具中了 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFzyLiv7-1650258889171)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220405162502140.png)] 就是第二个选项卡 上方选择区：记录mutations中的操作 下方展示区：进行具体展示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bNJ9zDjD-1650258889172)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220405163815583.png)] 注意：取消操作会取消所有以此次操作结果为基础进行的所有操作 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXSjnLMY-1650258889173)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220405164319029.png)] 注： 组件中读取vuex中的数据： 组件中修改vuex中的数据： 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写 mutations-----------------------------突变，变化，转变 commit--------------------------------上下文 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。 在 组件中读取数据： 类比： state=======>data getters======>computed 帮助我们自动生成一些重复的代码,简化写法 在所需要使用的vue文件中进行引入 四种写法 mapState 从state之中读取数据为计算属性供给vc使用 mapGetters 从getter中读取数据为计算属性供给vc使用 mapActions用于帮助我们生成与 mapMutations用于帮助我们生成与 注： 可以把对象展开成键值对 如果不展开，则会因为对象不可以包裹另一个对象而报错 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。 目的：让代码更好维护，让多种数据分类更加明确。 修改 开启命名空间后，组件中读取state数据： 开启命名空间后，组件中读取getters数据： 开启命名空间后，组件中调用dispatch 开启命名空间后，组件中调用commit 注：使用map的形式比较统一，使用自己手写的方式比较麻烦（getter和与其他形式上有所不同） 模块化： 进行上述操作之后，可以把每个组件分别存储到store文件夹下的新建文件，最后在统一引入到index.js 然后进行暴露 目的实现单页面（spa）应用：页面不刷新但是地址和内容会变，进行局部更新，数据需要通过ajax请求 实现方法：前端路由：更改路径之后，router会自动监测并匹配对应的组件进行显示 后端路由：更改路径后，调用对应的数据去响应前端请求 vue-router是vue的一个库专门用于实现spa应用 安装这个库 最新版本vue2不能使用 引入这个库(main.js中) 创建vm的时候可以得到一个新的项：router 创建一个router文件夹，内置一个index文件（该文件专门用于创建router） 在该文件下引入router 文件中的写法： 在main.js之中引入路由器 收到事件时，把地址后面的改为/加上“/about” active-class：把当前选中的高亮 指定组件展示位置 注意： 组件的区别： 一般组件-----------自己写结构，注册的组件 放到components文件夹中 整个应用都只有一个路由器（ r o u t e r ） ， 但 是 有 多 个 路 由 规 则 （ router），但是有多个路由规则（ router），但是有多个路由规则（route）每个组件都有一个存储着自己的路由信息 不用的路由组件被销毁了 导航项，下还有导航项 使用children项配置子路由 子路由要写成数组，因为可能有多个子路由 注意前端要写完整路径 给路由组件传递参数 接收参数 简化跳转时的写法 命名的写法 路径的配置 必须配置成对象 配置路由，声明接收params参数 传递参数 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！ 接收参数： params与query在实际开发之中都常用 query------------------疑问询问 params----------------参数、参数个数 作用：让路由组件更方便的收到参数 直接在组件中使用props组件即可 历史记录的默认操作模式：堆栈的push模式 还有一种操作就是replace：用新的对当前的进行替换,历史记录始终只有一条，所以不可以前进后退（登录界面可以考虑使用这个，避免重复提交表单） replace模式的开放方式： 不使用router-link进行路由导航 需求： 因为router-link最终会被解析为a标签，如果原来是别的标签进行跳转则会破坏结构 多少秒后自动跳转 具体编码： 对路由的完善 应用场景：切换组件之后，仍然保存数据（现实场景之中很实用） 指定的组件在切换的时候保持挂载不会被销毁 注意： 路由组件独有 使用方法与正常的相同 作用：对路由进行权限控制（当满足某些条件下才可以点开） 分类：全局守卫、独享守卫、组件内守卫 使用前先用一个const接住创建的对象，然后并不在对象前直接暴露，而是在配置完路由守卫之后，在 export default 对象名 两个API beforeEach：初始化时和每次路由切换之前调用的函数 三个收到的对象： to------去哪 to.path----------可以获得想要跳转的页面的路径，可以用于路径判断 from-------来自哪里（目前所处的位置） next()-------放行 afterEach： 配置项meta 路由元信息，可以在这里面放置几组bool值来统一配置路由守卫的判断信息，也可以放置一些title名 常常起名为：isAuth 全局守卫: 独享守卫: 写在路由之中，只对所在的路由负责 独享路由守卫只有前置没有后置 组件内守卫： 写在组件内，仔细揣摩触发的时机，不要简单的理解为前后 关于hash 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式： history模式： 更改的方式 给路由器添加配置项 mode 项目上线问题 不能直接上线，要经过一次打包生成最纯粹的.html.css.js文件 执行build命令即可 生成的文件叫做dist 生成的页面要放到服务器上进行部署才可以 不能直接打开 dist--------------------打包压缩 移动端常见UI库 PC端常用组件库 Element UI 按照官网组件中的办法进行全部引入 这样引入非常的大，因为所有都进行了注册 进行按需引入 快速上手->按需引入->GitHub->babel-plugin-component 安装开发依赖 找到babel.config.js不要删去原来的，而是在原来的基础上进行追加 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3xKYUpn0-1650258889175)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220409224244382.png)] 引入其他组件也是相同的办法 样式会自动加上，不用引入了 event.traget---------------------------------可以指向触发点击事件的按钮的属性 event.keycode------------------------------得到某个按键对应的按键编号 const arr=value.split(’-’)-------------------把value按照’-'拆分成几个数组，arr[0]是第一数组，以此类推 延迟1s之后执行代码 箭头函数没有自己的this，会向外一层找this math.random()-------------------------------随机生成一个0到1内的随机数（包括0但是不包括1） math.floor()------------------------------------对所给的数进行向下取整 结合6可以生成一个范围内的随机数 数组名.unshift(元素名)-----------------------------在数组之前加入一个元素、 数组名.push(元素名)-------------------------------- 数组名.pop(元素名) 数组名.shift(元素名) 数组名.splice(元素名) 数组名.sort(元素名) 数组名.reverse(元素名) JSON.stringify(数据)------------------------------------把数据转化为JSON数组 debugger--------------------------------------------------在这里设置一个断点（开了控制面板才有用） clearInterval()----------------------------------------------停止循环 暴露的三种方法： 默认暴露 暴露方法： export default 暴露对象 引入方法： import 暴露对象 from ’文件地址‘ 分别暴露 暴露方法： export 暴露对象 引入方法： import {暴露对象} from ‘文件地址’ nanoid生成全球唯一的一串编码常用来做id 安装这个库 npm i nanoid 使用分别暴露的引入方式进行引入 import {nanoid} from ‘nanoid’ 使用 id：nanoid（）即可 数组名.foeEach((单项名)=>{ }) 对数组进行遍历，每经过一个数，执行一遍{}中的内容 数组名.filter((单项名)=>{ returen todo.id !== id }) 把id不等于传入的id的项进行返回 只有返回值为真的时候才会返回当前项 reduce 专门用于条件统计 数组.reduce((pre,current)=>{ return pre+ (current.doen?1:0) },0) 第一次调用的时候pre是指定的0 第二次调用的时候pre是上一次调用的返回值，依次类推 数组有多长就调用几次 最后一次的调用的返回值作为函数的返回值 current为当前的数组项 所以上述代码实现的是判断数组之中值为1的项 JSON.stringify() 将对象转化为字符串（可以是数组包对象） JSON.parse() 将字符串变为对象（可以是数组包对象） {…对象1,…对象2} 用对象2替换对象1中同名属性的属性值，如果没有的则保持 clearInterval(计时器名)----------------------关闭计时器 overflow:auto---------------------------------添加一个滚动条 scroll---------------------------------------------滚动事件（滚动条发生滚动） wheel--------------------------------------------滚动事件（鼠标的滚轮发生改变） click---------------------------------------------点击事件 style=“opacity”------------------------------透明度 在输入框中显示默认的text 事件： alert(‘文本’)：弹窗提示文本 confirm(‘文本’)：弹窗提示文本，确定返回真，返回返回假 注意区分虚拟DOM与真实DOM，两者不在一层 第三方成型的资源一般都不放到.vue文件之中，而是新建一个assets文件夹，在里面在分门别类的放置 如果没有使用到第三方则在App.vue之中进行引入， 如果用到了则在inde.html之中使用link标签引入 数据驱动页面的展示 空数组，未定义是false flex页面布局 [外链图片转存中…(img-3xKYUpn0-1650258889175)] 引入其他组件也是相同的办法 样式会自动加上，不用引入了 event.traget---------------------------------可以指向触发点击事件的按钮的属性 event.keycode------------------------------得到某个按键对应的按键编号 const arr=value.split(’-’)-------------------把value按照’-'拆分成几个数组，arr[0]是第一数组，以此类推 延迟1s之后执行代码 箭头函数没有自己的this，会向外一层找this math.random()-------------------------------随机生成一个0到1内的随机数（包括0但是不包括1） math.floor()------------------------------------对所给的数进行向下取整 结合6可以生成一个范围内的随机数 数组名.unshift(元素名)-----------------------------在数组之前加入一个元素、 数组名.push(元素名)-------------------------------- 数组名.pop(元素名) 数组名.shift(元素名) 数组名.splice(元素名) 数组名.sort(元素名) 数组名.reverse(元素名) JSON.stringify(数据)------------------------------------把数据转化为JSON数组 debugger--------------------------------------------------在这里设置一个断点（开了控制面板才有用） clearInterval()----------------------------------------------停止循环 暴露的三种方法： 默认暴露 暴露方法： export default 暴露对象 引入方法： import 暴露对象 from ’文件地址‘ 分别暴露 暴露方法： export 暴露对象 引入方法： import {暴露对象} from ‘文件地址’ nanoid生成全球唯一的一串编码常用来做id 安装这个库 npm i nanoid 使用分别暴露的引入方式进行引入 import {nanoid} from ‘nanoid’ 使用 id：nanoid（）即可 数组名.foeEach((单项名)=>{ }) 对数组进行遍历，每经过一个数，执行一遍{}中的内容 数组名.filter((单项名)=>{ returen todo.id !== id }) 把id不等于传入的id的项进行返回 只有返回值为真的时候才会返回当前项 reduce 专门用于条件统计 数组.reduce((pre,current)=>{ return pre+ (current.doen?1:0) },0) 第一次调用的时候pre是指定的0 第二次调用的时候pre是上一次调用的返回值，依次类推 数组有多长就调用几次 最后一次的调用的返回值作为函数的返回值 current为当前的数组项 所以上述代码实现的是判断数组之中值为1的项 JSON.stringify() 将对象转化为字符串（可以是数组包对象） JSON.parse() 将字符串变为对象（可以是数组包对象） {…对象1,…对象2} 用对象2替换对象1中同名属性的属性值，如果没有的则保持 clearInterval(计时器名)----------------------关闭计时器 overflow:auto---------------------------------添加一个滚动条 scroll---------------------------------------------滚动事件（滚动条发生滚动） wheel--------------------------------------------滚动事件（鼠标的滚轮发生改变） click---------------------------------------------点击事件 style=“opacity”------------------------------透明度 在输入框中显示默认的text 事件： alert(‘文本’)：弹窗提示文本 confirm(‘文本’)：弹窗提示文本，确定返回真，返回返回假 注意区分虚拟DOM与真实DOM，两者不在一层 第三方成型的资源一般都不放到.vue文件之中，而是新建一个assets文件夹，在里面在分门别类的放置 如果没有使用到第三方则在App.vue之中进行引入， 如果用到了则在inde.html之中使用link标签引入 数据驱动页面的展示 空数组，未定义是false flex页面布局
三、脚手架（Vue CLI）
（1）分析脚手架
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.105:8080/
你好啊
vue inspect > output.js
（2）ref属性
（3）vc配置项props
（4）vc配置项mixin
（5）插件
（6）样式的写法
npm i less-loader@7
（7）组件化的编码流程（通用）
methods{
receive(x){
this.todo.unshift(x)
}
}
add(e){
const todoObj={id:name(),title:e.traget.value,done:false}
this.recive(todoObj)
}
（8）浏览器本地存储
（9）组件的自定义事件
（10）全局事件总线（非常重要）GlobalEventBus
（11）消息的订阅与发布
import pubsub from 'pubsub-js'
mounted() {
this.订阅id= pubsub.subscribe('消息名'，(消息名，数据)=>{
执行回调
})
}
mounted() {
pubsub.publish('消息名'，数据)
}
beforeDestroy(){
pubsub.unsubscribe(this.订阅id)
}
（12）$nextTick
（13）过度与动画
你好
npm install animate.css
import ‘animate.css’
四、Vue中的Ajax
（1）常用的发送AJAX请求的方法
（2）使用axios发送请求
npm i axios
import axios from 'axios'
getData(){
axios.get('服务器地址/所请求的数据名').then(
response=>{
response.data//请求到的数据
},//成功则执行这个
error=>{
error.message//失败的原因
}//失败则执行这个
)
}
devServer: {
proxy: 'http://localhost:4000'
}
devServer: {
proxy: {
'/请求前缀1': {
target: '目标服务器地址',
pathRewrite:{'/请求前缀':''}
//非常重要，把地址中的请求前缀去掉，否则会找目标服务器去要带着请求前缀的地址下的请求对象
ws: true,
//用于支持websocket
changeOrigin: true
//跨域伪造，为true则实话实说，讲出自己的真实地址，为false则把自己的地址伪造成目标服务器的地址，即用于控制host字段
},
//对另一个服务器进行请求
'/请求前缀2': {
target: '另一个目标服务器地址'
}
}
}
axios.get('服务器地址:端口号/请求前缀/请求对象')
axios.get(`地址${想要当做js解析的部分}`)//注意这里的两个点是模板字符串的点
（3）插槽
父组件之中：
<子组件名>
<div>要传递的结构div>
子组件名>
子组件之中：
<template>
<div>
定义插槽
<slot>如果没有进行传递则显示这里的内容slot>
div>
template>
父组件之中：
<子组件名>
<template slot="自定义的名字1">
<div>要传递的结构div>
template>
<template v-slot:自定义的名字2>
<div>要传递的结构div>
template>
子组件名>
子组件之中：
<template>
<div>
定义插槽
<slot name="自定义的名字1">如果没有进行传递则显示这里的内容slot>
<slot name="自定义的名字2">如果没有进行传递则显示这里的内容slot>
div>
template>
父组件之中：
<子组件名>
<template scope="最好与子组件传过来的数据名保持相同">
<div>要显示的结构1div>
template>
子组件名>
<子组件名>
<template slot-scope="最好与子组件传过来的数据名保持相同">
<div>要显示的结构2div>
template>/子组件名>
<子组件名>
子组件之中：
<template>
<div>
定义插槽
<slot :数据名:"数据名">如果没有进行传递则显示这里的内容slot>
div>
template>
<script>
数据
script>
五、vuex（重要）
（1）vuex的引入：
npm i vuex@3
//该文件用于创建store
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
// console.log('actions中的jia被调用了',miniStore,value)
context.commit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
}
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
import store from './store/index'
（2）veux的使用
(3)vuex的开发者工具
$store.state.sum（模板中可以不加this.但是脚本中必须加）$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
dispatch，直接编写commit（4）getters配置项
store.js中追加getters配置......
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
$store.getters.bigSum（5）map的使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed: {
//借助mapState生成计算属性：sum、school、subject（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性：sum、school、subject（数组写法）
...mapState(['sum','school','subject']),
},
computed: {
//借助mapGetters生成计算属性：bigSum（对象写法）
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性：bigSum（数组写法）
...mapGetters(['bigSum'])
},
actions对话的方法，即：包含$store.dispatch(xxx)的函数methods:{
//靠mapActions生成：incrementOdd、incrementWait（对象形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成：incrementOdd、incrementWait（数组形式）
...mapActions(['jiaOdd','jiaWait'])
}
mutations对话的方法，即：包含$store.commit(xxx)的函数methods:{
//靠mapActions生成：increment、decrement（对象形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成：JIA、JIAN（数组形式）注：这里的函数名要与mutations中的函数名保持一致
...mapMutations(['JIA','JIAN']),
}
...对象，
（6）模块化编码（进阶）
store.js//第一种分类
const countAbout = {
namespaced:true,//开启命名空间，这个分类名才可以被map认识
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
//第二种分类
const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}
//对两个模块进行暴露
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
六、路由（非常重要）
（1）环境配置
npm i vue-router@3
Vue.use(VueRouter)
（2）基本使用
//引入VueRouter
import VueRouter from 'vue-router'
//引入对应的组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
//暴露router
export default new VueRouter({
//配置路由规则
routes:[
{
path:'/about',//监视对应路径
component:About//随着对应路径出现的组件
},
{
path:'/home',
component:Home
}
]
})
import router from './router/index'
//vm对象之中配置
router:router
路由组件-----------靠路由规则进行匹配展示的组件 放在pages文件加中（4）嵌套路由
routes:[
{
path:'/about',
component:About,
},
{ //一级路由
path:'/home',
component:Home,
//子路由
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message',//此处一定不要写：/message
component:Message
}
]
}
]
（5）路由传参
不常使用
$route.query.id
$route.query.title
（6）路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
（7）params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数，告诉从detail之后就是路由的传参了
component:Detail
}
]
}
]
}
$route.params.id
$route.params.title//占位符的名称
（8）路由的props配置
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件，只能写成静态的
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件，推荐
props($route){
return {
id:$route.query.id,
title:$route.query.title
//在传入组件之中使用props['id','title'],之后就可以直接写id和title属性了
}
}
}
（9）
（10）编程式，路由导航
//$router的两个API
//封装成一个函数，放到methods里面，在外面进行调用即可
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}//可以携带参数
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
//另外三个API
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退，传入一个正数，则前进正数所对应的的步数，传入一个负数则反之
（11）缓存式路由
（12）两个新的生命周期钩子
activated路由组件被激活时触发。deactivated路由组件失活时触发。（13）路由守卫
//注：router是自己取的对象名
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制，未定义就是false
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next() //放行
}
})
//全局后置守卫：初始化时执行、每次路由切换后执行，没有next
//常常用于改变页签（title）
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title（从跳转到的meta上获取）
}else{
document.title = 'vue_test'
}
})
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}
//进入守卫：通过路由规则，进入该组件之前被调用，一定要写next()放行
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开当前组件之前被调用
beforeRouteLeave (to, from, next) {
}
（14）路由的两种工作模式
new VueRouter({
mode:'history'//history模式
mode:'hash'//默认的模式
})
npm run build
七、Vue UI组件库
npm install babel-plugin-component -D
{
"presets": [["@babel/preset-env", { "modules": false }]],
//注意：这里的配置与官网上不一致
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
四、用到的js语法
setTimeout(()=>{
代码片段
},1000)
math.floor(math.random()*3) //生成0到2内的一个随机整数
五、用到的css语法
六、用到的HTML语法
<hr/>分隔线
七、注意
.config.js不要删去原来的，而是在原来的基础上进行追加{
"presets": [["@babel/preset-env", { "modules": false }]],
//注意：这里的配置与官网上不一致
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
四、用到的js语法
setTimeout(()=>{
代码片段
},1000)
math.floor(math.random()*3) //生成0到2内的一个随机整数
五、用到的css语法
六、用到的HTML语法
<hr/>分隔线
七、注意