动力节点Vue笔记第二章 Vue核心技术
20/100
发布文章
assdfgdfgjhtdo
未选择任何文件
new
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"**>**
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
系统修饰键在使用时应注意:
-
只有当系统修饰键和其他键组合使用,并且组合键释放时,才会触发keyup事件。
-
只要按下系统修饰键,就会触发keydown事件。
小技巧 <input type=”text” @keyup.ctrl.c=”getInfo”/>
2.2 计算属性
- 案例:用户输入信息,然后翻转用户输入的字符串。
- 插值语法可以实现,但是有三个问题
- 代码可读性差
- 代码不可复用
- 代码难以维护
- 可以使用methods方式实现,存在1个问题
- 效率低,即使数据没有发生变化,但每一次仍然会调用method。
- 使用计算属性可以解决以上问题。
- 什么是计算属性?
data中的是属性。用data的属性经过计算得出的全新的属性就是计算属性。
- 计算属性的使用
**<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>**
- 计算属性需要使用: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 : {
2. reversedInfo(){
3. console.log('getter被调用了');
4. **return** **this**.info.split('').reverse().join('')
5. }
6. }
2.3 侦听属性的变化
- 侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。
- 监视属性变化时需要使用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>**
运行效果:
- 如何深度监视:
- 监视多级结构中某个属性的变化,写法是:’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 绑定字符串
适用于样式的名字不确定,需要动态指定。
. <!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. **<