1-6 Vue事件监听

Vue事件监听

一、事件监听指令注意事项：
1、v-on: 可简写成@
2、this：指向当前组件，包含当前data定义的东西。
3、事件也可以传递参数可用data接收。
4、如果有参数可通过$event传递event对象

示例：通过事件绑定，动态展示标签的显示和隐藏

  <button v-on:click="handlerClick">按钮</button>
  <template v-if="show">
        <span>我是if为true看到的</span>
        <a href="#">哈哈</a>
        <span>iwen</span>
      </template>
      <template v-else>
        <span>我是if为false看到的</span>
        <span>哈哈</span>
      </template>


//js部分
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:1
    show:false
    }
  },
  methods:{
    handlerClick(){
      console.log(this);// this指向当前组件
      // this来索引当前data中的数据
      this.show = !this.show;
    }
  }
}

二、事件修饰符（详情见官网）
示例：v-on:click.stop =“方法名”
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 事件只生效一次

按键修饰符：
示例：

使用 keyCode 特性也是允许的：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

详情可见vue官网