VUE 入门二

最新推荐文章于 2021-02-02 16:04:34 发布

隶属感

最新推荐文章于 2021-02-02 16:04:34 发布

阅读量202

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_36445227/article/details/84882388

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-on 属性 :

<!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 src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
     <button v-on:click="showSome($event)">click me !!</button>
     
    </div>
    <script>
        new Vue({
            el :"#app",
            data :{
                    movietitle : "妖猫传",
                    movieDate : "2017"
            },
            methods : {
                showSome :function(hh){
                    console.log(hh);
                   
                alert("hhda!")
                }
            }

        })
        </script>
</body>
</html>

如果想将事件源对象传入函数, 可以使用 $event 对象(由VUE提供) 放在实参中

(我当然知道在函数中直接写 event 也可以拿到事件源对象 ) ,

要点 :

执行模式绑定 :需要事件源对象需要手写$event

非执行模式绑定 ,系统会自己将事件源对象注入到第一个参数

阻止事件冒泡:

原生代码中需要在事件中写 : event.stopPropagation();

VUE中添加了方便的方法 : v-on:click.stop = "showSome" 来达到

阻止默认事件:

v-on:click.prevent = "showSome"

点击A标签不再跳转页面

键盘事件:

判断是否按下回车键原生的需要对事件源对象中的 which 是否 ==13

VUE 如下:

如果是英文按键可以直接写 space,enter, 也可以直接 which 的值回车键写13也是可以的

事件修饰符可以链式调用例如既想要 enter 键触发也想 space 键触发可以写

键盘组合事件:

单独绑定 shift 与 ctrl 键后并不会触发事件: 需要按下shift键后再按其他键再能触发

这样组合按键事件就可以实现了:

 <div id="app">
       点击 ctrl+enter 触发 <input type="text" v-on:keyup.ctrl.13="ctrl"><br>
       点击 shift+ctrl+enter 触发 <input type="text" v-on:keyup.shift.ctrl.enter="shift"><br>
       <button v-on:click.meta="shift"> 点击系统修饰符 win/mac + 左键点击 触发</button>
    </div>
    <script>
        new Vue({
            el :"#app",
            methods : {
                shift :function(){
                    alert('shift');
                },
                ctrl : function(){
                    alert('ctrl');
                },
                meta : function(){
                    alert('你点击了系统修饰符并点击了左键!');
                }
            }

        })
    </script>

小例子: 用之前所学实现双向数据绑定:

<div id="app">
      <input type="text" v-on:input="change()"  >
        output :{{val}}
    <input type="text" v-on:keydown.enter="change()"  >
        output :{{val}}
        <form action="">
            <input type="submit" v-on:submit.prevent value="保存">
        </form>
    </div>
    <script>
        new Vue({
            el :"#app",
            data:{
                val:123
            },
            methods : {
                change :function(){
                    this.val =event.target.value;
                }
            }

        })
    </script>