💥此MD/PDF/HTML文档由 @竹梦者也 编辑制作,不可贩卖❌。仅供学习交流使用,下载后切勿随意传播。转载麻烦加上出处~

📌欢迎在留言区提供修改建议~

💌本文内容和代码来自于张天禹老师的Vue2教程

 

✅2021.8.16 @竹梦者也(https://www.zjgsuzjx.top)

 

一、Vue核心一、Vue简介1. 官网2. 介绍3. 发展经历4. 特点二、初识Vue1. 安装2. 简单使用三、模板语法1. 插值语法2. 指令语法四、数据绑定五、番外1六、MVVM模型七、数据代理1. 对象defineProperty方法2. Vue中的数据代理八、事件处理1. 基本使用2. 事件修饰符3. 键盘事件九、计算属性1. 铺垫2. 计算属性实际要用3. 计算属性简写十、监视属性1. 基本用法2. 深度监视3. 监视属性的简写4. 计算属性与监视属性十一、绑定样式1. class绑定样式2. style绑定样式十二、条件渲染十三、列表渲染1. v-for指令2. key的原理3. 列表过滤4. 列表排序5. Vue监视数据原理十四、收集表单数据1. 单选框2. 多选框3. v-model的三个修饰符十五、过滤器1. 注册过滤器2. 使用过滤器十六、其它内置指令1. v-text2. v-html3. v-cloak4. v-once5. v-pre十七、自定义指令1. 简写形式2. 完整形式3. 全局与局部指令十八、生命周期二、组件化编程一、组件定义1. 组件是什么2. 作用3. 组件化二、非单文件组件1. 定义组件2. 注册组件3. 使用组件4. 注意事项5. 组件嵌套6. VueComponent7. 内置关系(重要)三、单文件组件1. 模板2. 例子三、Vue脚手架一、初始化脚手架1. 脚手架概念2. 具体步骤3. 模板目录分析4. render函数二、关键属性1. 修改默认配置2. ref属性3. props配置4. mixin混合三、插件四、scoped样式五、Todo-List案例1. 本地存储2. 组件的自定义事件3. 全局事件总线(GlobalEventBus)4. 消息订阅与发布(pubsub)5. nextTick6. 动画效果四、Vue中的ajax一、作用二、第一种配置方式三、第二种配置方式四、GitHub用户搜索案例1. 预习准备2. 布局分析3. 程序设计4. Vue-resource五、插槽1. 默认插槽2. 具名插槽3. 作用域插槽五、vuex一、基本概念二、工作原理三、环境搭建1. 安装2. 文件创建四、求和案例vuex版五、vuex开发者调试工具六、getters配置七、四个map方法的使用1. mapState2. mapGetters3. mapActions4. mapMutations八、vuex模块化编码1. 概念2. 具体操作示例六、路由一、概念1. 名称解析2. 对 SPA 应用的理解二、基本使用1. 下载插件2. 路由配置三、多级(嵌套)路由四、路由的query参数五、命名路由六、路由的params参数七、路由的props配置八、router-link标签的replace属性九、编程式路由导航十、缓存路由组件十一、两个新的生命周期钩子十二、路由守卫1. 全局守卫2. 独享守卫3. 组件内守卫十三、路由器的两种工作模式七、Vue UI 组件一、移动端常用 UI 组件库二、PC 端常用 UI 组件库

 

 

一、Vue核心

一、Vue简介

1. 官网

Vue 2.x官网:https://cn.vuejs.org/

Vue 3.x官网:https://v3.cn.vuejs.org/

2. 介绍

一套用于构建用户界面渐进式JavaScript框架。

构建用户界面是指将数据转化为界面。渐进式是指从轻量小巧的核心库逐渐引用各式各样Vue插件。

作者为尤雨溪。

3. 发展经历

b0263e0fea3c67e665fac184c869cba2.jpg

4. 特点

二、初识Vue

1. 安装

在目前阶段,可以先引入js文件来学习。

https://cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5

下载生产版本

然后需要下载浏览器插件(Vue专用的调试工具)。

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

用以下代码关闭浏览器提示:

2. 简单使用

总结

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
  3. root容器里的代码被称为Vue模板

注意

三、模板语法

在容器中使用Vue专用的特殊语法。

1. 插值语法

就是前面例子用到的写法。

功能:用于解析标签体内容。

写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

2. 指令语法

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件等等)。

