Vue2学习笔记（尚硅谷张天禹老师）day-01
Vue
一、vue核心
1、vue简介
1.1、vue是什么
一套用于构建用户界面的渐进式JavaScript框架。
渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。
1.2、谁开发的
华人 尤雨溪；
vue2（攻壳机动队） vue3（海贼王）
1.3、vue的特点
- 采用组件化模式，提高代码复用率、且让代码更好的维护
- 声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
1.4、vue官网
vue官网：https://cn.vuejs.org/v2/guide/
1.5、搭建vue开发环境
- 引入vue.js文件
- 安装浏览器vue插件：vue.js devyools
- Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。
2、初识Vue：
2.1、第一个Vue程序：
Document
hello {{name}}
2.2、初识Vue总结：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为Vue模板
- 容器和vue实例必须一一对应，不能一对多，也不能多对一
- 真实开发中只有一个Vue实例，并且会配合组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有数据
- 一旦data中的数据发生改变，那么模板中用到的地方也会自动更新
3、模板语法
3.1、插值语法
-
写法：{{xxx}}
-
功能：用于解析标签体内容
hello {{name}}new Vue({
el: ‘#root’,
data: {
name: ‘vue’
}
});
3.2、指令语法
-
功能: 解析标签包括标签属性、解析标签体内容、绑定事件
-
举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性
-
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子
hello {{name}}
new Vue({
el: ‘#root’,
data: {
name: ‘vue’,
url: ‘www.xxxx.xx’
}
});
4、数据绑定
数据绑定
单向数据绑定：
双向数据绑定：
Vue中有2种数据绑定的方式：
- 单向绑定（v-bind）：数据只能从data流向页面
- 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向绑定一般都应用在表单类元素上（如：、、等）
- v-model:value可以简写为v-model，因为v-model默认收集的就是value值
4.1、el与data的两种写法
el与data的两种写法
Hello,{{name}}!
el有2种写法：
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法：
-
对象式
data:{}
-
函数式
data:function(){
return {
}
}
- 如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了
5、MVVM模型
5.1、MVVM模型
M：模型（Model），对应data中的数据
V：视图（View）：对应模板
VM：视图模型（ViewModel）：对应Vue实例对象
data（M）中多有属性最后都出现在了vm身上
vm身上所有属性及Vue原型上所有属性，在vue模板（V）中都可以直接使用
5.2、Object.defineProperty方法
功能：给对象添加属性
语法：
Object.defineProperty(对象名,新属性名,{value:新属性值[,其他配置]})
其他配置项例如：
let person = {
name: 'zhangsan',
sex: 'nan'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, //控制属性是否可以枚举，默认值是false
writable: true, //控制属性是否可以被修改，默认值是false
configurable: true //控制属性是否可以被删除，默认值是false
})
console.log(person);
借助Object.defineProperty方法让对象和数据产生关联：
let number = 14;
let person = {
name: 'zhangsan',
sex: 'nan'
}
Object.defineProperty(person, 'age', {
//当有人读取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(person);
5.3、理解数据代理
什么是数据代理：通过一个对象代理对另一个对象中属性的操作（读写）
例如一个简单的数据代理：
let obj1 = {
x: 100
}
let obj2 = {
y: 200
}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x;
},
set(value) {
obj1.x = value
}
})
5.4、vue中的数据代理
在vue中，通过vm对象来代理data对象中的属性的操作（读写）
模板中直接写属性名就可以读写操作，这就用到了数据代理，如下有：
学校：{{name}}
地址：{{address}}
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: 'beida',
address: 'beijing'
}
})
模板中用的是name，而不是data.name（即data.name），这里就用到了数据代理，vue对象代理了data对象；通过vm.name就可以读写_data中的name。
这里vm.name和vm.data.name的值相同，修改vm.name的值，vm.data.name也会改变。
基本原理：
数据代理，通过Object.defineProperty()方法把data对象中所有属性添加到vm，为每一个添加到vm上的属性，都指定一个getter/setter，getter/setter内部去操作（读写）data中对应的数据
vue中数据代理的好处：
更加方便的操作data中的数据
6、事件处理
6.1、事件处理的基本使用
- 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上；
- methods中配置的函数不要用箭头函数，否则this指向就不是vm了
- methods中配置的函数，都被Vue所管理的函数，this的指向是vm 或组件实例对象
- @click="demo"和@click="demo($event)"效果一样，但后者可以传参
欢迎来到{{name}}学习
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: 'atshanggui'
},
methods: {
showInfo1(event) {
console.log(event.target);
console.log(this);
alert('同学你好')
},
showInfo2(a, event) {
console.log(event.target);
console.log(this);
alert(a + '同学你好')
}
}
})
6.2 事件修饰符
事件修饰符
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”
6.3、键盘事件
（1）常用的两个键盘触发事件：
- keydown：按下按键不用抬起来就触发事件
- keyup：按下按键抬起来才触发事件（常用）
（2）Vue中按键别名
上面代码中通过Enter键按下后抬起触发事件，enter为vue中Enter的别名
常用的按键别名有：
- 回车=>enter
- 删除=>delete（捕获“删除”和“退格”键）
- 退出=>esc
- 空格=>space
- 换行=>tab（特殊，必须配合keydown使用）
- 上=>up
- 下=>down
- 左=>left
- 右=>right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意驼峰命名法的原始key值要转化为短横线命名，例如大小写转换键KebabCase就要写成kebab-case。
系统修饰键（用法特殊）：ctrl、alt、shift、meta，用法如下：
-
配合keyup使用：按下修饰键的同时再按下其他键，随着释放其他键，事件才被触发
-
配合kedown使用：正常触发事件
-
如果只想要修饰键+一个其他键 才能触发事件可以连续写，例如下面这行代码就是只有按下ctrl+y才能触发事件：
@keyup.ctrl.y=“xxx”
Vue.config.keyCodes.自定义键名 =键码，可以自定义按键别名。
在事件触发函数中获取键名和键码：
showInfo(e) {
console.log(e.key, e.keyCode);
}
可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用
7、计算属性与监视
7.1、计算属性
- 定义：要用的属性不存在，要通过已有属性计算出来
- 原理：底层借助了Object.defineproperty方法提供的getterr和setter
- get函数什么时候执行？
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试更方便
- 备注：
- 计算属性最终会出现在vm上，直接调用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
- 如果计算属性确定不考虑修改，可以使用计算属性的简写形式
计算属性
姓：
名：
姓名：{{fullName}}
多数情况只读不改，所以只读情况set就不用写，就可以直接写一个函数：
fullName() {
return this.firstName + '-' + this.lastName;
}
这个函数的功能就是get函数的功能，最后还是会把fullName配置到vm对象下，所以模板中写的是fullName，而不是fullName()，写fullName()就相当于调用get()，是错误的。
7.2、监视属性
（1）监视属性（watch）可以监视数据的变化，data和computed中的数据都可以被监视。
例如：
监视属性
今天天气好{{info}}!
效果展示
总结：
监视属性watch：
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视
- 监视有两种写法：
- 创建Vue时传入watch配置
- 通过vm.$watch监视
vm.$watch("isHot", {
immediate: true, //初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
});
（2）深度监视
Vue中的监视属性watch默认不监视对象内部值的改变（只监视一层），比如：
深度监视
a的值是:{{numbers.a}}
b的值是:{{numbers.b}}
效果展示
总结：
- 深度监视：
- Vue中的watch默认不监测对象内部值的改变（一层）
- 在watch中配置deep:true可以监测对象内部值的改变（多层）
- 备注：
- 使用watch时根据监视数据的具体结构，决定是否采用深度监视
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
（3）监视属性的简写
前面学习计算属性computed的时候，只有get函数不写set函数时可以简写该属性；在这监视属性watch也一样，只写handler函数不写deep，immediate时也可以简写。
例如上面写过的如果只写hander就可以简写为：
同样为了不改变函数的this指向，也能写成箭头函数；即一般在Vue内管理的函数都不要写箭头函数。
7.3、计算属性和监视属性的区别
（1）computed能完成的功能，watch都可以完成
（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
（3）都能完成的尽量用computed，因为computed是声明式的，watch是命令式的
下面这个姓名案例两种属性都可以实现：
姓：
名：
全名：{{fullName}}
计算属性实现：
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName() {
return this.firstName + '-' + this.lastName;
}
}
})
监视属性实现：
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
fullName: "张三"
},
watch: {
firstName(newValue, oldValue) {
this.fullName = newValue + '-' + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + '-' + newValue;
}
}
})
但是异步任务用计算属性就很难实现，用监视属性就很好实现，比如加一个计时器，让全名的姓延迟一秒更新：
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
fullName: "张三"
},
watch: {
firstName(newValue, oldValue) {
setTimeout(() => {
this.fullName = newValue + '-' + this.lastName;
}, 1000)
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + '-' + newValue;
}
}
})
总结：
- computed和watch之间的区别：
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
- 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
- 目标都一个，就是让this指向是vm。