vue2-(学习笔记)

目录

一、vue简介

        1.什么是vue

         2.vue的特性

                2.1 数据驱动视图

                2.2 双向数据绑定

                2.3 MVVM

                 2.4 MVVM 的工作原理

二、vue的基本使用

        1. 基本使用步骤

        2. 基本代码与MVVM的对应关系

三、vue的调试工具

        1. 下载工具

        2. 设置工具

四、vue的指令与过滤器

        1. 指令的概念

                1.1 内容渲染指令

                1.2 属性绑定指令

                1.3 事件绑定指令

                1.4 双向绑定事件

                1.5 条件渲染指令

                1.6 列表渲染指令

                案例：（品牌列表）

        2.过滤器 （vue3 中已经没有了 ）

                2.1 定义过滤器

                2.2 私有过滤器和全局过滤器

                2.3 连续调用多个过滤器

                2.4 过滤器传参

                2.5 过滤器的兼容性

五、侦听器

        1. 什么是watch侦听器

        2. immediate 选项

        3. deep选项

        4. 监听对象单个属性变化

六、计算属性

        1. 什么是计算属性

        2. 计算属性的特点

七、vue-cli

        1. 什么是单页面应用程序

         2. 什么是 vue-li

        3. 安装和使用

        4. vue 项目的运行流程

八、vue组件

        1.什么是组件化开发

        2. vue中的组件化开发

        3. vue组件的三个组成部分

                3.1 template

                3.2 script

                 3.3.vue 组件中的data必须是函数

                3.4 style

                 3.5 让style中支持less语法

         4. 组件之间的父子关系

                 4.1 使用组件的三个步骤

                4.2 通过components 注册的是私有组件

                4.3 注册全局组件

        5. 组件的props

                5.1 props 是只读的

                 5.2 props的default默认值

                 5.3 props 的 type值类型

                5.4 props的required必填项

        6. 组件之间的样式冲突问题

                6.1 要如何解决样式冲突的问题

                 6.2 style 节点的 scoped 属性

                6.3 /deep/ 样式穿透

九、生命周期

        1. 组件的生命周期

                1.1 生命周期&生命周期函数

                1.2 组件的生命周期函数的分类

                1.3 生命周期图示

        2. 组件之间的数据共享

                2.1 组件之间的关系

                2.2 父子组件之间的数据共享

                        2.2.1 父组件向子组件共享数据

                        2.2.2 子组件向父组件共享数据

                2.3 兄弟之间的数据共享

                EvenBus 的使用步骤

        3. ref引用

                3.1 什么是ref引用

                 3.2 使用ref引用DOM元素

                3.3 使用ref引用组件实例

                3.4 控制文本框和按钮的按需切换

                 3.5 让文本框自动获得焦点

                3.6 this.$nextTick(cb)方法

        4. 对数组进行复习

                        some方法

                        every方法

                        reduce方法

十、动态组件

        1. 什么是动态组件

        2. 如何实现动态组件渲染

         3. 使用 keep-alive 保持状态

        4. keep-alive 对应的生命周期函数

         5. keep-alive 的 include 属性

         总结:

十一、插槽

        1. 什么是插槽

        2. 体验插槽的基础用法

                 2.1 没有预留插槽的内容会被丢弃

                 2.2 后备内容

         3. 具名插槽

                3.1 为具名插槽提供内容

                3.2 具名插槽的简写形式

         4. 作用域插槽

                 4.1 使用作用域插槽

                 4.2 解构插槽

         总结:

十二、自定义指令

        1. 什么是自定义指令

        2. 自定义指令的分类

        3.私有自定义指令

         4.使用自定义指令

         5.为自定义指令动态绑定参数值

        6.通过binding获取指令的参数值

         7.updte 函数

         8.函数简写

         9.全局自定义指令

         总结:

