数据代理

Object.defineProperty方法

给对象添加属性的方法

let person={
    name:'kitty',
    sex:'man'
}

Object.defintProperty(person,'age',{value:18})
//添加的属性不参与遍历（不可枚举）,不可修改，不可删除
Object.defintProperty(person,'age',{value:18，enumerable:true,writable:true,configurable:true,get(){
    console.log('有人读取age属性了')
    return number
},set(value){
    console.log("有人修改age的属性,age值为value")
}})

//当有人读取person的age属性时，get函数就会被调用
//当有人修改person的age属性时，set函数就会被调用
//可枚举，可修改，可删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作 读/写

let obj1={x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{
    get(){
        return obj1.x
    },
    set(value){
        obj1.x=value1
    }
})
//通过obj2来操作obj1中的x属性
1
2
3
4
5
6
7
8
9
10
11

Vue中的数据代理

1. vue中的数据代理是通过vm对象来代理data对象中属性的操作

_data === data

vue中有一个_data属性来存储data中的内容

• 我们可以直接通过vm.name来获取data中的name属性
  • 具体操作是vm通过get方法获取_data中的name属性
• 我们也可以通过vm直接修改name属性
  • 具体操作是vm通过set方法来修改_data中的name

2.数据代理的好处

更加方便操作data中的属性

3.基本原理

通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性都指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

事件处理

**v-on:[事件]或@[事件]**来绑定事件

		//点击h1标签会调用showInfo事件
    hello{{name}}


new Vue({
el:"root",
data:{
name:"kitty"
},
methods:{
showInfo(){
alert("你好");
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 传参数
  • @click=showInfo($event,number)
  • $event的值为event对象，如果不写的话这个函数里面就收不到event对象的值，number是要传入的参数

事件修饰符

1. prevent：阻止默认事件

• 正常函数阻止默认事件要在函数内加上**event.preventDefault();**这句话来阻止默认事件
• vue中可以**@click.prevent=“”**来阻止默认事件（a标签点击跳转…）

2. stop：阻止事件冒泡

3. once：事件只触发一次

4. capture：使用事件捕获模式

• 事件是先经历事件捕获然后才会经历事件冒泡
• 事件捕获：由外往内
• 事件冒泡：由内往外

5. self：只有event.target是当前操作的元素时才触发事件

6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

• 当监听鼠标滚动滚动条事件，调用函数的时候，执行顺序是调用函数—>函数执行完毕—>页面的滚动条才会滚动
• 函数执行可能要花费很多时间，这样就会造成页面的卡顿
• passive可以立即执行滚动，不需要函数执行完毕才能滚动

点我提示信息



    
        点我提示信息
    




        点我提示1次信息




    

        
    




    
        点我提示信息
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

键盘事件

keyup:按键弹起

keydown:按键按下（tab,ctrl,alt,shift,meta(win按键)配合keydown使用才会正常触发事件，如果配合keyup则按下其他键随后释放其他键事件才被触发）

@keyup.enter:按下回车事件

常用的按键别名

回车：enter

删除：delete（捕获删除和退格键）

退出：esc

空格：space

换行：tab

上：up

下：down

左：left

右：right

methods:{
show(e){
console.log(e.target.value)
}
}
//e.key 按键名字 e.keycode 按键编码
//keycode已废弃，最好不要用
1
2
3
4
5
6
7
8
9

ctrl+y @keydown.ctrl.y

计算属性

当vue的data数据修改之后，vue会重新解析整个模板，如果methods方法中使用了修改的数据，那么这个方法会重新调用一遍，效率不高，这里就要使用到计算属性。

计算属性是把已经生成的属性加工计算成一个新的属性

 

    姓

    名

    全名{{fullName}}
    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

get函数解析

1. get的作用：当有人读取fullName的值的时候get就会被调用，且返回值为fullName的值
2. get的this指向：vue中已经把get的this指向调成了vm对象所以可以通过this.firstName来获取data中的属性
3. get调用的时机：初次读取函数的时候（缓存读取到的值），所依赖的数据发生变化的时候

set函数同上