Python Web前端开发篇（3）---vue事件处理&事件传参&事件修饰符&数组变化监听

1 事件处理

内敛事件处理器

<template>
  <h3>内敛事件处理器</h3>
  <button v-on:click="count++">ADD</button>
  <p>{
   
   { cout }}</p>
</template>

<script>
export default {
  data(){
    return{
      count: 0
    }
  }
}
</script>

方法时间处理器

<template>
  <h3>方法事件处理器</h3>
  <button v-on:click="addCount">ADD</button>
  <p>{
   
   { count }}</p>
</template>

<script>
export default {
  data(){
    return{
      count: 0
    }
  },
  // 所有的方法
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

2 事件传参

<template>
  <h3>事件传参</h3>
  <button @click="addCount">ADD</button>
  <p>{
   
   { count }}</p>
  <div>
    <p @click="getName(item, $event)" v-for="item in names">{
   
   { item}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      count: 0,
      names: ["张三", "李四", "王五",]
    }
  },
  // 方法
  methods:{
    addCount(e){
      e.target.innerHTML = "Add" + this.count
      this.count++
    },
    getName(name, e){
      console.log(e)
      console.log(name)
    }
  }
}
</script>

3 事件修饰符

阻止默认事件&阻止事件冒泡

<template>
  <h3>事件修饰符-阻止默认事件</h3>
  <a @click.prevent="stopEvent" href="https://www.baidu.com">百度</a>
  <h3>阻止事件冒泡</h3>
  <div @click="click1">
    <p @click.stop="click2">冒泡事件</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      count: 0,
      names: ["张三", "李四", "王五",]
    }
  },
  // 方法
  methods:{
    addCount(e){
      e.target.innerHTML = "Add" + this.count
      this.count++
    },
    getName(name, e){
      console.log(e)
      console.log(name)
    },
    // 阻止默认事件
    stopEvent(e){
      console.log("阻止默认事件的发生")
    },
    // 阻止事件冒泡
    click1(){
      console.log("DIV")
    },
    click2(){
      console.log("P")
    }
  }
}
</script>

4 数组变化监听

变更方法

Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些方法有：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

<template>
  <h3>数组变化侦测</h3>
  <div>
    <button v-on:click="addNums">添加数据</button>
    <p v-for="(item, index) in nums1" v-bind:key="index">{
   
   { item }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      nums1: [1, 2, 3],
      nums2: [4, 5, 6]
    }
  },
  methods:{
    addNums(){
      this.nums1.push(9)
    }
  }
}
</script>