十三、路由

        1.前端路由的概念与原理

                1.1 什么是路由

                1.2 SPA 与前端路由

                1.3 什么是前端路由

                1.4 前端路由的工作方式

                1.5 实现简单的前端路由

        2.vue-router 的基本使用

                1. 什么是vue-ruoter

                2. vue-router包

                        2.1 在项目中安装vue-router

                         2.2 创建路由模块

                        2.3 导入并且挂在路由模块

                        2.4 声明路由连接和占位符

                 3. 声明路由的匹配规则

        3.vue-router 的常见用法

                1.路由重定向

                2. 嵌套路由

                3. 声明子路由连接和子路由占位符

                        3.1 通过children属性声明子路由规则

                4. 动态路由匹配

                        4.1 动态路由的概念

                        4.2 $ router.params 参数对象

                        4.3 使用 props 接收路由参数

                5. 声明式导航&编程式导航

                        5.1 vue-router 中的编程时导航API

                        5.2 $router.push

                         5.3 $router.replace

                        5.4 $router.go

                        5.5 $router.go的简化用法

                6. 导航守卫

                        6.1 全局前置守卫

                        6.2 守卫方法的3个参数

                        6.3 next函数的三种调用方式

                        6.4 控制后台主页的访问权限

---

一、vue简介

        1.什么是vue

         2.vue的特性

vue 框架的特性，主要体现在如下两方面：

① 数据驱动视图

② 双向数据绑定

                2.1 数据驱动视图

                2.2 双向数据绑定

                 

                2.3 MVVM

                 2.4 MVVM 的工作原理

        

二、vue的基本使用

        1. 基本使用步骤

        2. 基本代码与MVVM的对应关系

三、vue的调试工具

        1. 下载工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器 在线安装 vue-devtools ：

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

FireFox 浏览器 在线安装 vue-devtools ：

https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

        2. 设置工具

四、vue的指令与过滤器

        1. 指令的概念

        指令（Directives） 是 vue 为开发者提供的 模板语法 ，用于 辅助开发者渲染页面的基本结构 。

vue 中的指令 按照不同的用途 可以分为如下 6 大类：

① 内容渲染 指令

② 属性绑定 指令

③ 事件绑定 指令

④ 双向绑定 指令

⑤ 条件渲染 指令

⑥ 列表渲染 指令

                1.1 内容渲染指令

内容渲染指令 用来辅助开发者 渲染 DOM 元素的文本内容 。常用的内容渲染指令有如下 3 个：

⚫ v-text

⚫ {{ }}

⚫ v-html

v-text

 

{{}}

v-html

                1.2 属性绑定指令

 

                1.3 事件绑定指令

 

 

        

                

例：

        事件修饰符 ：

        按键修饰符：

                1.4 双向绑定事件

 例：

 

                1.5 条件渲染指令

 

                1.6 列表渲染指令

例：

                案例：（品牌列表）

        2.过滤器 （vue3 中已经没有了 ）

过滤器 （ Filters ）是 vue 为开发者提供的功能，常用于 文本的格式化 。过滤器可以用在两个地方： 插值表达式

和 v-bind 属性绑定 。

过滤器应该被添加在 JavaScript 表达式的 尾部 ，由“ 管道符 ”进行调用，示例代码如下：

                

                2.1 定义过滤器

        

例：

                2.2 私有过滤器和全局过滤器

全局过滤器是在main.js中定义的

 例;(就近原则 有私有的先用私有的)

                2.3 连续调用多个过滤器

                2.4 过滤器传参

                2.5 过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中 剔除了过滤器 相关的功能。

在企业级项目开发中：

⚫ 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能

⚫ 如果项目已经升级到了 3.x 版本的 vue，官方建议使用 计算属性 或 方法 代替被剔除的过滤器功能

具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：

https://v3.vuejs.org/guide/migration/filters.html#migration-strategyww2
 

 

五、侦听器

        1. 什么是watch侦听器

watch 侦听器 允许开发者监视数据的变化，从而 针对数据的变化做特定的操作 。

语法格式如下：

         

        2. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器 立即被调用 ，则需要使

用 immediate 选项。示例代码如下：

        3. deep选项

如果 watch 侦听的是一个对象 ，如果 对象中的属性值发生了变化 ，则 无法被监听到 。此时需要使用 deep 选