举例v-bind:href="xxx" 或简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。

备注:Vue中有很多的指令,且形式都是:v-???,此处我们只是拿v-bind举个例子。

四、数据绑定

可以分为单向数据绑定和双向数据绑定。

单向数据绑定

数据只能从data流向页面。使用v-bind

双向数据绑定

数据不仅能从data流向页面,还可以从页面流向data。使用v-model

备注:

双向绑定一般都应用在表单类元素上(如:input、select等)

v-mode1:value可以简写为v-model,因为v-model默认收集的就是value值。

如:

五、番外1

el与data的两种写法

(1)new Vue时配置el属性

(2)先创建Vue实例vm,随后再通过vm.$mount('#root')指定el的值。

(1)对象式,就是上面的例子。

(2)函数式,如:

如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。

注意:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this指向就不再是Vue实例了。

六、MVVM模型

8b4f019e9e5f79c609492caa9939bfa9.jpg

data中所有的属性,最后都出现在了vm身上。因此vm身上所有的属性以及Vue原型上所有属性,在Vue模板中都可以直接使用。

七、数据代理

1. 对象defineProperty方法

2. Vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

好处:更加方便的操作data中的数据

基本原理:通过Object.defineProperty()把data对象所有属性添加到vm上。为每一个添加到vm的属性都指定一个getter/setter。在gettersetter内部去操作(读/写)data中对应的属性。

5792ecff6978bcc3897bb8a223125a7a.jpg

例子:

在控制台输入vm.age=20,则页面的age部分会发生修改,说明确实修改了data中的age。

八、事件处理

1. 基本使用

事件的基本使用:

1.使用v-on:xxx@xxx绑定事件,其中xxx是事件名;

2.事件的回调需要配置在methods对象中,最终会在vm上:

3.methods中配置的函数,不用箭头函数!否则this就不是vm了;

4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;

5.@click="demo"@click="demo($event)"效果一致,但后者可以传参

注意:DOM元素要写在root容器里。

2. 事件修饰符

其它(次要):

capture:使用事件的捕获模式;

self:只有event.target是当前操作的元素时才触发事件;

passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

补充说明capture是将冒泡触发的行为转为捕获触发行为。self的作用和stop差不多。passive通常用于移动端,例如鼠标滚轮时马上执行滚动行为,无需等待方法执行完毕。

技巧:如果要绑定多个事件,可以连写。如:@click.stop.prevent,意思为先停止冒泡再阻止默认行为。

3. 键盘事件

Vue中常用的按键别名

备注:Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为xxxxx-xxx(短横线命名)

系统修饰键(用法特殊):ctrlaltshiftwin

