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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。