vue事件处理器--v-on

vue事件处理器--v-on

• 事件监听可以使用v-on指令

  v-on:click v-on:keyup v-on:mouseover

  v-on:click ===> @click

 <div id="app">
      <p>{{num}}</p> //当点击button按钮时，页面中的num+1
      <button v-on:click ="num++">点击</button>
 </div>

 new Vue({
       el:"#app",
       data:{
            num:1
         }
 })

• v-on可以接收一个定义的方法来调用

   <button @click="btn">点击</button>
  

    new Vue({
              el:"#app",
              data:{
                  num:1
              },
              methods:{
                  btn(){
                      console.log("调用btn方法")
                  }
              }
          })
  

• v-on除了直接绑定方法，也可以使用内联js语句

  <div id="app">
    <button v-on:click="say('hi')">Say hi</button>
  </div>
  <script>
  new Vue({
    el: '#app',
    methods: {
      say: function (message) {
        alert(message)
      }
    }
  })
  

  事件修饰符

  Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，

  如：

  ​ .stop 阻止事件冒泡

  ​ .prevent 取消事件默认行为

  ​ .once 事件触发一次

  ​ .self 只能在自身上面触发

	<ul @click.self ="clickUl">
                <li @click.stop="clickLi">
                    li元素
                </li>
     </ul>
    <p><a href="http://www.baidu.com" @click.prevent.once="clickme">点我</a></p>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!--记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：-->
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta