目录
事件的使用
1、使用v-on:xxxx或者是@xxxx来进行事件的绑定,所以xxxx就是我们绑定事件的名称。
2、事件的回调他也是需要配置在methods对象中的,但是最终的结果都是回到vm身上。
3、在methods中配置的所有函数,都不要去使用我们所谓的箭头函数,因为他会将this的指向认定为windows而不是vm
4、在methods中配置的所有函数,他其实都是呗vue所进行管理的函数,this的指向就是我们的vm或者是组件的实例对象
5、@click=“showme”他和@click=“shoume($event)”效果是一致的,唯一不同的是,后者它可以进行传参操作。
事件修饰符
前三个是常用的修饰符
prevent
它是用来阻止默认时间的
stop
他还是用来阻止事件冒泡的
once
它是用来保证事件只触发一次的
capture
它是指使用时间的捕获模式
self
指的是只有event.target是当前操作的元素的时候才会触发事件
passive
事件的么人行为立即执行的操作,不需要等待时间回调执行完毕
键盘事件
常用的键盘别名
1、center 回车
2、delete 删除(捕获删除或者退格按键的)
3、esc 退出
4、space 空格
5、tab 换行(这里需要注意,他是需要和keydown配合使用)
6、up 上
7、down 下
8、left 左
9、right 右
未提供别名的处理
在vue中没有提供别名按键的,我们可以使用按键对应的原始key值来绑定,
但是要注意使用短横线命名(转为kebab-case)
系统修饰键
ctrl、alt、shift、meta(win)
1)、配合keyup使用的时候要注意
按下修饰键的时候,同时按下其他键,然后在释放其他键,时间才能够被触发
2)、配合keydown使用的时候,可以正常触发时间
自定义按键别名
我们可以自己使用Vue.config.keyCodes.西定义键名 = 键码
计算属性
计算属性,顾名思义就是指通过获取vm中数据,通过计算获得的新值的属性,称之为计算属性。
也就是:要用的属性不存在(通过计算得来的),是要通过已有的属性计算得来的。
原理
他的底层也是借住了Object.defineproperty方法提供的getter和setter来实现的。
优势
计算属性他与methods的实现方式相比较,它内部有缓存机制可以供我们复用,效率会相对要高一些,调用起来更加方便。
get的调用时机
1、第一次读取的时候,他回调用一次
2、当计算属性依赖的数据发生变化的时候,他会被再一次的调用
注意:
1、计算属性他最终还是会作为vm的属性,我们直接调用读取即可实现。
2、当我们计算属性被改变的时候,如果实现双向修改该,则必须写set函数来实现响应修改该。并且set中要引起计算的时候依赖的数据发生变化。
代码实现
完整实现
new Vue({
el:'#root', // el用于指定当前vue实例是为哪一个容器服务的,通常是css选择器字符串
data:{ // 此处的data用于存储数据,数据是供我们el所指定的容器去使用的,我们这里暂且吧值写为一个对象。
name:'world123'
},
computed:{
fullName:{
get(){
return "全名信息"
},
set(){
}
}
}
})
简写
当我们只有get方法的时候,不需要set双向修改该的时候,我们饿可以简写,如下:
new Vue({
el:'#root', // el用于指定当前vue实例是为哪一个容器服务的,通常是css选择器字符串
data:{ // 此处的data用于存储数据,数据是供我们el所指定的容器去使用的,我们这里暂且吧值写为一个对象。
name:'world123'
},
computed:{
fullName:{
reutrn "全名信息"
}
}
})
好了,今天关于时间与计算属性就到这里。
欢迎大家点击下方卡片,关注《coder练习生》