项 ，代码示例如下：

        

        4. 监听对象单个属性变化

 总结：

1. 方法格式的侦听器
   + 缺点1：无法在刚进入页面的时候，自动触发！！！
   + 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
2. 对象格式的侦听器
   + 好处1：可以通过 **immediate** 选项，让侦听器自动触发！！！
   + 好处2：可以通过 **deep** 选项，让侦听器深度监听对象中每个属性的变化！！！

六、计算属性

        1. 什么是计算属性

计算属性指的是 通过一系列运算 之后，最终得到一个 属性值 。

这个动态计算出来的属性值 可以被模板结构或 methods 方法使用。示例代码如下：

       

        2. 计算属性的特点

① 虽然计算属性在 声明的时候 被定义为 方法 ，但是计算属性的 本质是一个属性

② 计算属性会 缓存计算的结果 ，只有计算属性 依赖的数据变化时 ，才会重新进行运算

      例： 

总结:

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

七、vue-cli

        1. 什么是单页面应用程序

         2. 什么是 vue-li

vue-cli 是 Vue.js 开发的标准工具 。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话：

程序员可以 专注在撰写应用上 ，而不必 花好几天 去 纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

        3. 安装和使用

vue-cli 是 npm 上的一个 全局包 ， 使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：

vue create 项目的名称

 vue-cli 的使用

1. 在终端下运行如下的命令，创建指定名称的项目：
   vue cerate 项目的名称

2. vue 项目中 src 目录的构成：
   assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
   components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
   main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
   App.vue 是项目的根组件。
 

        4. vue 项目的运行流程

在工程化的项目中， vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

① App.vue 用来编写待渲染的 模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

八、vue组件

        1.什么是组件化开发

组件化开发 指的是：根据 封装 的思想， 把页面上可重用的 UI 结构封装为组件 ，从而方便项目的开发和维护。

        2. vue中的组件化开发

vue 是一个 支持组件化开发 的前端框架。

vue 中规定： 组件的后缀名 是 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

        3. vue组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

 template -> 组件的 模板结构

 script -> 组件的 JavaScript 行为

 style -> 组件的 样式

其中， 每个组件中必须包含 template 模板结构 ，而 script 行为 和 style 样式 是 可选的 组成部分。

                3.1 template

                3.2 script

                 3.3.vue 组件中的data必须是函数

vue 规定： .vue 组件中的 data 必须是一个函数 ， 不能 直接 指向一个数据对象 。

因此在组件中定义 data 数据节点时，下面的方式是 错误的 ：

会导致 多个组件实例 共用 同一份数据 的问题.

                3.4 style

                 3.5 让style中支持less语法

         4. 组件之间的父子关系

                 4.1 使用组件的三个步骤

                4.2 通过components 注册的是私有组件

例如：

在 组件 A 的 components 节点下，注册了 组件 F 。

则组件 F 只能用在组件 A 中；不能被用在 组件 C 中

                4.3 注册全局组件

        5. 组件的props

                5.1 props 是只读的

                 5.2 props的default默认值

                 5.3 props 的 type值类型

                5.4 props的required必填项

        6. 组件之间的样式冲突问题

                6.1 要如何解决样式冲突的问题

                 6.2 style 节点的 scoped 属性

                6.3 /deep/ 样式穿透

九、生命周期

        1. 组件的生命周期

                1.1 生命周期&生命周期函数

生命周期 （ Life Cycle ）是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段， 强调的是一个时间段 。

生命周期函数 ：是由 vue 框架提供的 内置函数 ，会伴随着组件的生命周期， 自动按次序执行 。

注意： 生命周期 强调的是 时间段 ， 生命周期函数 强调的是 时间点 。

                1.2 组件的生命周期函数的分类

                1.3 生命周期图示

可以参考 vue 官方文档给出的“生命周期图示” 进一步理解组件生命周期执行的过程：

https://v2.cn.vuejs.org/v2/guide/instance.html

