Vue相关笔记

一、webpack 基础使用

1.1 下载webpack包

1.初始化包环境
2.安装依赖包

1.2 安装 vue/cli 全局包

二、vue指令

2.1 插值表达式

2.2 MVVM 设计模式

• MVVM，一种软件架构模式，决定了写代码的思想和层次
  • M： model数据模型 (data里定义)
  • V： view视图 （html页面）
  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
  • V（修改视图） -> M（数据自动同步）
  • M（修改数据） -> V（视图自动同步）

2.3 v-bind语法和简写

目标: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

2.4 v-on 语法及简写

简写：

• 语法
  • v-on:事件名=“要执行的少量代码”
  • v-on:事件名=“methods中的函数”
  • v-on:事件名=“methods中的函数(实参)”
• 简写: @事件名=“methods中的函数”

2.5 v-on修饰符

2.6 键盘事件修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

• 语法:
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键

2.7 学习方法：

学习方法 = 多思考 + 多练习 + 多总结

刻意练习 = 有效的方法 + 大量的重复 + 及时的反馈

2.8 v-model 语法

遇到复选框，v-model 的变量值 ：
非数组 ------- 关联的是复选框的checked属性
数组--------- 关联的是复选框的value属性

2.9 v-module 修饰符

2.10 v-tex指令语法 v-html指令

会覆盖差值表达式

2.11 v-show 和 v-if

v-show 隐藏方式： 采用 display：none 频繁切换
v-if 隐藏： 采用从DOM树直接移除 移除
小结：

2.12 v-for

语法1 v-for=“（值变量名，索引提案两名）in 目标结构”
口诀“ 想要谁循环就放在谁身上”
语法2 v-for=“值变量名 in 目标结构”

2.13 小结：

2.14 数组操作方法

1，数组翻转 reverse

数组变更方法， 就会导致v-for更新，页面更新
数组非变更方法，返回新数组，就不会导致v-for 更新，可采用附该数组或 用this.$set()更新某个值

小结：

2.15 虚拟DOM 本质是 js对象

真实DOM过多 遍历耗时
图示：
小结 ： 本质就是一个JS对象，保存DOM关键信息
虚拟DOM 好处： 提高DOM更新的性能。不频繁操作真是DOM，在内存中找到变化部分，在更新真实DOM（打补丁）

diff 算法：图示

小结：

2.16 v-for 中 k作用

无 key：

有key：

小结：

2.17 动态 class

语法：
：class = “{类名：属性值}”
：style = “{类名：属性值}”

三、vue高级用法

3.1 过滤器语法

定义语法:
全局过滤器：

• Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

局部过滤器：

• filters: {过滤器名字: (值) => {return “返回处理后的值”}

使用语法：{{ | }} 插值表达式 | 动态属性
小结：

3.2 多个过滤器使用

语法：

小结

3.3 创建时间以YYYY-MM-DD格式显示

分析步骤：
① 下载moment模块到当前工程
② 定义过滤器, 传入时间, 用moment模块格式化, 返回我们想要的格式

3.4 计算属性

一个数据, 依赖另外一些数据计算而来的结果
场景： 当一个变量的值，需要用另外变量计算而得来
语法：
小结：

四、 计算属性

4.1计算属性的优势

有缓存。
计算属性对应函数执行后，会把return值缓存起来依赖性不变，多次调用都是从缓存中取值，依赖项值-变化，函数会"自动"重新执行-并缓存新的值
总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高
小记：

4.2 计算属性也是变量

小结：

4.3 侦听器

语法：
`watch: {
“被侦听的属性名” (newVal, oldVal){

}

}`

小结：

4.4 侦听器-深度侦听和立即执行

语法：

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

总结：
immediate立即侦听, deep深度侦听, handler固定方法触发

五、组件

5.1 组件是什么？

小结：

5.2 基础使用

每个组件都是一个独立的个体，代码里体现为一个独立的.vue文件

小结：

组件使用总结:

1. (创建)封装html+css+vue到独立的.vue文件中
2. (引入注册)组件文件 => 得到组件配置对象
3. (使用)当前页面当做标签使用

5.3 组件-scoped的作用

目的: 解决多个组件样式名相同, 冲突问题
⚫ 准备: 当前组件内标签都被添加 data-v-hash值 的属性
⚫ 获取: css选择器都被添加 [data-v-hash值] 的属性选择器
总结: style上加scoped, 组件内的样式只在当前vue组件生效
小结：

5.4 组件通信

因为每个组件的变量和值都是独立的

组件通信先暂时关注父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

例如: App.vue(父) MyProduct.vue(子)

父组件->子组件 传值 - props

步骤：1. 创建组件components/MyProduct.vue - 复制下面标签
2. 组件内在props定义变量, 用于接收外部传入的值
3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

小结：

总结: 组件封装复用的标签和样式, 而具体数据要靠外面传入

六、拓展 Symbol 语法

Symbol

小结：

1，定义常量 唯一性
2，保护隐私性属性

七、 循环使用组件

7.1 父-子 循环使用组件

父- 子 单向数据流
小结：

子-父 传值 自定义事件：
父组件内：

子组件内：

小结：

7.2 组件通信-EventBus

目标：

目标：

语法:

小结：

案例： todos：

口诀：子 -—— 父 自定义事件

1. 子传父如何实现?
   1. 父组件内, 给组件@自定义事件=“父methods函数”
   2. 子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)

