动力节点老杜Vue视频笔记——第二章 Vue核心技术

动力节点Vue笔记第二章 Vue核心技术
20/100
发布文章
assdfgdfgjhtdo
未选择任何文件
new

2 Vue核心技术

2.1 事件处理

2.1.1 事件处理的核心语法

1. 指令的语法格式：<标签 v-指令名:参数=”表达式”></标签>
2. 事件绑定的语法格式：v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。
3. 绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数，采用逗号隔开。
4. 绑定回调函数时，如果回调函数没有参数，( )可以省略。
5. 每一个回调函数都可以接收一个事件对象event。
6. 如果回调函数有参数，并且还需要获取事件对象，可以使用$event进行占位。
7. v-on:click可以简写为@click。简写的语法格式：@事件名
8. 回调函数中的this是vm。如果回调函数是箭头函数的话，this是window对象，因为箭头函数没有自己的this，它的this是继承过来的，默认这个this是箭头函数所在的宿主对象。这个宿主对象其实就是它的父级作用域。而对象又不能构成单独的作用域，所以这个父级作用域是全局作用域，也就是window。
9. 回调函数并没有在vm对象上，为什么通过vm可以直接调用函数呢？尝试手写Vue框架。
10. 可以在函数中改变data中的数据，例如：this.counter++，这样会联动页面上产生动态效果。

2.1.2 事件修饰符

.stop - 调用 event.stopPropagation()。

*<div** @click="san"**>**  
3.     **<div** @click.stop="er"**>**  
4.         **<button** @click="yi"**>**{
   
   {
   
   name}}**</button>**  
5.     **</div>**  
6. **</div>**  

.prevent - 调用 event.preventDefault()。

 **<a** href="http://www.bjpowernode.com" @click.prevent="yi"**>**  
3. {
   
   {
   
   name}}  
4. **</a>** 

.capture - 添加事件侦听器时使用 capture 模式。

**<div** @click.capture="san"**>**  
3.     **<div** @click.capture="er"**>**  
4.         **<button** @click="yi"**>**{
   
   {
   
   name}}**</button>**  
5.     **</div>**  
6. **</div>**

注意：只有添加了capture修饰符的元素才会采用捕获模式。（或者说带有capture修饰符的优先触发）

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

 **<div** @click="san"**>**  
 1.     **<div** @click.self="er"**>**  
 2.         **<button** @click="yi"**>**{
   
   {
   
   name}}**</button>**  
 3.     **</div>**  
 4. **</div>**  

.once - 只触发一次回调。
5.

**<button** @click.once="yi"**>**  
 6.     {
   
   {
   
   name}}  
 7. **</button>** 

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
1.无需等待，直接继续（立即）执行事件默认行为。（对wheel事件有效果）
2. .passive 和 .prevent 修饰符不能共存。

2.1.3 按键修饰符

常用的按键修饰符包括：
.enter
.tab （只能配合keydown使用）
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input type=”text” @keyup.page-down=”getInfo”>

可以通过全局 config.keyCodes 对象自定义按键修饰符别名

Vue.config.keyCodes.huiche = 13

2.1.4 系统修饰键

系统修饰键包括4个
.ctrl
.alt
.shift
.meta
系统修饰键在使用时应注意：

1. 只有当系统修饰键和其他键组合使用，并且组合键释放时，才会触发keyup事件。

2. 只要按下系统修饰键，就会触发keydown事件。

小技巧 <input type=”text” @keyup.ctrl.c=”getInfo”/>

2.2 计算属性

3. 案例：用户输入信息，然后翻转用户输入的字符串。
4. 插值语法可以实现，但是有三个问题
   1. 代码可读性差
   2. 代码不可复用
   3. 代码难以维护
5. 可以使用methods方式实现，存在1个问题
   1. 效率低，即使数据没有发生变化，但每一次仍然会调用method。
6. 使用计算属性可以解决以上问题。
7. 什么是计算属性？

data中的是属性。用data的属性经过计算得出的全新的属性就是计算属性。

1. 计算属性的使用

**<div** id="app"**>**  
3.     **<h1>**{
   
   {
   
   msg}}**</h1>**  
4.     输入的信息：**<input** type="text" v-model="info"**><br>**  
5.     反转的信息：{
   
   {
   
   reversedInfo}} **<br>**  
6.     反转的信息：{
   
   {
   
   reversedInfo}} **<br>**  
7.     反转的信息：{
   
   {
   
   reversedInfo}} **<br>**  
8.     反转的信息：{
   
   {
   
   reversedInfo}} **<br>**  
9. **</div>**  
10. **<script>**  
11.     const vm = new Vue({
   
     
12.         el : '#app',  
13.         data : {
   
     
14.             msg : '计算属性-反转字符串案例',  
15.             info : ''  
16.         },  
17.         computed : {
   
     
18.             reversedInfo:{
   
     
19.                 get(){
   
     
20.                     console.log('getter被调用了');  
21.                     return this.info.split('').reverse().join('')  
22.                 },  
23.                 set(val){
   
     
24.                     //this.reversedInfo = val // 不能这样做，这样会导致无限递归  
25.                     this.info = val.split('').reverse().join('')  
26.                 }  
27.             }  
28.         }  
29.     })  
30. **</script>**

1. 计算属性需要使用：computed
2. 计算属性通过vm.$data是无法访问的。计算属性不能通过vm.$data访问。
3. 计算属性的getter/setter方法中的this是vm。
4. 计算属性的getter方法的调用时机：
   1. 第一个时机：初次访问该属性。
   2. 第二个时机：计算属性所依赖的数据发生变化时。
