Vue2.x学习三：事件处理&生命周期钩子

头像
WUJYAN
    阅读 6 分钟
    5

    这里，我们要补充一下
    在之前的学习中，我们说到了在构建new Vue()实例对象中，我们往里面写了el和data属性，其实还有其他属性，如：methods,watch,computed,props,以及生命周期钩子函数等。
    我们知道，el是Vue实例的作用对象，data定义所有页面中的数据。
    而methods则存放我们定义的所有的事件处理函数，watch中存放我们要侦听的函数；
    生命周期钩子下面的内容会介绍，computed，props在之后的学习中会有详细说明。

    它的大概的完整形式就是这样的：

    new Vue{
    el:'',       //执行vue实例服务的视图
    data:{},     //定义数据模型
    methods:{},  //定义函数，主要用于事件的绑定
    watch:{},    //监听某一个数据的变化
    conmputed:{},//计算机属性
    事件钩子函数...
  }

    大概了解了以上补充内容之后，我们接着来学习事件处理。

    事件处理

    在事件处理中，我们用v-on 指令来用于监听DOM事件。它的参数为事件指令名称，引号内为绑定的（methods中的）事件处理函数（需要调用的方法名称）。
    它的语法形式是： v-on:event="事件处理函数"。
    例如：v-on:click="handler"
    当然，v-on:可以简写为@。
    例如：@click="handler"。

    v-on后面可以绑定的事件指令还有很多，如：submit,keyUp,scroll,mouseout,mousever...
    v-on:click是我们比较常用的指令。

    下面我们写一个简单应用来测试一下：

    <body>
    <div class="container">
        <!-- 我们在此处定义当我们点击时触发handler方法，
        相应的，在methods中存放handler的方法即可
        如果handler事件中需要传递参数，那么要加括号，如handler(data)
        参数可以为常规值或事件对象$event
         -->
        <button @click="handler">点击按钮</button>
        <!-- 
        也可以写成 
        <button v-on:click="handler">点击按钮</button>
         -->
    </div>

    <script type="text/javascript">
        new Vue({
            el:'.container',
            data:{
                
            },
            //存放所有定义的方法或事件处理机制
            methods:{
                handler(){
                    alert("你点击了按钮~~");
                }
                /*
                handler(){},是es6的写法
                es5的写法是这样的：
                handler:function(){
                    alert("你点击了按钮~~");
                }
                箭头函数的写法是这样的：
                handler:()=>{
                    alert("你点击了按钮~~");
                }
                */
            }
        });
    </script>
</body>

    v-on除了直接绑定一个方法，也可以内联javascript语句，可以用特殊变量$event把原生dom事件传入方法。
    当然，这种情况比较少见，一般来说，数据驱动框架对模型的操作比较少（主要用数据改变模型，而非dom事件）。

    我们不推荐用特殊变量$event把原生dom事件传入方法，是因为我们之所以传event对象，主要是因为event中，我们要用到preventDefault，stopPropagation（以及获取target和this），我们主要是要通过事件对象来获取这样的信息。
    但是在vue中，我们可以通过事件修饰符来解决这样的问题。

    事件修饰符

    它的语法形式是：在v-on:指令名称后面用点操作符"."加上一个事件修饰符。
    有以下几种修饰符：
    1).stop
    stop：停止事件冒泡

    <!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

    2).prevent
    prevent：阻止事件的默认行为

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

    3).capture
    capture：事件捕获

    <!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

    4).self
    self：事件在当前元素本身上时触发

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</

    5).once
    once：只触发一次事件

    <!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

    6).passive
    passive：能够提升移动端的性能

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

    修饰符还可以串联

    <a v-on:click.stop.prevent="doThat"></a>

    或者只有修饰符，不加事件

    <form v-on:submit.prevent></form>

    按键修饰符

    在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符keyUp。

    举例

    <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

    全部的按键别名：
    .enter
    .tab
    .delete
    .esc
    .space
    .up
    .down
    .left
    .right

    生命周期钩子

    每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
    也就是说，从vue开始工作到vue完毕之后，这整个过程，我们是可以插入一些代码进去的，使得它能够在每一阶段做相应的事情。

    生命周期按顺序分为以下八个部分，分别为：
    beforeCreat：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，
    beforeMount：在挂载开始之前被调用。
    mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
    updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    beforeDestroy：实例销毁之前调用。
    destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

    下面我们来简单的尝试一下：
    (请按顺序阅读以下代码)

    <body>
    <div class="container">
        <p>{{msg}}</p>
        <!-- <input type="text" v-model="msg"> -->
    </div>

    <script type="text/javascript">
        new Vue({
            el:'.container',
            data:{
                msg:'hello lifecycle'
            },
            //实例初始化之后（刚刚创建了实例，还没初始化data,methods,computed...）
            beforeCreate(){
                 //console.log(this);//在事件钩子中，this代表当前对象实例
                 console.log(this.$data);//undefined
                 //此时有vue中的值但未被初始化，{{msg}}未被解析          
                 alert('beforeCreate');//alert可以阻塞当前代码的运行      
            },
            //创建了实例，初始化了data,methods,，computed...，并且启动了数据监听
            created(){
                console.log(this.$data);//[object Object]: {msg: "hello lifecycle"}
                //此时{{msg}}还未被解析，我们可以手动添加msg的值
                this.msg = 'hello world';
                console.log(this.$data);//[object Object]: {msg: "hello world"}
                alert('created');                
            },
            //在数据挂载之前，可以对数据做最后一次修改
            beforeMount(){
                this.msg = 'last change';
                console.log(this.$data);//[object Object]: {msg: "last change"}
                alert('beforeMount');
            },    
            //数据挂载(渲染)之后，即model中的数据显示到了view中        
            mounted(){
                //此时在页面中打印出hello world
                alert('mounted');
            },
            //以上四个阶段在一次渲染之后就不会再执行了

            //模型发生改变，数据渲染之前执行
            beforeUpdate(){
                alert('update');//未执行，因为值没改变
                //想要改变的话可以在上面代码中加入    <input type="text" v-model="msg">
                //一旦发生改变，beforeUpate就会被反复执行
            },
            //模型发生改变，并且数据渲染之后执行
            updated(){
                alert('updated');//每次改变都会被激发
            },
            //vue实例销毁之后（一般我们等不到它销毁）
            beforeDestroy(){
                alert('beforeDestroy');
            },
            //vue实例销毁之后
            destroyed(){
                alert('destroyed');
            },
            //监听数据的变化
            watch:{
                //这里我们监听msg的变化
                msg:{
                    handler(now,old){
                        console.log(now,old);//打印当前值和之前的值 last change hello lifecycle
                    }
                }
            },
        });
    </script>
</body>
    vue.js
    WUJYAN
    48 声望4 粉丝

    最近忙到飞起，Vue2.x暂时不更新......

    « 上一篇
    Vue2.x学习二：数据渲染
    下一篇 »
    Vue2.x学习四：过渡&动画

    引用和评论

    推荐阅读
    头像
    Vue2.x学习五：组件

    WUJYAN赞 2阅读 1.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.3k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 578评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 1k

    0 条评论
    得票最新