成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue.js簡介和生命周期

wizChen / 1346人閱讀

摘要：五當(dāng)修改實例的時，就會自動幫我們更新渲染視圖，在這個過程中，提供的鉤子函數(shù)，在檢測我們要修改數(shù)據(jù)的時候，更新渲染視圖之前就會觸發(fā)鉤子函數(shù)。

本文詳情:http://www.zymseo.com/vue/
1、Vue.js框架是什么，為什么學(xué)習(xí)它？
世界上最好的MVVM框架：

MVVM可以拆分成：View --- ViewModel --- Model三部分


中間的監(jiān)控著負責(zé)監(jiān)控兩側(cè)的數(shù)據(jù)，相對應(yīng)的實現(xiàn)數(shù)據(jù)互通，不需要手動的去操作DOM.
Vue.js的兩大核心：數(shù)據(jù)驅(qū)動和組件化

2.最簡單的數(shù)據(jù)雙向綁定


        
        {{name}}
 






watch是一個json，每一個json的鍵名就是監(jiān)測的data中的數(shù)據(jù)，鍵值是一個function，第一個參數(shù)是新數(shù)據(jù)，第二個參數(shù)是舊數(shù)據(jù)。


4.VueJs實例的生命周期


一.beforeCreate
此階段為實例初始化，此時的數(shù)據(jù)觀察個時間配置都沒準備好，實例中的data和el還是undefined


二、created
beforeCreate之后緊接著的鉤子韓式就是created,此時我們可以讀取到data的值，但是DOM還沒有生成，多以el屬性還不存在，$data為一個object對象，而$el的值為underfined


三、beforeMount
此階段即將掛載，DOM生成，$el成功獲取關(guān)聯(lián)到節(jié)點，但是{{name}}還沒有成功的被渲染出來達成我們data里面的數(shù)據(jù)


四、mounted
mounted也就是掛載完畢階段，此時數(shù)據(jù)會被成功的渲染出來，我們編寫這個鉤子，{{name}}被成功的渲染出來。


五、beforeUpdate
當(dāng)修改vue實例的data時，vue就會自動幫我們更新渲染視圖，在這個過程中，vue提供beforeUpdata的鉤子函數(shù)，在檢測我們要修改數(shù)據(jù)的時候，更新渲染視圖之前就會觸發(fā)鉤子函數(shù)beforeUpdate。
此時我們 即將更新 data里面的數(shù)據(jù)，但是并未更新成功


六、updated
此時  我們data的數(shù)據(jù)已經(jīng)更新完畢 


七、beforeDestroy
調(diào)用$destriy()方法可以銷毀當(dāng)前組件，在銷毀前，會觸發(fā)beforeDestroy鉤子


八、destroyed


銷毀之前，修改name的值，可以成功修改視圖顯示，一旦調(diào)用實例$destroy()方法之后，實例與視圖的關(guān)系解綁，在修改name的值，視圖也不會在更新了，說明實例已經(jīng)被銷毀了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108066.html

相關(guān)文章

  • 再談Vue的生命周期----結(jié)合Vue源碼

    摘要：中的生命周期函數(shù)也可以稱之為生命周期鉤子函數(shù)，在特定的時期，調(diào)用特定的函數(shù)。吊起鉤子函數(shù)調(diào)起鉤子函數(shù)問題為什么是一個數(shù)組卸載組件，會觸發(fā)一個這行代碼之后發(fā)生了什么背后實現(xiàn)原理。 簡介 關(guān)于Vue的生命周期函數(shù)，目前網(wǎng)上有許多介紹文章，但也都只是分析了表象。這篇文檔，將結(jié)合Vue源碼分析，為什么會有這樣的表象。 Vue中的生命周期函數(shù)也可以稱之為生命周期鉤子（hook）函數(shù)，在特定的時期...

    KavenFan 評論0 收藏0

  • 詳解 mpvue 小程序框架 及和原生的差異

    摘要：在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)。可以直接寫等標(biāo)簽的寫法之前會的工程師上手框架的成本較低 簡介 1.美團工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點3.可完全組件化開發(fā) 特點 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項目5.最終H5...

    IamDLY 評論0 收藏0

  • Vue.js基礎(chǔ)教程

    摘要：自定義名稱縮放控制器可以使用中的動畫設(shè)計更為華麗的效果。在和中必須使用，不然它們會同時生效，動畫也會瞬間完成。先在標(biāo)簽內(nèi)加入，接著類似自定義動畫可以給命名。 文章鏈接：Vue.js基礎(chǔ)教程 開發(fā)工具準備： 根據(jù)個人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode； 安裝git base和node.js； 安裝vue-cli，命令npm i -g @vue/...

    XboxYan 評論0 收藏0

  • vue 源碼學(xué)習(xí)（一） 目錄結(jié)構(gòu)和構(gòu)建過程簡介

    摘要：框架使用了作為類型檢查，來保證項目的可讀性和維護性。的主目錄下有的配置文件，還有目錄，指定了各種自定義類型。表示構(gòu)建出來的文件遵循規(guī)范。 Flow vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。 在學(xué)習(xí)源碼前可以先看下Flow的語法 官方文檔 目錄結(jié)構(gòu) vue....

    lavnFan 評論0 收藏0

  • Vue 實例中的生命周期鉤子詳解

    摘要：實例在文檔中經(jīng)常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

    gityuan 評論0 收藏0

發(fā)表評論

0條評論

wizChen

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<