vue的基础指令 v-on

给标签绑定事件

语法：

• v-on：事件名=“ 要执行的少量代码 ”
• v-on：事件名=“ methods中的函数”
• v-on：事件名=“ methods中的函数（实参） ”    
• 简写：@事件名 = “ methods中的函数”
• 需要通过this来访问const

<template>
  <div>
  
    <p>你要购买商品的数量:{{ cont }}</p>
  <!-- 绑定事件 -->
  <button v-on:click="cont=cont+1">点击加1</button>
  <!-- 定义函数 -->
  <button v-on:click="addFn">点击加1</button>
  <!-- methods 里面的函数名 -->
  <button v-on:click='addCountFn(5)'>点击加5</button>
  <!-- @事件名 -->
   <button @click="cont=cont+1">点击加1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cont: 1,
    };
  },
  methods: {
    addFn(){
      // data
      this.cont++
    },
    addCountFn(num){
      // 需要通过this来访问const
      this.cont = this.cont + num
    }

  }
};
</script>

阻止默认事件

注意：

• 无传承，通过形参直接接收
• 传参，通过$event 指代事件对象传给事件处理函数

  <!-- 定义函数 阻止默认行为没有传参 -->
    <a @click="one" href="http://www.baidu.com">111</a>
    <!-- 有传参  $event固定写法-->
    <a @click="two(10, $event)" href="http://www.taobao.com">222</a>


 //阻止默认跳转
    one(e) {
      e.preventDefault();
    },
    two(num, e) {
      e.preventDefault();
    },

事件修饰符

语法：

• @事件名.修饰符=“methods里函数”
  • .stop  -阻止事件冒泡
  • .prevent   - 阻止默认行为
  • .once    - 程序运行期间，只能触发一次事件处理函数

 <!-- 修饰符 -->
    <!-- 阻止冒泡 -->
    <p @click.stop="oneFn">点击阻止事件冒泡</p>
    <!-- 阻止事件默认行为和阻止冒泡 -->
    <a href="http://www.baidu.com" @click.prevent.stop></a>
    <!--.once - 程序运行期间, 只触发一次事件处理函数 -->
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>


    fatherFn() {
      console.log("父元素被执行了");
    },
    oneFn() {
      console.log("p标签被点击了");
    },
    btn(){
      console.log(111);

按键修饰符

更多修饰符

语法:

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

 <!-- 按键修饰符 -->
    <!-- 回车键 -->
    <input type="text" @keyup.enter='enterFn'>
    <!-- esc键 -->
    <input type="text" @keyup.esc="escFn">
        
  //按键修饰符 
  enterFn(){
    console.log('用户按下了回车键');
  },
  escFn(){
    console.log('用户按下了esc键');
  }