【Vue第1章】Vue核心

目录

1.1 Vue简介

1.2 初识Vue

1.2.1 代码

1.3 模板语法

1.3.1 效果

1.3.2 模板的理解

1.3.3 插值语法

1.3.4 指令语法

1.3.5 代码

1.4 数据绑定

1.4.1 效果

1.4.2 单向数据绑定

1.4.3 双向数据绑定

1.4.4 代码

el与data的两种写法

代码

1.5 MVVM模型

1.5.1 代码

数据代理

1.回顾Object.defineProperty方法

2.何为数据代理

3.Vue中的数据代理

1.6 事件处理

1.6.1 效果

1.6.2 绑定监听

1.6.3 事件修饰符

1.6.4 按键修饰符

1.6.5 代码

1.6.5.1.事件的基本使用

1.6.5.2.事件修饰符

1.6.5.3.键盘事件

1.6.6 总结

1.7 计算属性与监视

1.7.1 效果

1.7.2 计算属性-copputed

1.7.3 监视属性-watch

1.7.4 代码

1.7.4.1.姓名案例_插值语法实现

1.7.4.2.姓名案例_methods实现

1.7.4.3.姓名案例_计算属性实现

1.7.4.4.姓名案例_计算属性简写

1.7.4.5.天气案例

1.7.4.6.天气案例_监视属性

1.7.4.7.天气案例_深度监视

1.7.4.8.天气案例_监视属性_简写

1.7.4.9.姓名案例_watch实现

1.7.5 总结

1.8 class与style绑定

1.8.1 理解

1.8.2 class绑定

1.8.3 style绑定

1.8.4 代码

1.9 条件渲染

1.9.1 条件渲染指令

1.9.2 比较v-if与v-show

1.9.3 代码

1.9.4 总结

1.10 列表渲染

1.10.1 效果

1.10.2 列表显示指令

1.10.3 代码

1.10.3.1.基本列表

1.10.3.2.key的原理

1.10.3.3.列表过滤

1.10.3.4.列表排序

1.10.3.5.更新时的一个问题

1.10.3.6.Vue监测数据改变的原理_对象

1.10.3.7.模拟一个数据监测

1.10.3.8.Vue.set的使用

1.10.3.9.Vue监测数据改变的原理_数组

1.10.3.10.总结Vue数据监测

1.10.4 总结

1.11 收集表单数据

1.11.1 效果

1.11.2 代码

1.12 过滤器

1.12.1 效果

1.12.2 理解过滤器

1.12.3 代码

1.13 内置指令与自定义指令

1.13.1 常用内置指令

1.13.2 自定义指令

1.13.3 cookie原理

1.13.4 代码

1.13.4.1.v-text_指令

1.13.4.2.v-html_指令

1.13.4.3.v-cloak_指令

1.13.4.4.v-once_指令

1.13.4.5.v-pre_指令

1.13.4.6.自定义指令

1.13.4.7.回顾一个DOM操作

1.14 Vue实例生命周期

1.14.1 效果

1.14.2 生命周期流程图

1.14.3 vue生命周期分析

1.14.4 常用的生命周期方法

1.14.5 代码

1.14.5.1.引出生命周期

1.14.5.2.分析生命周期

1.14.5.3.总结生命周期

1.14.6 总结 

---

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

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

1.1 Vue简介

1.2 初识Vue

容器与实例之间一一对应

1.2.1 代码

表达式会产生值；JS代码（语句）不生成值，只是控制代码走向

1.3 模板语法

1.3.1 效果

1.3.2 模板的理解

1.3.3 插值语法

1.3.4 指令语法

1.3.5 代码

v-bind:href="xxx"可以简写为 :href="xxx"

1.4 数据绑定

v-bind：单向绑定

v-model：双向绑定

1.4.1 效果

1.4.2 单向数据绑定

1.4.3 双向数据绑定

1.4.4 代码

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

el与data的两种写法

vue实例:

const v = new Vue({})

console.log(v):

其中$开头的属性和方法是给程序员用的；无$开头的底层Vue自身在用

__proto__: Vue实例缔造者原型对象的方法 

代码

1.5 MVVM模型

1.5.1 代码

数据代理

1.回顾Object.defineProperty方法

代码：

2.何为数据代理

代码：

3.Vue中的数据代理

通过vm读name，读的是data.name；通过vm写name，写的是data.name，即数据代理。

vm._data === data：vm中的_data属性，就是new Vue({})时里面的data属性

第一步就是将源代码中的data数据复制一份到vm中的_data属性中。通过Object.defineProperty对vm添加name，address属性及其对应的getter和setter。同时name和address分别对_data.name和_data.address实现数据代理，从而实现了修改和读取vm.name，vm.address就可以获得vm._data中的数据

数据代理将编码简化，如果只有_data其实也可以编码，但是每次编程需要写_data.name，_data.address很麻烦。通过数据代理，可以直接写name和address

代码

1.6 事件处理

1.6.1 效果

1.6.2 绑定监听

1.6.3 事件修饰符

1.6.4 按键修饰符

1.6.5 代码

1.6.5.1.事件的基本使用

1.6.5.2.事件修饰符

1.6.5.3.键盘事件

1.6.6 总结

@click="showInfo"        //v-on:click="showInfo" 的简写形式
showInfo2($event,66)    //用$event来接收事件

1.7 计算属性与监视

1.7.1 效果

1.7.2 计算属性-copputed

1.7.3 监视属性-watch

1.7.4 代码

1.7.4.1.姓名案例_插值语法实现

1.7.4.2.姓名案例_methods实现

1.7.4.3.姓名案例_计算属性实现

1.7.4.4.姓名案例_计算属性简写

1.7.4.5.天气案例

1.7.4.6.天气案例_监视属性

1.7.4.7.天气案例_深度监视

1.7.4.8.天气案例_监视属性_简写

1.7.4.9.姓名案例_watch实现

1.7.5 总结

//methods里的函数调用时，如果是fullName调用是将函数展示在页面上；
//如果是fullName()调用，是将返回值展示在页面上
methods: {
				fullName(){
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},

1.8 class与style绑定

1.8.1 理解

1.8.2 class绑定

1.8.3 style绑定

1.8.4 代码

1.9 条件渲染

1.9.1 条件渲染指令

1.9.2 比较v-if与v-show

1.9.3 代码

1.9.4 总结

//template只能配合v-if，不能配合v-show

1.10 列表渲染

1.10.1 效果

1.10.2 列表显示指令

1.10.3 代码

1.10.3.1.基本列表

1.10.3.2.key的原理

以index为key时，如果对数据进行了破坏顺序的操作时会出错的原理：

以数据的唯一标识id作为key没问题的原理：

1.10.3.3.列表过滤

为了在页面第一次展示，搜索框没有输入即输入为''时能展示，将watch中的keyword写成完整形式，并设置immediate:true，在用户没输入即keyword没改变时，马上调用一次handler

1.10.3.4.列表排序

1.10.3.5.更新时的一个问题

1.10.3.6.Vue监测数据改变的原理_对象

1.10.3.7.模拟一个数据监测

1.10.3.8.Vue.set的使用

1.10.3.9.Vue监测数据改变的原理_数组

1.10.3.10.总结Vue数据监测

1.10.4 总结

//#region

//实现VS Code中代码折叠

//#endregion

1.11 收集表单数据

1.11.1 效果

1.11.2 代码

1.12 过滤器

1.12.1 效果

1.12.2 理解过滤器

1.12.3 代码

1.13 内置指令与自定义指令

1.13.1 常用内置指令

1.13.2 自定义指令

1.13.3 cookie原理

cookie不可以跨浏览器使用 

1.13.4 代码

1.13.4.1.v-text_指令

1.13.4.2.v-html_指令

1.13.4.3.v-cloak_指令

1.13.4.4.v-once_指令

1.13.4.5.v-pre_指令

1.13.4.6.自定义指令

1.13.4.7.回顾一个DOM操作

1.14 Vue实例生命周期

1.14.1 效果

1.14.2 生命周期流程图

1.14.3 vue生命周期分析

1.14.4 常用的生命周期方法

1.14.5 代码

1.14.5.1.引出生命周期

1.14.5.2.分析生命周期

1.14.5.3.总结生命周期

1.14.6 总结