vue事件 | 易学教程

1、v-on:click 单击事件

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src = "vue.js"/>
    <script>
        var c = new Vue({
            el:'#box',
            data:{
                arr:['a','b','c','d']
            },
            methods:{
                show:function(){
                    alert(1);
                },
                add:function(){
                    this.arr.push('e')
                }
            }
        });
    </script>
</head>
<body>
        <div id = "box">
            <input type = "button" value = "button" v-on:click="show()">
            <input type = "button" value = "button" v-on:click="add()">
　　　　　　　<br>
　　　　　　　　<ul><li v-for = "value in arr">{{value}}</li></ul>

        </div>
</body>
</html>

v-on:mouseover、mouseout、mousedown、mouseup、dblclick....

2、v-show = "true/false" 显示、隐藏

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src = "vue.js"/>
    <script>
        var c = new Vue({
            el:'#box',
            data:{
                arr:['a','b','c','d'],
                a:true
            },
            methods:{
                show:function(){
                    alert(1);
                },
                add:function(){
                    this.arr.push('e')
                }
            }
        });
    </script>
</head>
<body>
        <div id = "box">
            <input type = "button" value = "button" v-on:click="a=false">
            <input type = "button" value = "button" v-on:click="add()"  v-show="a">
        </div>
</body>
</html>

补充：

v-on:click 简写： @click

事件对象：

　　@click = "show($event)"

事件冒泡：子事件结束后父事件相继冒泡执行

　　阻止事件冒泡：

　　　　1、event.cancelBubble = true;

　　　　2、@click.stop = "show()" //推荐

默认事件

　　　　@contextmenu = "show($event)" //右击事件，右击浏览器会默认弹出菜单

　　阻止默认事件：

　　　　1、event.preventDefault();

　　　　2、@contextmenu.prevent = "show()"

键盘事件

　　@keydown = "show($event)" @keyup

　　show:function(ev){

　　　　alert(ev.keyCode);　　

　　}

　　常用键：

　　　　回车 @keyup.13 @keyup.enter

　　　　上，下，左，右 up,down,left,right

来源：oschina

链接：https://my.oschina.net/u/4366204/blog/4047289

标签

contextmenu

Vue.js