vue 事件处理

1、事件绑定

$event 是触发事件的第一个参数值

2、事件修饰符

.stop  停止事件冒泡

.prevent 阻止事件默认行为

3、按键修饰符

vue中使用element-ui组件中的el-button时，@click事件点击无效,这是因为在el-input 的input外边封装了一层div。如果给普通标签加事件，加了native是无效的

<template>
  <div>
    <h2>1、绑定事件</h2>
    <el-button type="primary" @click="test1">test1</el-button>
    <el-button type="primary" @click="test2('abc')">test2</el-button>
    <!-- $event 代表事件对象，每个回调函数都有这个 -->
    <el-button type="primary" @click="test3($event)">test3</el-button>
    <el-button type="primary" @click="test4(123, $event)">test4</el-button>
    <h2>2、事件修饰符</h2>
<!-- 如果嵌入两个div都加点击事件，存在事件冒泡 -->
    <div style="width:200px;height:200px;background:red" @click="test5">
        <!-- .stop 停止事件冒泡 -->
    <div style="width:100px;height:100px;background:blue" @click.stop="test6"></div>
    </div>
    <!-- 阻止事件的默认行为  .prevent -->
    <a href="www.baidu.com" @click.prevent="test7">baidu </a>
    <h2>3、按键修饰符</h2>
    <el-input v-model="enter"  @keyup.native.enter="test8" ></el-input>
    <input type="text" @keyup.enter="test9">
  </div>
</template>
<script>
export default {
  data() {
    return {
       enter:'' 
    };
  },
  methods: {
    test1() {
      alert("test1qw");
    },
    test2(msg) {
      alert(msg);
    },
    test3(event) {
      alert(event.target.innerHTML);
    },
    test4(number, event) {
      alert(number + "----" + event.target.innerHTML);
    },
    test5(){
        alert('out')
    },
test6(){
    alert('inner')
},
test7() {
    alert('点击了')
},
test8(event) {
alert(event.target.value)
},
test9(event){
    alert(event.target.value)
}
  }
};
</script>
<style lang="less">
</style>