vue中的事件处理 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>vue中的事件处理</title>
</head>
<body>
    <div id="root">
        <!-- 事件回调需要配置再methods中，最终会在vm上
        methods中的配置函数不要用箭头函数
        mehods中配置的函数，都是vue管理的哈数，this指向vm或者组件实例对象
         -->
        <h1>名字 :{{name}}</h1>
        <h1>地址 :{{address}}</h1>
        <!-- 事件指令v-on 有简写写法@ -->
        <button v-on:click="shouwInfo1"> 点我提示信息1(不传参)</button>
        <!-- 事件传参$event：这个为事件内置参数,后面可再加别的参数-->
        <button @click="shouwInfo2($event,66)"> 点我提示信息2（传参）</button>
    </div>
    <script>    
        const vm=new Vue({
            el:"#root",
            data:{
                name:"xiao  bai",
                address:"bei  jing"
            },
            methods:{
                shouwInfo1(){
                    alert("你好")
                },
                shouwInfo2($event,number){//这里接收参数
                    console.log(event,number);
                   alert("你吃了吗")
                }
            }
        })
    </script>

</body>
</html>

 

posted @ 2022-10-28 10:37  小白字太白  阅读(26)  评论(0)    收藏  举报