美文网首页
Vue.js,学习心得(九)

Vue.js,学习心得(九)

作者: 战神飘雪 | 来源:发表于2017-11-02 02:17 被阅读11次

学习心得,
事件处理,

直接上代码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app-1">
    <button v-on:click="counter += 1">{{msg}}</button>
    <p>这个按钮被点击了 {{counter}} 次.</p>
</div>
<hr>

<div id="app-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">{{msg}}</button>
</div>
<hr>

<div id="app-3">
    <button v-on:click="say('hi')">{{msg1}}</button>
    <button v-on:click="say('what')">{{msg2}}</button>
</div>
<hr>

<!--有时也需要在内联语句处理器中访问原生 DOM 事件。-->
<!--可以用特殊变量 $event 把它传入方法:-->
<div id="app-4">
    <button v-on:click="warn('表格尚未提交',$event)">{{msg}}</button>
</div>
<hr>


<!--在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。-->
<!--尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。-->
<!--为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。-->
<!--通过由点 (.) 表示的指令后缀来调用修饰符。-->
<!--.stop-->
<!--.prevent-->
<!--.capture-->
<!--.self-->
<!--.once-->

<div id="app-5" v-on:click="doThat">
    <!-- .stop,阻止单击事件冒泡-->
    <a v-on:click.stop="doThis" v-bind:href="url">{{msg}}</a>
    <br>

    <!-- .prevent,提交事件不再重载页面-->
    <form v-on:submit.prevent="onSubmit"><button type="submit">点这里</button></form>
    <br>

    <!--修饰符可以串联-->
    <a v-on:click.stop.prevent="doThat" v-bind:href="url">{{msg}}</a>
    <br>

    <!-- .prevent,只有修饰符-->
    <form v-on:submit.prevent><button type="submit">点这里</button></form>
    <br>

    <!-- .capture,添加事件侦听器时使用事件捕获模式-->
    <!--.capture改变了 函数回调顺序,添加过的优先触发,顺序为:.capture>触发事件本身>冒泡父级-->
    <div v-on:click.capture="doThis"><button v-on:click="doThisIn">{{msg}}</button></div>
    <br>

    <!--.self,只当事件在该元素本身(比如不是子元素)触发事件触发回调-->
    <div v-on:click.stop.self="doThis">{{msg}}</div>
    <div v-on:click.stop.self="doThis"><button>{{msg}}</button></div>
    <br>

    <!-- .once,点击事件将只会触发一次 -->
    <a v-on:click.once="doThis">{{msg}}</a>
    <br>
</div>
<hr>

<!--全部的按键别名:-->
<!--.enter-->
<!--.tab-->
<!--.delete (捕获“删除”和“退格”键)-->
<!--.esc-->
<!--.space-->
<!--.up-->
<!--.down-->
<!--.left-->
<!--.right-->
<div id="app-6">
    <!--只有在keycode是13的时候调用app6.submit()-->
    <input v-on:keyup.13 = 'submit1'>
    <!--记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:-->
    <input v-on:keyup.enter = 'submit2'>
    <!--缩写语法-->
    <input @keyup.f1 = 'submit3'>
</div>
<hr>

<div id="app-7">
    <!--你也可以通过将它们转换到 kebab-case -->
    <!--来直接使用由 KeyboardEvent.key 暴露的任意有效按键名作为修饰符:-->
    <input @keyup.page-down="onPageDown">
    <!--在上面的例子中,处理函数仅在 $event.key === 'PageDown' 时被调用。-->
    <!--极少数的键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, -->
    <!--如果你想支持 IE9,它们的内置别名应该是首选。-->
</div>
<hr>

<div id="app-8">
    <!--可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。-->
    <!--.ctrl-->
    <!--.alt-->
    <!--.shift-->
    <!--.meta-->
    <!--注意:在 Mac 系统键盘上,meta 对应命令键 (⌘)。-->
    <!--在 Windows 系统键盘 meta 对应 windows 徽标键 (⊞)。-->
    <!--在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。-->
    <!--在其他特定键盘上,尤其在 MIT 和 Lisp 键盘及其后续,-->
    <!--比如 Knight 键盘,space-cadet 键盘,meta 被标记为“META”。-->
    <!--在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。-->
    <!--Alt + C-->
    <input @keyup.alt.67="clear">
    <br>
    <br>
    <div @click.ctrl="doSomething">Do something</div>
    <!--修饰键比正常的按键不同;修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。-->
    <!--换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;-->
    <!--单单释放 ctrl 不会引发事件。-->
</div>
<hr>

<div id="app-9">
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">{{msg}}</button>
    <!-- 只有在 Ctrl 被按下的时候触发 -->
    <button @click.ctrl.exact="onCtrlClick">{{msg}}</button>
