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 “返回处理后的值”}

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