1-5 事件监听

事件监听：

       可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

html

<div>
      <button v-on:click="num+=1">按钮</button>
      <p>{{num}}</p>
 </div>

js

data() {
    return {
      num: 1,
     }
}

点击前点击后每点击一次就增加一次

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

methods方法

html:

<div>
   <button v-on:click="handlerClick">按钮1</button>
</div>

js

data() {
    return {
      show: false,
    }
  },
  methods: {
    handlerClick() {
      console.log(this);//this指向当前组件
      //this来索引当前data中的数据
      this.show = !this.show;
    }
  }

点击按钮1后在浏览器控制台可以看到相关数据

事件参数：

<template>
    <!--在template，只能存在一个根组件-->
    <div class="event">
        <ul>
            <li v-on:click="getItemInfo(index,$event)" v-for="(name,index) in names">{{name}}</li>//v-on:click可简写@click
        </ul>
    </div>
</template>
<script>
export default {
  data(){
      return{
          names:["iwen","ime","ice"]
      }
  },
  methods:{
      //事件中默认参数event
      getItemInfo(data,event){
          console.log(this.names[data]);
          console.log(event);
      }
  }
}
</script>
<style>

</style>

    效果图：