分析：

        2. 组件之间的数据共享

                2.1 组件之间的关系

                        

                2.2 父子组件之间的数据共享

                父子组件之间的数据共享又分为：

                        ① 父 -> 子 共享数据

                        ② 子 -> 父 共享数据

        

                        2.2.1 父组件向子组件共享数据

                        2.2.2 子组件向父组件共享数据

                2.3 兄弟之间的数据共享

                EvenBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据 发送方 ，调用 bus.$emit (' 事件名称 ', 要发送的数据 ) 方法 触发自定义事件

③ 在数据 接收方 ，调用 bus.$on (' 事件名称 ', 事件处理函数 ) 方法 注册一个自定义事件

        3. ref引用

                3.1 什么是ref引用

                 3.2 使用ref引用DOM元素

                3.3 使用ref引用组件实例

                 

例：

                3.4 控制文本框和按钮的按需切换

                 3.5 让文本框自动获得焦点

                3.6 this.$nextTick(cb)方法

        

        4. 对数组进行复习

                        some方法

1.数组some方法作用

判断数组中是否有满足条件的元素
2.语法:array.some( function ( item, index, arr) {} ,thisValue)

function : 必须,数组中的每个元素都会执行这个函数

        第一个参数:item,必须,当前元素的值

        第二个参数:index,可选,当前元素在数组中的索引值

        第三个参数:arr,当前元素属于的数组对象

thisValue : 可选,对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"
3.some方法特点

(1)函数执行次数 !== 数组长度

(2)函数内部的return

        return true : 循环结束,找到了满足条件的元素

        return false : 循环继续,没找到循环继续,如果所有元素全部遍历还是没找到,最终结果为false

(3)some方法的返回值

        true : 有没有满足条件的元素

        false : 没有满足条件的元素
4.注意点:

(1)some()方法不会对空数组进行检测

(2)some()方法不会改变原始数组

                        every方法

1.every数组方法的作用

判断数组中是否所有元素都满足条件
2.语法:array.every( function ( item, index,arr) {} )

第一个参数: item,必须,当前元素的值

第二个参数 : index,可选,当前元素在数组中的索引值

第三个参数 : arr,当前元素所处的数组对象
3.every方法特点

(1)循环次数 !== 数组长度

(2)函数内部的return

return true : 循环继续 当前元素满足条件,继续判断,如果循环执行完毕还是true,则every的返回值就是true

return false : 循环结束,当前元素不满足条件,every的返回值也是false

(3)every方法的返回值

return true : 全部元素都满足条件

return false : 有元素不满足条件
4.注意点:

(1)every()方法不会对空数组进行检测

(2)every()方法不会改变原始数组

                        reduce方法

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数：

用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

注意:

reduce() 对于空数组是不会执行回调函数的。

                

十、动态组件

        1. 什么是动态组件

        动态组件指的是 动态切换组件的显示与隐藏 。

        

        2. 如何实现动态组件渲染

         3. 使用 keep-alive 保持状态

        4. keep-alive 对应的生命周期函数

         5. keep-alive 的 include 属性

例：

拓展：

         总结:

能够掌握 keep-alive 元素的基本使用

⚫ <keep-alive> 标签、include 属性

十一、插槽

        1. 什么是插槽

        2. 体验插槽的基础用法

                 2.1 没有预留插槽的内容会被丢弃

                 2.2 后备内容

         3. 具名插槽

如果在封装组件时 需要预留多个插槽节点 ，则需要为每个 <slot> 插槽指定 具体的 name 名称 。这种 带有具体名称的插槽 叫做“具名插槽”。示例代码如下：

注意：没有指定 name 名称的插槽，

会有隐含的名称叫做 “ default ”。

                3.1 为具名插槽提供内容

例：

                3.2 具名插槽的简写形式

         4. 作用域插槽

                 4.1 使用作用域插槽

例:

                 4.2 解构插槽

 例:

         总结:

 

 能够掌握 插槽 的基本用

⚫ <slot> 标签、具名插槽、 作用域插槽 、后备内容

 能够知道如何 自定义指令

