好程序員Web前端教程分享Vue學習心得

好程序員Web前端教程分享Vue學習心得，Vue是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue也徹底可以爲複雜的單頁應用提供驅動。Vue+webpack也成了不少開發項目的標配。在學習的過程當中也碰到了不少坑，在這裏分享下本身學習的一些心得。

 

Vue是組件化的，每個部分均可以作成一個組件，可是這裏就出現了一個問題，就是組件之間若是涉及到傳值問題，就會比較麻煩。若是涉及到兄弟組件的傳值，咱們能夠給Vue實例上掛載一個$bus屬性

 

 

　　以後能夠經過this.$bus.$emit來推送數據，this.$bus.$on來接收數據。

 

Vue自己並不鼓勵使用DOM操做(並非不能)，若是你但願獲取到節點，那麼能夠經過ref屬性作到。

 

 

　　而後能夠經過this.$refs訪問到全部具備ref屬性的節點。

 

 

　　若是你但願獲取input的value值，你還能夠經過v-model屬性作到。V-model實際上實現了數據的雙向綁定。把Model綁定到View，當咱們用JavaScript代碼更新Model時，View就會自動更新。若是用戶更新了View，Model的數據也自動被更新了，這種狀況就是雙向綁定。什麼狀況下用戶能夠更新View呢?填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，若是此時MVVM框架能夠自動更新Model的狀態，那就至關於咱們把Model和View作了雙向綁定。Vue是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調來實現數據的雙向綁定的。

 

Vue自己提供了特有的計算屬性computed。常常有人會分不清computed和watch。關於computed和watch的比較，computed是計算屬性，會被混入到Vue實例中，計算屬性具備依賴性，若是依賴的那個數值沒有發生改變，那麼就會執行一次，除非依賴發生改變，它纔會從新開始計算。watch是觀察屬性，Vue將會在實例化的時候調用watch，遍歷watch對面的每個屬性，當其中屬性發生變化時，都會觸發watch。以上兩種都不能使用箭頭函數來定義，由於箭頭函數是綁定了父級做用域的上下文，此時的this並無指向Vue實例。

 

另一個容易弄混的是指令v-if和v-show。二者的區別是，v-if和v-show都可以控制組件的顯示和隱藏，區別在於v-show爲false的時候頁面加載的時候就會把組件加載進來，只是把組件的display屬性設置爲none而已，而後v-if爲false的，組件是不會加載進來的，只有當值爲true的時候纔會把組件加載進來，因此實現按需加載就可使用v-if，只是控制組件的顯示隱藏就可使用v-show。