vue官方文档 事件处理 v-on 学习笔记

简述

主要练习学习了以下知识点：

• v-on 的基础写法及简写
• 默认传递event事件
• 带参数，用$event显示传递event事件
• 事件修饰符
  • stop：阻止事件继续传播
  • prevent：阻止提交事件重载页面
  • capture: 先触发此事件，再触发子事件
  • self: 只在自身触发
• 按键修饰符的使用：@keyup等
• 系统修饰符： @click.meta 同时按下commond生效
• 鼠标修饰符

代码

<template>
  <div class="about">
    <h1>事件处理</h1>
    <h3>基础写法</h3>
    <button v-on:click="counter+=1">+1</button>
    <span>点了{{counter}}次</span>
    <hr>
    <h3>写在methods内</h3>
    <button @click="greet">Greeting</button>
    <hr>
    <h3>带参数的方法</h3>
    <button @click="say('Hi')">say Hi</button>
    <button @click="say('Hello')">say Hello</button>
    <h3>用$event传入event事件</h3>
    <button @click="submit('event cannot be submit yet',$event)">Submint</button>
    <h3>事件修饰符</h3>
    <!-- 阻止事件继续传播 -->
    <a @click.stop="doTishi"></a>
    <!-- 阻止提交事件不再重载页面 -->
    <form @submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联 -->
    <a @click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form @submit.prevent></form>
    <!-- 事件监听捕获模式,内部触发的事件先在此处处理 -->
    <div @click.capture="doThis"></div>
    <!-- 只在自身触发 -->
    <div @click.self="doThat"></div>
    <hr>
    <h3>按键修饰符,只有按下回车触发事件</h3>
    <input @keyup.enter="submit">
    <h3>系统修饰键</h3>
    <button @click.meta="submit">按下ctrl</button>
    <h3>鼠标按钮键</h3>
    <ul>
      <li>.left</li>
      <li>.right</li>
      <li>.middle</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter:0,
      name:'Vue.js'
    };
  },
  methods:{
    greet(event){
      alert("hello "+ this.name)
      if(event){
        alert(event.target.tagName)
      }
    },
    say(message){
      alert(message)
    },
    submit(message,event){
      if(event){
        event.preventDefault()
      }
      alert(message)
    },
    doThis(){

    },
    doThat(){

    },
    onSubmit(){

    }
  }
};
</script>