vue 事件处理监听事件

1. 监听事件

 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"

2. 内联事件处理器

<button @click="count1 += 1">add 1,count1={{ count1 }} </button>

3. 方法事件处理器

<button @click="clickhandle">add 1，count2={{ count2 }} </button>

<script>
export default{
  name: 'HelloWorld',
  data(){
    return{
      count1:1,
      count2:1 }},
  methods:{
    clickhandle(){
      this.count2 += 1;
      console.log("count2=",this.count2,this.count1);
    }}}
</script>

4. 原生事件event

<button @click="clickhandle2">点击</button>
    <div >count2={{ count2 }}</div>

methods:{
    clickhandle(){
    }, //用逗号分开不同函数
    clickhandle2(event){// event 是原生DOM event
      this.count2 =100;
      console.log(event);
      event.target.innerHTML="点击之后";   
    }}
效果就是，点击按钮后触发这个函数，
div中count2变为100，发送事件详情，按钮上的文字变成‘点击之后’

5. 向方法内传入自定义参数

<button @click="say('hi')">say hi</button>

methods:{
    say(data){
      console.log(data);
    }
}// 后台打印：hi

6. 向方法内循环传参

 <ul>
      <li @click="say(item.title)" v-for="(item,index) in newList" :key="index">
        {{ item.title }}
      </li>
 </ul>

say(data){
      console.log(data);
}