口诀：父 —— 子 自定义属性

父传子口诀(步骤)是什么?

1. 子组件内, props定义变量, 在子组件使用变量
2. 父组件内, 使用子组件, 属性方式给props变量传值

八、生命周期（面试重点）

8.1 Vue 生命周期

一个Vue组件从创建到销毁的整个过程就是——Vue的生命周期

8.2 钩子函数

小结： created mounted updated destroyed

8.3 初始化 beforeCreate/created

小结：

8.4 挂载 beforeMount / mounted

小结：

8.5 更新 beforeUpdate / updated

小结：

8.6 销毁 beforeDestroy / destroyed

小结：
场景：秒杀倒计时 在倒计时结束前用一clear 方法

九、axios使用

9.1 获取数据

语法：

小结：

小结：

9.2 axios使用_传参

用法：

小结：

9.3 axios全局配置

总结：

9.4 获取DOM

9.5 通过ref属性获取组件对象

小结：

9.6 Vue-异步更新DOM

9.7 $nextTick使用

小结：

9.8 输入框聚焦

小结：

9.9 组件name属性使用

组件使用步骤：

刚到手一个项目的准备工作

十、动态组件

10.1 动态组件介绍

10.2 动态组件写法

小结：

10.3 组件缓存

小结：

10.4 组件激活 费组件激活

小结：

10.5 组件插槽技术

小结：

10.6 组件进阶 插槽默认内容

10.7 组件进阶-具名插槽

10.8 作用域插槽

小结：

10.9 自定义指令

语法：

为什么用自定义指令？
在Vue内置指令满足不了需求时, 可以自己定义使用

10.10 自定义指令_传值

小结：

补充：

validator（value）{
}

十一、路由 vue-router

11.1 什么是路由？

映射关系。

Vue中的路由。
路径和组件的映射关系
小结：

小结：
Single page 单页面应用

11.2 组件分类

分为2类 页面组件 复用组件
@ 是src 下的绝对路径

小结：

11.3 vue-router如何使用呢?

步骤：
小结：

小结：

11.4 声明式导航

$router 路由对象
$route 路由对应的匹配规则

小结：

11.5 声明式导航 - 跳转传参

小结：

11.6 路由 - 重定向

小结：

11.7 路由 - 404

小结：

11.8 路由 - 模式设置

小结：

11.9 编程式导航

小结：

11.10 编程式导航 -跳转传参

小结：

11.11 路由 - 路由嵌套

小结：

11.12 声明式导航-类名区别

小结：

11.13 全局前置守卫

小结：

十二、Netease Cloud 案例

12.1 解决跨域

12.2 Vant组件自动适配

12.3 vuex 初始化设置