Vue_(基础)Vue中的事件

　　Vue.js中文文档　　传送门

Vue_(基础)Vue中的事件

　　Vue@事件绑定
　　　　v-show：通过切换元素的display CSS属性实现显示隐藏；
　　　　v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；
　　　　v-else：与v-if配对使用；
　　　　v-elseif：与v-if配对使用；
　　　　v-bind：属性绑定；
　　　　v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}；

　　Learn
　　　　一、event事件
　　　　二、v-show和v-if指令
　　　　三、键盘事件
　　　　四、v-bind指令

　　项目结构

　　 Vue_(基础)Vue中的事件

　　【每个demo下方都存有html源码】

一、event事件　　传送门

　　Vue的事件：获取事件对象$event；

　　button上绑定show()方法获得Vue上的event事件

                        show(e){
                            console.log("show");
                            //获得Vue事件
                            console.log(e);
                        }

                <button @click="show($event)">click show!</button><br />

Vue_(基础)Vue中的事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            
            window.onload = () =>{
                new Vue({
                    el:'#Gary',
                    data:{
                           result:0
                    },
                    methods:{
                        //无参
                        show(e){
                            console.log("show");
                            //获得Vue事件
                            console.log(e);
                        },
                        //带参
                        add(a,b){
                            console.log("add");
                            this.result+=a+b;
                        }
                    }
                });
            }
            
        </script>
    </head>
    
    
    <body>
        <div id="Gary">
                <button @click="show($event)">click show!</button><br />
                <!--鼠标点击-->
                <button @click="add(1,2)">click add!</button>{{result}}
                <!--鼠标进入,使用修饰符once只触发一次-->
                <button @mouseenter.once="add(10,20)">enter add!</button>{{result}}
        </div>
        
    </body>
</html>

View Code