vue-06 监听事件-自学视频

左手的ㄟ右手 2022-12-18 15:52 159阅读 0赞

**01**

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

<div id="app">
      <button v-on:click="counter += 1">加 1</button>
      <p>按钮被点击了 {
        { counter }}次.</p>
    </div>

var example1 = new Vue({
        el: '#app',
          data: {
            counter: 0
          }
    })

** 02 **

**事件处理方法  **

我们可以在vue实例methods中定义一个方法来处理vue监听的事件

var app = new Vue({
      el:'#app',
      data:{
         name:'Vue.js'
      },
      methods:{
         greet:function(event){
            // 'this' 在方法里指向当前 Vue 实例
            alert('你好'+this.name+'!');
            // 'even' 是原生 DOM事件
            if(event){
               alert(event.target.tagName)
               // event.target是触发事件的元素
              }
    
    
           }
        }
     })
     // 也可以用JavaScript 直接调用
    app.greet();

** 03 **

事件绑定简写方式

<button @:click="greet">问候</button>

** 04 **

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

*  `.stop`
 *  `.prevent`
 *  `.once`

<av-on:click.stop="doThis"></a>
    
    
    
    <formv-on:submit.prevent="onSubmit"></form>
    
    
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    <a v-on:click.once="doThis"></a>

**按键修饰符**

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">
    <input v-on:keyup.page-down="onPageDown">

按键码

使用 keyCode 特性也是允许的：

Vue 提供了绝大多数常用的按键码的别名：

*  `.enter`
 *  `.tab`
 *  `.delete` (捕获“删除”和“退格”键)
 *  `.esc`
 *  `.space`
 *  `.up`
 *  `.down`
 *  `.left`
 *  `.right`