Vue.js 事件处理

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>on</title>
</head>
<body>
    <div id="on">
        <span>这个按钮被点击了 {{ counter }} 次。</span><br>
        <button v-on:click="counter += 1">增加 1</button>

        <br><br>
        <button v-on:click="say('hi')">Say hi</button>

        <br><br>
        <button v-on:click="greet">Greet</button>

        <!--事件修饰符-->

        <a v-on:click.stop="doThis"></a>    <!-- 阻止单击事件冒泡 -->

        <form v-on:submit.prevent="onSubmit"></form>  <!-- 提交事件不再重载页面 -->

        <a v-on:click.stop.prevent="doThat"></a>    <!-- 修饰符可以串联  -->

        <form v-on:submit.prevent></form> <!-- 只有修饰符 -->

        <div v-on:click.capture="doThis"></div>  <!-- 添加事件侦听器时使用事件捕获模式 -->

        <div v-on:click.self="doThat"></div>   <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->

        <div v-on:click.once="doThis"></div>   <!--单击事件只触发一次-->

        <!--按键修饰符-->

        <input v-on:keyup.13="submit" value="submit">

        <input v-on:keyup.enter="submit" value="submit">  <!-- 只有在 keyCode 是 13 时,也就是“enter”时调用 vm.submit() -->
        <!--enter + Click -->

        <!--全部的按键别名:-->
        <!--.enter-->
        <!--.tab-->
        <!--.delete (捕获 “删除” 和 “退格” 键)-->
        <!--.esc-->
        <!--.space-->
        <!--.up-->
        <!--.down-->
        <!--.left-->
        <!--.right-->
        <!--.ctrl-->
        <!--.alt-->
        <!--.shift-->
        <!--.meta-->
        <input @keyup.alt.67="clear" value="2">  <!-- Alt + C + Click-->
        
    </div>

    <script src="js/vue.js"></script>
    <script>
//      通过全局config.keyCodes 对象自定义按键修饰符别名:可以使用 v-on:keyup.f1
//      Vue.config.keyCodes.f1 = 112
        var vm = new Vue({
            el:"#on",
            data: {
                counter: 0,
                name:"vue.js"
            },
            methods:{
                say: function (message) {
                    alert(message);
                },
                greet:function(event){
                    alert('Hello ' + this.name + '!');
                    // `event` 是原生 DOM 事件
                    alert(event.target.tagName);
                },
                submit:function(){
                    alert("submit");
                },
                clear:function(){
                    alert("clear");
                }
            }
        });
    </script>


</body>
</html>

 

posted @ 2017-02-23 13:32  米娜-火箭  阅读(181)  评论(1编辑  收藏  举报