这是我参与「第四届青训营 」笔记创作活动的第15天
最近在做项目时 发现对事件的知识有所遗忘 于是打算复习并简单记录一下💾
- 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript与HTML之间的交互是通过事件实现的
- 对于web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素的上方、按下键盘上某个键，等等
事件的命名规则
JavaScript中事件的命名都是描述性的，比较容易理解，如单击（click）、双击（dblclick）、提交（submit）、按下鼠标（mousedown）等等。
事件修饰符
- prevent：阻止默认事件
- stop：阻止冒泡
- once：只触发一次
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素才触发事件
- passive：事件的默认行为立即执行，无需等待回调执行完毕 （wheel事件
<button @click="hit($event,65)">
需要事件对象时加$符
键盘事件
- ctrl
- shift
- meta（win
- alt
配合keyup：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发 例ctrl q
配合keydown：正常触发事件
tab要配合keydown使用
修饰符可以连续写
<input type="text" @keyup.ctrl.y="change">
按下ctrl-y才触发
计算属性
const vm= new Vue({
el: "#root",
data: {
x:'张',
m:"哥"
},
computed:{
full:{
// 当有人读取full时，get会被调用 且返回值就是full的值
//get什么时候调用 1.初次读取full时 2.所依赖的数据发生变化时 例如(x、m)
get(){
console.log(this);//get会将this改为vm
return this.x+"-"+this.m;
},
//set什么时候调用 当full被修改时
set(value){
const arr=value.split('-');
this.x=arr[0];
this.m=arr[1];
}
}
}
});
-
定义：要用的属性不存在，要通过已有属性计算得来
-
原理：底层借助了object.defineproperty方法提供的getter和setter
-
get函数什么时候执行
- 初次读取时会执行依次
- 当依赖的数据发生改变时会被再次调用
-
优势：与methods实现相比，内部有缓存机制 可复用
-
备注：
- 计算属性最终会出现在vm上 直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
💭💭💭
记录前端学习中的问题📜
若本文对你有帮助 欢迎点赞收藏👍📑
若有纰漏，敬请包涵，评论区欢迎指正👂
