六.vue基础-事件处理

ゝ一纸荒年。 2023-06-21 03:50 26阅读 0赞

### 文章目录 ###

*   *  六.vue基础-事件处理
     *   *  一.监听事件
         *  二.事件处理方法
         *  三.内联处理器中的方法
         *  四.事件修饰符
         *  五.按键修饰符
         *  六.系统修饰键
         *  七.鼠标按钮修饰符

## 六.vue基础-事件处理 ##

### 一.监听事件 ###

可以用`v-on`指令监听DOM事件, 并在触发时运行一些JavaScript代码.

<div id="example_1">
        <button v-on:click="counter += 1">
            Add 1
        </button>
        <p>
            The button above has been clicked {
       {counter}} times.
        </p>
    </div>

var example = new Vue({ 
        el: "#example_1",
        data: { 
            counter:0
        }
    })

每次点击按钮,counter数字增加1

### 二.事件处理方法 ###

很多事件处理逻辑会更为复杂, 所以直接把JavaScript代码写在v-on指令中是不可行的. 因此v-on 还可以接收一个需要调用的方法名称.

<div id="example_2">
        
        <button v-on:click="greet">
            Greet
        </button>
    </div>

var example2 = new Vue({ 
        el: '#example_2',
        data: { 
            name: 'Vue.js'
        },
        //在methods对象中定义方法 methods:方法
        methods:{ 
            greet: function(event){ 
                //this在方法里指向当前Vue实例
                alert('Hello' + this.name + "!");
                if(event){ 
                    //event.target是当前元素自身触发处理函数
                    alert(event.target.tagName);
                }
            }
        }
    })
    
    //也可以用 JavaScript 直接调用方法
    example2.greet() // "Hello Vue.js!"

### 三.内联处理器中的方法 ###

1.  除了直接绑定到一个方法, 也可以在内联JavaScript语句中调用方法:

new Vue({ 
        el:'#example_3',
        methods: { 
            say: function(message){ 
                alert(message);
            }
        }
    })

1.  有时也需要在内联语句处理器中访问原始的DOM事件. 可以用特殊变量`$event`把它传入方法:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>

methods: { 
        warn: function(message, event){ 
            //现在我们可以访问原生事件对象 preventDefault:阻止原本作用
            if(event) event.preventDefault()
            alert(message);
        }
    }

### 四.事件修饰符 ###

(1).用来对当前绑定的事件的补充说明. 修饰符是由点开头的指令后缀来表示的.

1.  `.stop`: 阻止事件冒泡
2.  `.prevent`: 阻止默认事件
3.  `.capture`: 阻止事件捕获
4.  `.self`: 只作用于自身
5.  `.once`: 只执行一次
6.  `.passive`: 会执行默认事件
    
        
        <a v-on:click.stop="doThis"></a>
        
        
        <form v-on:submint.prevent="onSubmit"></form>
        
        
        <a v-on:click.stop.prevent="doThat"></a>
        
        
        <form v-on:submit.prevent></form>
        
        
        
        <div v-on:click.capture="doThis">
            ...
        </div>
        
        
        <div v-on:click.self="doThat">
            ...
        </div>
    
    使用修饰符时, 顺序很重要; 相应的代码会以同样的顺序产生. 因此, 用`v-on:click.prevent.self`会阻止**所有的点击**,而`v-on: click.self.prevent`只会阻止对元素自身的点击
    
    (2)`.once`
    
        
        <a v-on:click.once="doThis"></a>
    
    不像其它只能对原生的DOM事件起作用的修饰符, `.once`修饰符还能被用到自定义的**组件事件**上.
    
    (3)`passive`
    
    `Boolean`, 如果`true`表示所指定的函数`listener`将永远不会调用`preventDefault()`. 如果被动侦听器确实进行了调用`preventDefault()`, 则用户代理将不执行任何操作, 只生成控制台警告.
    
        
        
        
        <div v-on:scroll.passive="onScroll">
            ...
        </div>
    
    这个`.passive`修饰符尤其能够提升移动端的性能
    
     不要把 `.passive` 和 `.prevent` 一起使用，因为 `.prevent` 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive` 会告诉浏览器你*不*想阻止事件的默认行为。

### 五.按键修饰符 ###

1.  在监听键盘事件时, 我们经常需要检查常见的键值. Vue允许为`v-on`在监听键盘事件时按下按键修饰符.
    
        
        <input v-on:keyup.13="submit">
2.  记住所有的`keyCode`比较困难, 所以Vue为最常见的按键提供了别名
    
     *  `.enter`
     *  `.tab`
     *  `.delete`
     *  `.esc`
     *  `.space`
     *  `.up`
     *  `.down`
     *  `.left`
     *  `.right`
3.  可以通过全局`config.keyCodes`对象自定义按键修饰符别名.
    
        //keyCode 113 = F2
        <input  type="text" @keyup.113 = "事件名">
            
            
        //可以使用 `v-on:keyup.f2`, 给113一个别名
        Vue.config.keyCodes.f2 = 113;
        //在HTML中使用f2
        <input type="text" @keyup.f2 = "事件名">

### 六.系统修饰键 ###

1.  可以用如下修饰符来实现仅在按下相应键时才能触发鼠标或键盘事件的监听器.
    
     *  `.ctrl`
     *  `.alt`
     *  `.shift`
     *  `.meta`: 在Windows系统键盘meta对应Windows徽标键. 在sun操作系统键盘上, meta对应实心宝石键.

<input @keyup.alt.67="clear">
    
    
    <div @click.ctrl="daSomething">
        Do somethinbg
    </div>

注意: 修饰键与常规按键不同, 在和`keyup`事件一起用时, 事件触发时修饰键必须处于按下状态. 只有在按住`ctrl`的情况下释放其他按键, 才能出发`keyup.ctrl`. 而单单释放`ctrl`也不会触发事件.

1.  `.exact`修饰符
    
    允许控制由准确的系统修饰符组合触发的事件.
    
        
        <button @click.ctrl="onClick">
            A
        </button>
        
        
        <button @click.ctrl.exact="onCtrlClick">
            A
        </button>
        
        
        <button @click.exact="onClick">
            A
        </button>

### 七.鼠标按钮修饰符 ###

*  `.left`
 *  `.right`
 *  `.middle`
    
    这些修饰符会限制处理函数仅响应特定的鼠标按钮

[参考文档][Link 1]

[Link 1]: https://vuejs.bootcss.com/v2/guide/