VUE学习个人纪录04（事件代理）

事件代理

事件的基本使用


1.使用v-on：xxx或@xxx绑定事件,其中xxx是事件名;

2.事件的回调需要配置在methods对象中,最终会在vm上;

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了;

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;

5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

 1 <body>
 2     <div class="root">
 3         <h3>hello,{{name}}</h3>
 4         <button @click="showInfo">点击提示</button>
 5 
 6     </div>
 7     <script type="text/javascript">
 8         Vue.config.productionTip = false
 9         new Vue({
10             el: '.root',
11             data: {
12                 name: 'input your name ',
13             },
14             methods: {
15                 showInfo(event) {
16                     alert('hello')
17                 }
18             }
19 
20         })
21     </script>
22 </body>

事件修饰符

修饰符可以连续使用

1.prevent:阻止默认事件（常用）;

阻止事件发生的两种方法：

1           methods: {
2                 showInfo(e) {
3                     e.preventDefault()
4                 }
5             }

或

 1 @click.prevent="showInfo" 

2.stop:阻止事件冒泡（常用）：

  • 在methods内加以下命令

　　 e.stopPropagation() 

  • 在属性后加.stop（以下均以按钮的点击事件为例）

 　　<button @click.stop="showInfo"> 

3.once:事件只触发一次（常用）：

  • 在属性后加.once

　　 <button @click.once="showInfo">点击提示信息</button> 

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

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

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

此外：scroll 是 页面滚动条 滚动会触发的事件，而 wheel 是 鼠标滚轮滚 动触发的事件。
 　　滚动条到底 ，滑动鼠标滚轮继续滚动，wheel就会一直触发，而scroll不会触发。

 

键盘操作

1.键盘按下事件：keydown() 是在键盘按下就会触发
2.键盘弹起事件：keyup() 是在键盘松手就会触发

1.Vue中常用的按键别名:

回车=>enter

删除=>delete(插获删除”和“退格”键)

退出=> esc

空格=>space

上=>up

下 =>down

左=> left

右=>right

切换大小写=>caps-lock

换行=>tab　　(特殊，需要配合keydown使用)

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

3.系统修饰健（用法特殊) : ctrl、alt、 shift、 meta

(1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用:正常触发事件。

(3).@keyup.ctrl.其他键 可以指定触发的快捷键方式

4.也可以使用keyCode去指定具体的按键（不推荐)

5.Vue.config.keyCodes.自定义健名=健码，可以去定制按健别名 (不推荐)

posted @ 2022-07-29 16:55  RikiEromit  阅读(179)  评论(0)    收藏  举报