十二、自定义指令

        1. 什么是自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

        2. 自定义指令的分类

vue 中的自定义指令分为两类，分别是：

⚫ 私有 自定义指令

⚫ 全局 自定义指令

        3.私有自定义指令

         4.使用自定义指令

         5.为自定义指令动态绑定参数值

        6.通过binding获取指令的参数值

         7.updte 函数

         8.函数简写

         9.全局自定义指令

例：

         总结:

⚫ 私有自定义指令 directives: { }

⚫ 全局自定义指令 Vue.directive()

        

十三、路由

        1.前端路由的概念与原理

                1.1 什么是路由

路由（英文：router）就是对应关系。

                1.2 SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面， 所有组件的展示与切换 都在这唯一的一个页面内完成。

此时， 不同组件之间的切换 需要通过 前端路由 来实现。

结论：在 SPA 项目中， 不同功能之间的切换 ，要 依赖于前端路由 来完成！

                1.3 什么是前端路由

通俗易懂的概念： Hash 地址 与 组件 之间的 对应关系 。

                1.4 前端路由的工作方式

① 用户 点击了 页面上的 路由链接

② 导致了 URL 地址栏 中的 Hash 值 发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件 渲染都浏览器中

 结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

                1.5 实现简单的前端路由

 

 

                

        2.vue-router 的基本使用

                1. 什么是vue-ruoter

vue-router 是 vue.js 官方给出的 路由解决方案 。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

               

                2. vue-router包

① 安装 vue-router 包

② 创建路由模块

③ 导入并挂载路由模块

④ 声明 路由链接 和 占位符

                

                        2.1 在项目中安装vue-router

                         2.2 创建路由模块

                        2.3 导入并且挂在路由模块

                        2.4 声明路由连接和占位符

                 3. 声明路由的匹配规则

        3.vue-router 的常见用法

                1.路由重定向

路由重定向 指的是：用户在访问 地址 A 的时候， 强制用户跳转 到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

                2. 嵌套路由

                3. 声明子路由连接和子路由占位符

在 About.vue 组件中，声明 tab1 和 tab2 的 子路由链接 以及 子路由占位符 。示例代码如下：

                        3.1 通过children属性声明子路由规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性 声明子路由规则：

默认子路由：

                4. 动态路由匹配

                        4.1 动态路由的概念

动态路由指的是：把 Hash 地址中 可变的部分 定义为 参数项 ，从而 提高路由规则的复用性 。

在 vue-router 中使用 英文的冒号 （ : ）来定义路由的参数项。示例代码如下：

                       

                        4.2 $ route.params 参数对象

                        4.3 使用 props 接收路由参数

                        拓展：查询参数

                5. 声明式导航&编程式导航

在浏览器中， 点击链接 实现导航的方式，叫做 声明式导航 。例如：

⚫ 普通网页中点击 <a> 链接 、vue 项目中点击 <router-link> 都属于声明式导航

在浏览器中， 调用 API 方法 实现导航的方式，叫做 编程式导航 。例如：

⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

                        5.1 vue-router 中的编程时导航API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router. push ('hash 地址')

⚫ 跳转到指定 hash 地址，并 增加 一条历史记录

② this.$router. replace ('hash 地址')

⚫ 跳转到指定的 hash 地址，并 替换掉当前的 历史记录

③ this.$router. go (数值 n)

⚫ 实现导航历史前进、后退

                        5.2 $router.push

                         5.3 $router.replace

调用 this. $router . replace () 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。

push 和 replace 的区别：

⚫ push 会 增加一条历史记录

⚫ replace 不会增加历史记录，而是 替换掉当前的历史记录

                        5.4 $router.go

                        5.5 $router.go的简化用法

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router. back ()

⚫ 在历史记录中， 后退 到上一个页面

② $router. forward ()

⚫ 在历史记录中， 前进 到下一个页面

例如：

                6. 导航守卫

                        6.1 全局前置守卫

                        6.2 守卫方法的3个参数

                        6.3 next函数的三种调用方式

                        6.4 控制后台主页的访问权限

例：