动力节点老杜全新版Vue教程笔记分享给大家
学习の地止:https://www.bilibili.com/video/BV17h41137i4
- 视频教程从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。
- 视频中会把每一个Vue的知识点讲解的非常通透,不但举例告诉你怎么用,还会告诉你底层实现原理。
- 例如:Vue的数据代理机制底层实现原理是什么?本套视频中会从零手写一个Vue的数据代理机制,都是源码级的讲解。
2 Vue核心技术
2.1 事件处理
2.1.1 事件处理的核心语法
- 指令的语法格式:<标签 v-指令名:参数=”表达式”></标签>
- 事件绑定的语法格式:v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。
- 绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数,采用逗号隔开。
- 绑定回调函数时,如果回调函数没有参数,( )可以省略。
- 每一个回调函数都可以接收一个事件对象event。
- 如果回调函数有参数,并且还需要获取事件对象,可以使用$event进行占位。
- v-on:click可以简写为@click。简写的语法格式:@事件名
- 回调函数中的this是vm。如果回调函数是箭头函数的话,this是window对象,因为箭头函数没有自己的this,它的this是继承过来的,默认这个this是箭头函数所在的宿主对象。这个宿主对象其实就是它的父级作用域。而对象又不能构成单独的作用域,所以这个父级作用域是全局作用域,也就是window。
- 回调函数并没有在vm对象上,为什么通过vm可以直接调用函数呢?尝试手写Vue框架。
- 可以在函数中改变data中的数据,例如:this.counter++,这样会联动页面上产生动态效果。
2.1.2 事件修饰符
-
.stop - 调用 event.stopPropagation()。
-
<div @click=“san”>
-
**<div** @click.stop="er"**>**
-
**<button** @click="yi"**>**{ {name}}**</button>**
-
**</div>**
-
-
.prevent - 调用 event.preventDefault()。
-
<a href=“http://www.bjpowernode.com” @click.prevent=“yi”>
-
{ {name}}
-
-
.capture - 添加事件侦听器时使用 capture 模式。
-
<div @click.capture=“san”>
-
**<div** @click.capture="er"**>**
-
**<button** @click="yi"**>**{ {name}}**</button>**
-
**</div>**
-
注意:只有添加了capture修饰符的元素才会采用捕获模式。(或者说带有capture修饰符的优先触发)
-
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
-
<div @click=“san”>
-
**<div** @click.self="er"**>**
-
**<button** @click="yi"**>**{ {name}}**</button>**
-
**</div>**
-
-
.once - 只触发一次回调。
-
<button @click.once=“yi”>
-
{ {name}}
-
-
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
- 无需等待,直接继续(立即)执行事件默认行为。(对wheel事件有效果)
- .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
- 系统修饰键在使用时应注意:
- 只有当系统修饰键和其他键组合使用,并且组合键释放时,才会触发keyup事件。
- 只要按下系统修饰键,就会触发keydown事件。
- 小技巧
- <input type=”text” @keyup.ctrl.c=”getInfo”/>
2.2 计算属性
- 案例:用户输入信息,然后翻转用户输入的字符串。
- 插值语法可以实现,但是有三个问题
- 代码可读性差
- 代码不可复用
- 代码难以维护
- 可以使用methods方式实现,存在1个问题
- 效率低,即使数据没有发生变化,但每一次仍然会调用method。
- 使用计算属性可以解决以上问题。
- 插值语法可以实现,但是有三个问题
- 什么是计算属性?
data中的是属性。用data的属性经过计算得出的全新的属性就是计算属性。
-
计算属性的使用
-
<div id=“app”>
-
**<h1>**{ {msg}}**</h1>**
-
输入的信息:**<input** type="text" v-model="info"**><br>**
-
反转的信息:{ {reversedInfo}} **<br>**
-
反转的信息:{ {reversedInfo}} **<br>**
-
反转的信息:{ {reversedInfo}} **<br>**
-
反转的信息:{ {reversedInfo}} **<br>**
-
-
-
计算属性需要使用:computed
-
计算属性通过vm. d a t a 是无法访问的。计算属性不能通过 v m . data 是无法访问的。计算属性不能通过vm. data是无法访问的。计算属性不能通过vm.data访问。
-
计算属性的getter/setter方法中的this是vm。
-
计算属性的getter方法的调用时机:
- 第一个时机:初次访问该属性。
- 第二个时机:计算属性所依赖的数据发生变化时。
-
计算属性的setter方法的调用时机:
- 当计算属性被修改时。(在setter方法中通常是修改属性,因为只有当属性值变化时,计算属性的值就会联动更新。注意:计算属性的值被修改并不会联动更新属性的值。)
-
计算属性没有真正的值,每一次都是依赖data属性计算出来的。
-
计算属性的getter和setter方法不能使用箭头函数,因为箭头函数的this不是vm。而是window。
-
计算属性的简写形式
只考虑读取,不考虑修改时,可以启用计算属性的简写形式。
- computed : {
-
reversedInfo(){
-
console.log('getter被调用了');
-
**return** **this**.info.split('').reverse().join('')
-
}
- }
2.3 侦听属性的变化
- 侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。
- 监视属性变化时需要使用watch配置项。
使用watch实现:比较数字大小的案例
- <div id=“app”>
-
**<h1>**{ {msg}}**</h1>**
-
数值1:**<input** type="text" v-model="number1"**><br>**
-
数值2:**<input** type="text" v-model="number2"**><br>**
-
比较大小:{ {compareResult}}
运行效果:
- 如何深度监视:
- 监视多级结构中某个属性的变化,写法是:’a.b.c’ : {}。注意单引号哦。
- 监视多级结构中所有属性的变化,可以通过添加深度监视来完成:deep : true
- 如何后期添加监视:
- 调用API:vm.$watch(‘number1’, {})
- watch的简写:
- 简写的前提:当不需要配置immediate和deep时,可以简写。
- 如何简写?
- watch:{ number1(newVal,oldVal){}, number2(newVal, oldVal){} }
- 后期添加的监视如何简写?
- vm.$watch(‘number1’, function(newVal, oldVal){})
- computed和watch如何选择?
- 以上比较大小的案例可以用computed完成,并且比watch还要简单。所以要遵守一个原则:computed和watch都能够完成的,优先选择computed。
- 如果要开启异步任务,只能选择watch。因为computed依靠return。watch不需要依赖return。
- 关于函数的写法,写普通函数还是箭头函数?
- 不管写普通函数还是箭头函数,目标是一致的,都是为了让this和vm相等。
- 所有Vue管理的函数,建议写成普通函数。
- 所有不属于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 绑定字符串
适用于样式的名字不确定,需要动态指定。
- **
- <html lang=“en”>
-
**<meta** charset="UTF-8"**>**
-
**<title>**class绑定字符串形式**</title>**
-
**<script** src="../js/vue.js"**></script>**
-
**<style>**
-
.static{
-
border: 1px solid black;
-
background-color: beige;
-
}
-
.big{
-
width: 200px;
-
height: 200px;
-
}
-
.small{
-
width: 100px;
-
height: 100px;
-
}
-
**</style>**
-
**<div** id="app"**>**
-
**<h1>**{ {msg}}**</h1>**
-
**<div** class="static" :class="c1"**></div>**
-
**</div>**
-
**<script>**
-
const vm = new Vue({
-
el : '#app',
-
data : {
-
msg : 'class绑定字符串形式',
-
c1 : 'small'
-
}
-
})
-
**</script>**
运行效果: