如基本使用

  • 前端开发中，经常要和用户进行交互，所以需要监听用户的一些操作，如点击，键盘等
    1. <div id="app">
    2. <h2>{{counter}}</h2>
    3. <button @click="increment">+</button>
    4. <button @click="decrement">-</button>
    5. </div>
    6. <script>
    7. const app = new Vue({
    8.     el: '#app',
    9.   data: {
    10.       counter: 0
    11.   },
    12.   methods: {
    13.       increment () {
    14.         this.counter++    
    15.     },
    16.     decrement () {
    17.         this.counter--
    18.     }
    19.   }
    20. })
    21. </script>

v-on参数

  • 我们在事件监听时，如果一个方法本身不需要传递进去参数，我们调用该方法时就可以省略括号（）
  • 但是如果一个方法需要我们调用时传递进来一个函数，但是我们没有传递参数，只是用空（）来调用，如 @click= “btnClick()” 这时就会默认传入一个undefined来作为形参
  • 但是如果我们调用一个需要传递参数的方法时，既没有传递参数，又没有加小括号，这时Vue会默认将浏览器生成的event事件作为参数，传入到方法中
  • 我们在浏览器中进行一些操作时，浏览器每次都会生成一个event事件对象的！
  • 在定义方法时，该方法既需要event对象，同时又需要别的参数时，不能使用 @click=”btnClick(123, event)” 这种方法去拿这个event对象，我们必须采用$event的方法来获取该event对象，如下所示
    1. <div id="app">
    2. <button @click="btnClick(123, $event)"></button>
    3. </div>
    4. <script>
    5. const app = new Vue({
    6.     el: '#app',
    7.   data: {
    8.       message: 'hello'
    9.   },
    10.   methods: {
    11.       btnClick (el, event) {
    12.         console.log(el + '----' + event)
    13.     }
    14.   }
    15. })
    16. </script>

v-on修饰符

  • 当我们点击按钮时，会发生事件冒泡，先打印btnClick 后打印divClick，以前我们处理这种问题的方法就是e.stopPropagation()

  • .stop修饰符：现在在Vue中使用修饰符就可以解决这个问题 这时就不会向上冒泡了

    1. <div @click="divClick">
    2.   <button @click="btnClick">按钮</button>
    3. </div>
    5. <script>
    6.   const app = new Vue({
    7.     el: '#app',
    8.     data: {
    9.       message: 'hello'
    10.     },
    11.     methods: {
    12.       btnClick () {
    13.         console.log('btnClick')
    14.       },
    15.       divClick () {
    16.         console.log('divClick')
    17.       }
    18.     }
    19.   })
    20. </script>

  • .prevent修饰符：阻止默认事件

  • .{keyCode | keyAlias} 修饰符：监听键盘按钮事件，如，就监听键盘上回车的抬起动作，当一抬起，就执行该方法
  • .once修饰符：点击第一次有用