目录
英文官网: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不可以跨浏览器使用