</div>
<hr>

<div id="app-10">
    <!--.left-->
    <!--.right-->
    <!--.middle-->
    <!--这些修饰符会限制处理程序监听特定的滑鼠按键。-->
    <button @click.left.exact="leftClick">{{msg}}</button>

    <!--经过测试,@click.right 无法使用,需要更改为@contextmenu-->
    <!--<button @click.right.exact="rightClick">{{msg}}</button>-->
    <button @contextmenu.exact="rightClick">{{msg}}</button>
    <!--经过测试,@click.middle 目前还未发现使用方法-->
    <button @click.middle.exact="middleClick">{{msg}}</button>
</div>
<hr>
<script>
    //取消鼠标右键默认点击事件
    document.oncontextmenu = function(){
        return false;
    };

    //事件处理
    //监听事件
    //可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
    var app1 = new Vue({
        el:"#app-1",
        data:{
            msg:"增加1",
            counter: 0
        }
    });

    var app2 = new Vue({
        el:"#app-2",
        data:{
            msg:"Greet",
            name:"Vue.js"
        },
        methods:{
            greet:function(event){
                // `this` 在方法里指当前 Vue 实例
                alert("HELLo" + this.name + "!");
                //event 是原生DOM事件
                if(event){
                    alert(event.target.tagName);
                }
            }
        }
    });
    // 也可以用 JavaScript 直接调用方法
    //        app2.greet();

    //内联处理器方法
    //除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
    var app3= new Vue({
        el:"#app-3",
        data:{
            msg1:"say hi",
            msg2:"say what"
        },
        methods:{
            say:function(message){
                alert(message);
            }
        }
    });

    //有时也需要在内联语句处理器中访问原生 DOM 事件。
    // 可以用特殊变量 $event 把它传入方法:
    var app4 = new Vue({
        el:"#app-4",
        data:{
            msg:"提交"
        },
        methods:{
            warn:function(message,event){
                //现在我们可以访问原生事件对象
                if(event){
//                        取消默认事件
                    event.preventDefault();
                    alert(message);
                }
            }
        }
    });

    //事件修饰符
    //        使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
    //        因此,用 @click.prevent.self 会阻止所有的点击,
    //        而 @click.self.prevent 只会阻止元素上的点击。
    var app5 = new Vue({
        el:"#app-5",
        data:{
            msg:"占位符~",
            url:"http://www.baidu.com"
        },
        methods:{
            doThis:function(){
                alert("doThis");
                console.log("doThis");
            },
            onSubmit:function(){
                alert("onSubmit");
                console.log("onSubmit");
            },
            doThat:function(){
                alert("doThat");
                console.log("doThat");
            },
            doThisIn:function(){
                alert("doThisIn");
                console.log("doThisIn");
            }
        }
    });

    //键值修饰符
    //        可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 13;
    var app6 = new Vue({
        el:"#app-6",
        data:{
            msg:"占位~"
        },
        methods:{
            submit1:function(){
                console.log("submit1");
            },
            submit2:function(){
                console.log("submit2");
            },
            submit3:function(){
                console.log("submit3");
            }
        }
    });

    //自动匹配按键修饰符
    var app7 = new Vue({
        el:"#app-7",
        data:{

        },
        methods:{

        }
    });

    //系统修饰健
    var app8 = new Vue({
        el:"#app-8",
        data:{

        },
        methods:{
            clear:function(){
                console.log("clear");
            },
            doSomething:function(){
                console.log("doSomething");
            }
        }
    });
    //.exact修饰符
    //.exact 修饰符应与其他系统修饰符组合使用,以指示处理程序只在精确匹配该按键组合时触发。
    var app9 = new Vue({
        el:"#app-9",
        data:{
            msg:"点击试试"
        },
        methods:{
            onClick:function(){
                console.log("onClick");
            },
            onCtrlClick:function(){
                console.log("onCtrlClick");
            }
        }
    });

    //鼠标按钮修饰符
    var app10 = new Vue({
        el:"#app-10",
        data:{
            msg:"点击试试"
        },
        methods:{
            leftClick:function(){
                console.log("leftClick");
            },
            rightClick:function(){
                console.log("rightClick");

            },
            middleClick:function(){
                console.log("middleClick");
            }
        }
    });

    //        为什么在 HTML 中监听事件?
    //        你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 传统理念。
    //        不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,
    //        它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:
    //        1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    //        2.因为你无须在 JavaScript 里手动绑定事件,
    //        你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
    //        3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。
    //        你无须担心如何自己清理它们。
</script>
</body>
</html>

相关文章

网友评论

      本文标题:Vue.js,学习心得(九)

      本文链接:https://www.haomeiwen.com/subject/xbgnpxtx.html