5. 计算属性的setter方法的调用时机：
   1. 当计算属性被修改时。（在setter方法中通常是修改属性，因为只有当属性值变化时，计算属性的值就会联动更新。注意：计算属性的值被修改并不会联动更新属性的值。）
6. 计算属性没有真正的值，每一次都是依赖data属性计算出来的。
7. 计算属性的getter和setter方法不能使用箭头函数，因为箭头函数的this不是vm。而是window。
8. 计算属性的简写形式

只考虑读取，不考虑修改时，可以启用计算属性的简写形式。

computed : {
   
     
2.     reversedInfo(){
   
     
3.         console.log('getter被调用了');  
4.         **return** **this**.info.split('').reverse().join('')  
5.     }  
6. }  

2.3 侦听属性的变化

1. 侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。
2. 监视属性变化时需要使用watch配置项。

使用watch实现：比较数字大小的案例

**<div** id="app"**>**  
2.     **<h1>**{
   
   {
   
   msg}}**</h1>**  
3.     数值1：**<input** type="text" v-model="number1"**><br>**  
4.     数值2：**<input** type="text" v-model="number2"**><br>**  
5.     比较大小：{
   
   {
   
   compareResult}}  
6. **</div>**  
7. **<script>**  
8.     const vm = new Vue({
   
     
9.         el : '#app',  
10.         data : {
   
     
11.             msg : '侦听属性的变化',  
12.             number1 : 1,  
13.             number2 : 1,  
14.             compareResult : ''  
15.         },  
16.         watch : {
   
     
17.             number1 : {
   
     
18.                 immediate : true,  
19.                 handler(newVal, oldVal){
   
     
20.                     let result = newVal - this.number2  
21.                     if(result **>** 0){
   
     
22.                         this.compareResult = newVal + '**>**' + this.number2  
23.                     }else if(result **<** **0**){
   
     
24.                         this.compareResult = newVal + '**<**' + this.number2  
25.                     }else{
   
     
26.                         this.compareResult = newVal + '=' + this.number2  
27.                     }  
28.                 }  
29.             },  
30.             number2 : {
   
     
31.                 immediate : true,  
32.                 handler(newVal, oldVal){
   
     
33.                     let result = this.number1 - newVal  
34.                     if(result **>** 0){
   
     
35.                         this.compareResult = this.number1 + '**>**' + newVal  
36.                     }else if(result **<** **0**){
   
     
37.                         this.compareResult = this.number1 + '**<**' + newVal  
38.                     }else{
   
     
39.                         this.compareResult = this.number1 + '=' + newVal  
40.                     }  
41.                 }  
42.             }  
43.         }  
44.     })  
45. **</script>** 

运行效果：

1. 如何深度监视：
   1. 监视多级结构中某个属性的变化，写法是：’a.b.c’ : {}。注意单引号哦。
   2. 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true
2. 如何后期添加监视：
   1. 调用API：vm.$watch(‘number1’, {})
3. watch的简写：
   1. 简写的前提：当不需要配置immediate和deep时，可以简写。
   2. 如何简写？
      1. watch:{ number1(newVal,oldVal){}, number2(newVal, oldVal){} }
   3. 后期添加的监视如何简写？
      1. vm.$watch(‘number1’, function(newVal, oldVal){})
4. computed和watch如何选择？
   1. 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。
   2. 如果要开启异步任务，只能选择watch。因为computed依靠return。watch不需要依赖return。
5. 关于函数的写法，写普通函数还是箭头函数？
   1. 不管写普通函数还是箭头函数，目标是一致的，都是为了让this和vm相等。
   2. 所有Vue管理的函数，建议写成普通函数。
   3. 所有不属于Vue管理的函数，例如setTimeout的回调函数、Promise的回调函数、AJAX的回调函数，建议使用箭头函数。

2.4 class与style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

2.4.1 class绑定

2.4.1.1 绑定字符串

适用于样式的名字不确定，需要动态指定。

. <!DOCTYPE html**>**  
2. **<html** lang="en"**>**  
3. **<head>**  
4.     **<meta** charset="UTF-8"**>**  
5.     **<title>**class绑定字符串形式**</title>**  
6.     **<script** src="../js/vue.js"**></script>**  
7.     **<style>**  
8.         .static{
   
     
9.             border: 1px solid black;  
10.             background-color: beige;  
11.         }  
12.         .big{
   
     
13.             width: 200px;  
14.             height: 200px;  
15.         }  
16.         .small{
   
     
17.             width: 100px;  
18.             height: 100px;  
19.         }  
20.     **</style>**  
21. **</head>**  
22. **<body>**  
23.     **<div** id="app"**>**  
24.         **<h1>**{
   
   {
   
   msg}}**</h1>**  
25.         **<div** class="static" :class="c1"**></div>**  
26.     **</div>**  
27.     **<script>**  
28.         const vm = new Vue({
   
     
29.             el : '#app',  
30.             data : {
   
     
31.                 msg : 'class绑定字符串形式',  
32.                 c1 : 'small'  
33.             }  
34.         })  
35.     **</script>**  
36. **</body>**  
37. **</html>** 

运行效果：

使用vue开发者工具修改c1的small为big：

通过测试可以看到样式完成了动态的切换。

2.4.1.2 绑定数组

适用于绑定的样式名字不确定，并且个数也不确定。

 <!DOCTYPE html**>**  
2. **<html** lang="en"