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

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监听的事件

<div id="app">        
  <button v-on:click="greet">问候</button>
</div>

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 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">

按键码

使用 keyCode 特性也是允许的：

<input v-on:keyup.13="submit">

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

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