Java全栈课程之Vue3详解———事件

一、事件处理

我们可以使用 v-on 指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。法:v-on:click="methodName"或@click="handler"事件处理器的值可以是

        ① 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick 类似)
        ② 方法事件处理器:一个指向组件上定义的方法的属性名或是路径

        1.内联事件处理器

        内联事件处理器通常用于简单场景

<template>
    <button @click=count++">Add 1</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    }
}
</script>

        2.方法事件处理器

<template>
    <button @click="addcount">Add</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data () {
        return {
            count: 0
        }
    },
    methods : {
        addCount (){
            this.count+=1
        }
    }
}
</script>

二、事件参数

事件参数可以获取event对象和通过事件传递数据

        1.获取event对象

<template>
    <button @click="addcount">Add</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data () {
        return {
            count : 0
        }
    },
    methods : {
        addCount(e) {
        console.log(e);
        this.count+=1
        }
    }
}
</script>

        2.传递参数

<template>
    <h3>事件传参</h3>
    <p @click="getNameHandler(item)" v-for="(item, index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default {
    data(){
        return{
            names: ["iwen", "ime", "frank"]
        }
    methods : {
        getNameHandler (name) {
        console. log(name);
        }
    }
}
</script>

        3.传递参数过程中获取event

<template>
    <p @click="getNameHandle(item, $event) v-for="(item, index) in names" :key "index">{{ item }}</p>
</template>
<script>
export default {
    data() {
        return {
            names: ["iwen", "ime", "frank"]
            }
        },
    methods : {
        getNameHandle(name, e) {
        console.log(name,e);
        }
    }
}
</script>

三、事件修饰

在处理事件时调用 event.preventDefault() 或  event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好

为解决这一问题,Vue为 v-on 提供了事件修饰符,常用有以下几个:

.stop

.prevent

.once

.enter

具体参考: 事件处理 | Vue.js

        1.阻止默认事件

<template>
    <div>
        <a @click.prevent="clickHandle" href="https://www.baidu.com"> 百度</a>
    </div>
</template>
<script>
export default {
data (){
    return{

        }
    },
    methods:{
        clickHandle(){
            console.log(111);
        }
    }
}
</script>

         2.阻止事件冒泡

<template>
    <div @click="clickDiv">
        <p @click.stop="clickp">测试冒泡</p>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        clickDiv(){
            console.log("div");
        }，
        clickP({
            console.log("p");
        }
    }
}
</script>

四、数组变化侦测

        1.更新方法

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

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

<template>
    <div>
        <p v-for="(item, index) in names" :key="index">{{ item }}</p>
        <button @click="clickAddNamesHandle">增加数据</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            names: ["iwen","ime", "frank"]
        }
    },
    methods:{
        clickAddNamesHandle(){
        this.names. push("sakura")
        }
    }
}
</script>

        2.替换一个数组

变更方法,顾名思义,就是会对调用它们的原数组进行变更。相对地,也有一些不可变(immutable)方法,例如 filter(),concat()和 slice(),这些都不会更改原数组,而总是返回一个新数组。当遇到的是非变更方法时,我们需要将旧的数组替换为新的

<template>
    <div>
        <h3>数组1</h3>
        <p v-for="(item, index) in nums1" :key="index">{{ item }}</p>
        <h3>数组2</h3>
        <p v-for="(item, index) in nums2" :key="index">{{ item }}</p>
        <button @click="filterHanedle">合并数据</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            nums1: [1, 2, 3,4, 5],
            nums2: [6,7, 8, 9, 10]
        }
    },
    methods : {            
        concatHandle(){
            this.nums1 = this.nums1.concat(this.nums2)
        }
    }
}
</script>

五、计算属性

        模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

<template>
    <div>
        <h3>{{ itbaizhan.name }}</h3>
        <p>{{ itbaizhanContent }}</p>
    </div>
</template>
<script>
export default {
        data(){
            return{
                itbaizhan:{
                    name:"java开发",
                    content:["前端","Java","python"]
            }
        }
    },
    computed : {
        itbaizhanContent(){
        return this.itbaizhan.content.length > 0 ? 'Yes' : "No"
        }
    }
}
</script>