(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

(2)配合keydouwn使用:正常触发事件。

不推荐使用keyCode去指定具体的按键,因为即将弃用。

Vue.config.keycodes.自定义键名=键码,可以去定制按键别名

技巧:如果要使用形如ctrl+v的键盘事件,也可以使用连写形式,如:@keyup.ctrl.v

九、计算属性

1. 铺垫

在span标签里实时更新输入框的内容。用方法来实现。

2. 计算属性实际要用

定义:要用的属性不存在,要通过已有属性计算得来。

原理:底层借助了Objcet.defineproperty方法提供的gettersetter

(1)初次读取时会执行一次。

(2)当依赖的数据发生改变时会被再次调用。

优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

具体实现例子:

个人理解:计算属性是根据现有data中的属性进行计算后,再将其加入到data中的属性,所以本质还是属性,在DOM元素中不能写成方法。它随依赖的值变化而变化。计算属性中的this指向是Vue对象实例,因此可以很方便计算。

3. 计算属性简写

只读不改时,即不需要setter时,才可以简写。

十、监视属性

1. 基本用法

监视属性watch:使用handler方法

第二种写法通过vm.$watch监视:

备注:要写在Vue实例对象外面。监视的属性可以是计算属性

注意:在Vue控制台里,如果页面没有改变的属性,就算改变了属性的值,也不会在控制台里显示。

2. 深度监视

Vue中的watch默认不监测对象内部值的改变(一层)。配置deep:true可以监测对象内部值改变(多层)。

备注

(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!

(2)使用watch时根据数据的具体结构,决定是否采用深度监视。

注意:监视多级结构的某个属性要加单引号

3. 监视属性的简写

当配置项中不需要deepimmediate时,可以简写。

vm.$watch的简写形式:

切记不要写成箭头函数。被Vue所管理的函数都不推荐写成箭头函数。

4. 计算属性与监视属性

在某些场合下,可以用计算属性与监视属性来实现相同的效果。

如用wacth来实现修改姓名plus版案例:

请注意,这里的异步任务使用了箭头函数。如果不用箭头函数,this将执行异步任务的调用者,即window

当有异步任务时,只能用watch,无法用计算属性实现。

对比总结

备注

十一、绑定样式

1. class绑定样式

实现样式的切换和添加效果,使用:class。由Vue来管理这些样式。

总结

2. style绑定样式

备注

可以把样式属性写在元素里面,如:style="{fontSize: xxx+'px'}"其中xxx是动态值。

还可以写成:style="[a,b]",其中ab是样式对象。

十二、条件渲染

顾名思义,就是跟条件逻辑有关。这里主要讲v-ifv-show的用法。

v-if

适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除

在引号内部可以写逻辑语句,最后的结果要求是布尔类型的值。

另外可以配合v-elsev-else-if来使用。

可以当作普通的if...else if...else结构来分析。

注意:中间不能被打断,比如在v-ifv-else之间参杂了其它元素。

另外可以配合template来使用,最后template不会出现在页面结构上。

v-show

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉。

备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

十三、列表渲染

1. v-for指令

用于展示列表数据。可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

例子:

注意:必须要由:key值,且是唯一。原因后续会提到。

其它例子:

2. key的原理

虚拟DOM中key的作用:key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据新数据生成新的虚拟DOM, 随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。

bad

029c0c11f46cd856079f1f51ae327687.jpg

缺点:若插入新元素时打乱顺序,则效率低下。

good

382491e9cb205dbfb7def456dbcbe2c0.jpg

优点:复用率高,提升效率。

对比算法就是diff算法,是Vue内部的处理算法。

对比规则

若虚拟DOM中内容没变, 直接使用之前的真实DOM;若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

创建新的真实DOM,随后渲染到到页面。

用index作为key可能会引发的问题

会产生错误DOM更新,导致界面有问题。

开发中如何选择key

3. 列表过滤

实现模糊搜索效果。

c4f7f364fae273a300032db94a093173.jpg

c5d9079d8bfb185b3baeb4017833689d.jpg

使用watch实现:

容器内部

Vue实例对象内部

注意indexOf函数对于空字符串即'',返回值依然是0。

computed实现:

备注filter内需要使用箭头函数,否则this指向会指向window

总结computed要简单很多。

4. 列表排序

实现点击按钮对查找后的元素进行排序,还可以复原位置。

将排序方法放到过滤语句的后面:

通过改变计算属性来实现变化效果,从而不会影响原数据。这就是Vue的优势。

5. Vue监视数据原理

以下代码模拟了Vue源码是怎么监视对象的:(响应式)

真实的Vue源码要比这个完善很多,如可以通过vm.属性名来修改属性值,又或者可以为深层次的属性创建getset方法。

以下代码演示了Vue如何给对象后天添加属性:

以下代码演示了Vue是怎么改变数组元素的:(响应式)

注意:Vue没有为数组里的元素提供get和set,是用操作数组的方法。如push、pop、splice、shift、unshift、sort、reverse

在控制台输入:

Vue对数组的监视是通过对数组常用操作的包装来实现的。

总结

(1) 对象中后追加的属性,Vue默认不做响应式处理

(2) 如需给后添加的属性做响应式,请使用如下API:

(1) 调用原生对应的方法对数组进行更新。

(2) 重新解析模板,进而更新页面。

(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

(2)Vue.set()vm.$set()

特别注意:Vue.set()vm.$set() 不能给vm 或 vm的根数据对象添加属性!!!

十四、收集表单数据

1. 单选框

v-model收集的是value值,且要给标签配置value值。

如:

2. 多选框

如:

若v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)

如:

若v-model的初始值是数组,那么收集的的就是value组成的数组

如:

3. v-model的三个修饰符

lazy:失去焦点再收集数据

number:输入字符串转为有效的数字

trim:输入首尾空格过滤

如:

十五、过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

1. 注册过滤器

第一种:

全局过滤器必须要定义在new Vue之前。

第二种:

注意:如果是局部过滤器的话,其它组件是用不了这个过滤器的。

2. 使用过滤器

如:

备注

十六、其它内置指令

1. v-text

作用:向其所在的节点中渲染文本内容。

与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

2. v-html

作用:向指定节点中渲染包含html结构的内容。

v-text的区别:v-html可以识别html结构

注意v-html有安全性问题,在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

3. v-cloak

作用:解决网速过慢时,页面上出现未经Vue解析的模板。

本质是一个特殊属性,Vue实例创建完毕并接管容器后,会自动删掉v-cloak属性。

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

4. v-once

v-once所在节点在初次动态渲染后,就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

5. v-pre

作用:跳过其所在节点的编译过程。可利用它跳过没有使用指令语法、没有使用插值语法的节点,会加快编译。

十七、自定义指令

顾名思义,将自己特殊的需求单独定义为一个指令。

1. 简写形式

将自己自定义的指令放在Vue配置对象中,以方法的形式书写,方法名不需要写v-xxx,而是直接写xxx

element是真实的DOM对象;binding是绑定时指令与DOM对象的关系。

备注:将值插入到页面中必须要用element.innerText,而不能用return

使用:

注意:在自定义的指令中,this的执行永远是window,因为需要用到vm对象里的值时,已经全部放在value里了。

2. 完整形式

针对特殊的功能需求,如为input默认获取焦点,需要完整的自定义指令的方法。

Vue将其分为了三个阶段,分别是绑定时、插入元素时、更新元素时。

备注:如同自动获取焦点和获取父元素等功能,都需要放在插入元素阶段才能奏效。

注意:指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。如'big-number'(){}v-big-number="n"

3. 全局与局部指令

局部指令就是如同上面的例子直接写到Vue配置对象中:

全局指令

Vue.directive(指令名,配置对象)Vue.directive(指令名,回调函数)

如:

十八、生命周期

又名:生命周期回调函数、生命周期函数、生命周期钩子。

作用:Vue在关键时刻帮我们调用的一些特殊名称的函数。

生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

f6b5c0f65d0dbac2fd7922c37a72f0e0.png

注意:生命周期函数中的this指向是vm 或 组件实例对象。

常用的生命周期钩子:

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例:

例子:

备注template也是一个配置对象。它会替换掉<div id="root"></div>全部内容,并且id将会消失。

二、组件化编程

组件就是一块砖,哪里需要哪里搬。

一、组件定义

1. 组件是什么

用来实现局部(特定)功能效果的代码集合。

8d85a18e68239c4d31b1622f73409b08.jpg

02fba60ec4a0a92b368e1801c48ef1da.jpg

2. 作用

提高代码复用率,简化项目编码, 提高运行效率

3. 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

二、非单文件组件

Vue中使用组件的三大步骤:定义组件(创建组件)、注册组件、使用组件(写组件标签)。

1. 定义组件

使用Vue.extend(options)创建,其中optionsnew Vue(options)时传入的那个options几乎一样,但也有点区别。

备注:

data必须写成函数,为什么?

避免组件被复用时,数据存在引用关系。

el不要写,为什么?

最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

2. 注册组件

局部注册:靠new Vue的时候传入components选项

全局注册:靠Vue.component('组件名',组件)

3. 使用组件

同名组件的属性不会冲突,因为在定义时是return了一个对象。

4. 注意事项

关于组件名

第一种写法(首字母小写):school

第二种写法(首字母大写):School

第一种写法(kebab-case命名):my-school

第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

备注:组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

关于组件标签

第一种写法:<school></school>

第二种写法:<school/>

备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

一个简写方式

const school = Vue.extend(options) 可简写为:const school = options,如:

备注:可以使用name配置项指定组件在开发者工具中呈现的名字。

如:

5. 组件嵌套

例子:让school里嵌套student,并且hello与school平级关系。

要注意被嵌套的组件使用的位置是在父级组件模板上。

在实际开发中,更常见的是vm会管理app组件,而app组件会控制所有组件。如同皇上、丞相、三省六部之间的关系。

6. VueComponent

组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

我们只需要写<school/><school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

注意:每次调用Vue.extend,返回的都是一个全新的VueComponent

组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数。它们的this均是VueComponent实例对象

new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象

备注:VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm

7. 内置关系(重要)

需要回顾原型链基础知识:https://www.zjgsuzjx.top/md/JavaScript%E9%AB%98%E7%BA%A7.html#8-%E5%8E%9F%E5%9E%8B%E9%93%BE

以及回顾成员查找机制:https://www.zjgsuzjx.top/md/JavaScript%E9%AB%98%E7%BA%A7.html#9-javascript-%E7%9A%84%E6%88%90%E5%91%98%E6%9F%A5%E6%89%BE%E6%9C%BA%E5%88%B6%E8%A7%84%E5%88%99

一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype

VueComponent和Vue之间关系图

3ac0764798b47ec0bd081797a038b2f2.jpg

作用:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

三、单文件组件

1. 模板

2. 例子

School.vue

App.vue(用来汇总所有的组件)

main.js(引入App大组件,并创建Vue实例)

index.html

注意:这样还不能执行代码,需要Vue脚手架。

三、Vue脚手架

一、初始化脚手架

1. 脚手架概念

CLI=command line interface

Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。

官方中文文档: https://cli.vuejs.org/zh/

2. 具体步骤

npm install -g @vue/cl

vue create xxxx

npm run serve

三步全部完成后的样子:

d59a78a0ca9c2ebd450d25af3b385bb3.jpg

3. 模板目录分析

├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git 版本管制忽略的配置 ├── babel.config.js: babel 的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json:包版本控制文件

4. render函数

render函数出现在main.js入口文件。

完整版写法是:

因为引入的并不是完整版的Vue,所以需要render作为模板解析器来解析。

关于不同版本的Vue

(1)vue.js是完整版的Vue,包含:核心功能+模板解析器。

(2)vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。

二、关键属性

1. 修改默认配置

新建一个vue.config.js文件,并且放在与package.json同级目录下。以下是部分被修改的配置:

Vue脚手架隐藏了所有webpack相关的配置,若想查看具体的webpack 配置,请执行:vue inspect > outp

更多config文件个性化定制可见:https://cli.vuejs.org/zh/config/#vue-config-js

2. ref属性

被用来给元素子组件注册引用信息(id的替代者)

如:

应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)

使用方式总结:

(1)打标识:<h1 ref="xxx">.....</h1><School ref="xxx"></School>

(2)获取:this.$refs.xxx

3. props配置

功能:让组件接收外部传过来的数据,从而方便使用。

传递数据方式:

接收数据方式:

备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,则需要复制props的内容到data中一份,然后去修改data中的数据。

如:

4. mixin混合

功能:可以把多个组件共用的配置提取成一个混入对象,如datamethods等等。

使用方式

创建mixin.js文件,代码示例如下:

局部混入例子:(写在组件里)

全局混入例子:(写在main.js里)

备注:混入的意思相当于并集,并不会替换到组件里的配置。

注意:如果混入的配置属性和组件里的属性同名,则以组件为主,但是对于生命周期钩子,两者都会调用,而且组件定义的钩子后于混入的钩子被调用。

三、插件

功能:用于增强Vue,往Vue身上增加配置,之后可以在所有组件中可以全局使用这些配置。

本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

定义插件:创建plugins.js文件。

使用插件:在main.js引入

四、scoped样式

作用:让样式在局部生效,防止冲突。

写法:实例如下

补充:另外还有另外一种属性lang,是language的缩写。

如:

上面的lang="less"表示这个样式是less写法,默认是css写法。(不能直接编译,脚手架less版本有问题)

五、Todo-List案例

在学习下面小节之前,需要先学习制作该案例。https://www.bilibili.com/video/BV1Zy4y1K7SH?p=70(一直学习到P77)

1. 本地存储

含义:将页面内产生的数据保存在浏览器中。存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。分为SessionStorageLocalStorage

方法

区别

SessionStorage存储的内容会随着浏览器窗口关闭而消失。

LocalStorage存储的内容,需要手动清除才会消失。

备注

xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null

JSON.parse(null)的结果依然是null

2. 组件的自定义事件

含义:一种组件间通信的方式,适用于:子组件 ===> 父组件。

使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。

绑定自定义事件

触发自定义事件

解绑自定义事件

备注:组件上也可以绑定原生DOM事件,需要使用native修饰符。

如:

注意:也可以通过this.$refs.xxx.$on('demo',回调)绑定自定义事件。但是回调要么配置在methods中要么用箭头函数,否则this指向会出问题!

3. 全局事件总线(GlobalEventBus)

作用:一种组件间通信的方式,适用于任意组件间通信

安装全局事件总线

备注:为了能让所有的vc实例能够使用$bus,必须要将它绑定在Vue原型对象上面,原理是原型链的查找规则。这样在所有组件之间实现通信。

使用事件总线

哪里接受数据,就在哪里绑定事件。

4. 消息订阅与发布(pubsub)

作用:一种组件间通信的方式,适用于任意组件间通信。与全局事件总线的作用是一样的。

使用步骤

注意msgName是订阅名,没有其它作用,第二个参数及以后才是传过来的数据。此外还必须写成箭头函数。

实际中可以这么写:(_表示占位)

备注:这种方式用来组件间通信使得很少,一是开发者工具不支持这种,二是全局事件总线也可以做到一样的功能。

5. nextTick

作用:在下一次 DOM 更新结束后执行其指定的回调。适用于等模板解析完之后再执行函数内特定的功能的场合。

语法:this.$nextTick(回调函数)

比如:需要等input框被重新渲染在页面上后再自动获取焦点(如果没有这个函数则会导致input框没有出现就获取焦点从而报错)

总结:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

6. 动画效果

原理:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名,从而达到动画的效果。

使用active

备注appear表示页面一刷新就出现动画。使用<transition>包裹要过度的元素,并配置name属性。

完整写法

利用第三方动画库

网站指南:https://animate.style/

安装:npm install animate.css

引入:哪个组件用,在哪里引入

使用例子:

四、Vue中的ajax

一、作用

主要是为了解决ajax请求的跨域问题,Vue脚手架有专门处理跨域请求的方法。

二、第一种配置方式

使用Vue-cli的devServer.proxy配置,详细见https://cli.vuejs.org/zh/config/#devserver-proxy

原理:利用cli搭建出一个微型的服务器代理(类似于Nginx),然后前端通过axios向cli搭建的服务器发送请求,该服务器再向真正需要请求的服务器发送请求。

步骤

首先需要在vue.config.js里配置代理信息。

然后在App组件里写以下代码:

说明

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可。
  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源,就是public

三、第二种配置方式

首先需要在vue.config.js里配置代理信息。

备注pathRewrite必写,否则会以为在服务器里找/api

然后在App组件里写以下代码:

说明

  1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
  2. 缺点:配置略微繁琐,请求资源时必须加前缀。

四、GitHub用户搜索案例

1. 预习准备

复习知识点:https://es6.ruanyifeng.com/#docs/object#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6

github官方搜索用户名的API接口:https://api.github.com/search/users?q=xxx

2. 布局分析

图例如下:可以分为两个小组件。分别是Search组件和List组件。

d219b3abf8937598931859752a57dbb3.jpg

b29822d3990e336e761062b24d2595ae.jpg

3. 程序设计

List.vue

备注:设置info是为了使用扩展运算符

Search.vue

备注:由于GitHub已经在开放的API上解决好了跨域问题,所以不需要单独设置。

4. Vue-resource

Vue-resource是一个类似于axios的发送请求的插件,目前用的并不多。

下载:npm i vue-resource

main.js中引入

剩下的只需要把axios换成this.$http就可以了。

五、插槽

作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件

分类:默认插槽、具名插槽、作用域插槽

1. 默认插槽

备注:模板解析完后再传过去的。也就是style放在这里也是能生效的。

备注slot优先会调用组件内的内容,其次才是slot内的内容。

2. 具名插槽

备注:常用在组件需要多个插槽时,通过命名插槽的方式来指定对应部分。

3. 作用域插槽

上面还有特殊写法:

category组件:

备注:由于数据全部放在组件里,因此在App.vue里使用数据时,并且有特殊的使用方法,将数据能够从组件传递到App。

五、vuex

一、基本概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

用于多个组件需要共享数据时

二、工作原理

e6a6e835d98bdf88b2344e46b6aa19db.png

解释state会存储数据,当组件调用dispatch时,会触发一系列行为。首先是会经过actions,这个actions承担服务员的任务,会调用一些特殊的API。然后会经过Mutations,起到修改数据等具体数据的各种操作。然后传递给State真正会修改数据,最后会重新渲染页面。

备注:如果不发送ajax请求或需要判断的业务逻辑(如等一下时间再处理数据),也可以省略actions

注意ActionsMutationsState都是对象数据类型,都要经过store统一管理。因为诸如dispatchcommit方法都是由store提供的。所有的vc、vm对象都要能看到store!!

三、环境搭建

1. 安装

因为是插件,所以需要下载vuex:npm i vuex

2. 文件创建

创建文件:src/store/index.js

main.js中创建vm时传入store配置项:

四、求和案例vuex版

actions

context可以译为上下文。

备注:如果由多个业务逻辑,还可以有以下写法:(类似链式)

mutations

state

组件内

五、vuex开发者调试工具

6e727117792e989df7c2f2b5c6c208f3.png

六、getters配置

不是必须要使用的vuex配置。和计算属性有些像,为了不把运算放到插值语法中。

七、四个map方法的使用

1. mapState

用于帮助我们映射state中的数据为计算属性。可以帮助我们自动生成代码。

注意:不能生成带有getters的代码。

首先需要在组件内引入:

在组件内的计算属性内写:(注意要写在computed里。)

备注:...是解构赋值。如果借助于这种写法,开发者工具会专门有地方记录这些特殊的计算属性。

2. mapGetters

专门生成带有getters的代码。用于帮助我们映射getters中的数据为计算属性。

注意要写在computed里。

3. mapActions

用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数。

注意要写在methods里。

备注:需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。下面的mapMutations也是同理。

4. mapMutations

用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数。

注意要写在methods里。

八、vuex模块化编码

1. 概念

目的:让代码更好维护,让多种数据分类更加明确。

2. 具体操作示例

首先需要修改store.js(即store文件夹下的index.js

进阶做法:将其按照模块拆分成不同的文件,最后在index.js汇总计课。

模块1.js

模块2.js

index.js

开启命名空间后,组件中读取state数据:

开启命名空间后,组件中读取getters数据:

开启命名空间后,组件中调用dispatch