vue学习笔记29-31（v-on）

vue学习笔记29-31（v-on）

1、作用
绑定事件监听器，与用户进行交互
2、基本用法

  <button v-on:click="increment()">+</button>

例子：（计数器例子）

<div id="div1">
  <h2>{{counter}}</h2>
  <button v-on:click="increment()">+</button>
  <button v-on:click="decrement()">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#div1',
    data: {
      counter: 0,
    },
    methods: {
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    },
  })
</script>

3、语法糖
用 @ 代替 v-on: ，例子：
<button v-on:click="increment()">+</button>相当于<button @click="increment()">+</button>

4、v-on参数
①如果该函数不需要额外参数，则调用函数时后面的()可以不加
②如果该函数需要传入参数，
a.调用函数时，带有小括号，但是没有传入参数的时候：函数认为传入了参数全部都是undefined
b.调用函数时，不带有小括号：vue会将浏览器产生的event对象传入到函数中，其余参数全部都是undefined
③在传入参数时，既需要传入一个参数，又需要传入一个Event对象/获得浏览器产生的event对象
例子：

<div id="div1">
  <!--传入的event前面需要加上$符号，让vue知道这是传入了一个event对象-->
  <button @click="btnClick(123, $event)">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#div1',
    data: {
      message: 'HelloVueJs',
    },
    methods: {
      btnClick(abc, event) {
        console.log('---------', abc, event);
      }
    }
  })
</script>

5、v-on的修饰符
①.stop修饰符（防止事件冒泡）
②.prevent修饰符（防止默认行为）
③.key(keyup和keydown事件的对应修饰符)
④.once修饰符（只触发一次回调函数）