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

时间 2019-11-08

标签 vue2.x vue 学习事件处理生命周期钩子繁體版

原文原文链接

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

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

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

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

事件处理

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

v-on后面能够绑定的事件指令还有不少，如：submit,keyUp,scroll,mouseout,mousever...
v-on:click是咱们比较经常使用的指令。框架

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

<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>