Vue2.0 Vue事件处理(v-on)

最新推荐文章于 2024-03-31 21:19:53 发布

结城明日奈是我老婆

最新推荐文章于 2024-03-31 21:19:53 发布

阅读量732

点赞数 2

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121904244

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue事件处理</title>
    </head>
    <body>
        <div id="root">
            <h2>欢迎{{name}}来学习Vue</h2>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip=false

new Vue({
    el: '#root',
    data(){
        return{
            name: '陈天羽'
        }
    }
})

要想来一个按键,叫做点我提示信息点了后出现弹窗，弹窗提示同学你好

<button>点我提示信息</button>

得给这个按钮绑定信息

在Vue要给元素绑定事件得用到一个v-on指令,v-on当什么什么时候v-on:click当被点击的时候你帮我去执行一个回调函数，这回调函数是v-on:click="showInfo"

<button v-on:click="showInfo">点我提示信息</button>
<!--当你(v-on)点击(click)button元素的时候它就帮你找名为showInfo的函数去调用-->

最简单的方式，在里面定义一个

function showInfo(){
    alter('同学你好')
}

 Property or method "showInfo" is not defined

有一个属性或者一个方法名为showInfo是没有定义的
并不能看到上面写的方法

这里容器通过id与Vue实例进行连接，所以function里面的方法得想办法添加到Vue实例中;得用一个配置项methods

new Vue({
    el: '#root',
    data(){
        return{
            name: '陈天羽'
        }
    },
    methods: {
        showInfo(){
            alert('同学你好')
        }
    },
})

这就是一个最简单的事件绑定

问题一:这showInfo能不能接收到参数

methods: {
        showInfo(a,b,c,d){
            console.log(a,b,c,d)
        }
    }

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …} undefined undefined undefined

Event事件对象

event.target//拿到发生事件的事件目标

可以event.target.innerText

console.log(this)//此处的this是vm

v-on简写形式@符

<button v-on:click="showInfo1">点我提示信息</button>
<button @click="showInfo2">点我提示信息</button>

new Vue({
    el: '#root',
    data(){
        return{
            name: '陈天羽'
        }
    },
    methods: {
        showInfo1(event){
            console.log(event.target)
            alert('同学你好!')
        },
        showInfo2(event){
            console.log(event.target)
            alert('同学你好!!')
        }
    },
})

我还要收到比如666这个数值,可以这么来写

<button @click="showInfo2(666)">点我提示信息</button>

showInfo2(number){
            console.log(number)
            alert('同学你好!!')
        }

这里()想加和不想加都行，你不想传参就可以不加，传参就得加;你不能说你一传参就把event搞丢了，你可以(666,$event)来占个位

这样写你的showInfo1和showInfo2没有做数据代理的，这样没有数据代理就属于是你写完了就定完了

总结

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数,this的指向是vm 或组件实例对象
5.@click=“demo” 和 @click="demo($event)"效果一致，但后者可以传参