Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。Vue+webpack也成了很多開發(fā)項目的標配。在學習的過程中也碰到了很多坑，在這里分享下自己學習的一些心得。

　　Vue是組件化的，每一個部分都可以做成一個組件，但是這里就出現了一個問題，就是組件之間如果涉及到傳值問題，就會比較麻煩。如果涉及到兄弟組件的傳值，我們可以給Vue實例上掛載一個$bus屬性

　　之后可以通過this.$bus.$emit來推送數據，this.$bus.$on來接收數據。

　　Vue本身并不鼓勵使用DOM操作(并不是不能)，如果你希望獲取到節(jié)點，那么可以通過ref屬性做到。

　　然后可以通過this.$refs訪問到所有具有ref屬性的節(jié)點。

　　如果你希望獲取input的value值，你還可以通過v-model屬性做到。V-model實際上實現了數據的雙向綁定。把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。如果用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定。什么情況下用戶可以更新View呢?填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態(tài)就被更新了，如果此時MVVM框架可以自動更新Model的狀態(tài)，那就相當于我們把Model和View做了雙向綁定。Vue是采用數據劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調來實現數據的雙向綁定的。

　　Vue本身提供了特有的計算屬性computed。經常有人會分不清computed和watch。關于computed和watch的比較，computed是計算屬性，會被混入到Vue實例中，計算屬性具有依賴性，如果依賴的那個數值沒有發(fā)生改變，那么就會執(zhí)行一次，除非依賴發(fā)生改變，它才會重新開始計算。watch是觀察屬性，Vue將會在實例化的時候調用watch，遍歷watch對面的每一個屬性，當其中屬性發(fā)生變化時，都會觸發(fā)watch。以上兩種都不能使用箭頭函數來定義，因為箭頭函數是綁定了父級作用域的上下文，此時的this并沒有指向Vue實例。

　　另外一個容易弄混的是指令v-if和v-show。兩者的區(qū)別是，v-if和v-show都能夠控制組件的顯示和隱藏，區(qū)別在于v-show為false的時候頁面加載的時候就會把組件加載進來，只是把組件的display屬性設置為none而已，然后v-if為false的，組件是不會加載進來的，只有當值為true的時候才會把組件加載進來，所以實現按需加載就可以使用v-if，只是控制組件的顯示隱藏就可以使用v-show。

上一篇

Java基礎知多少 千鋒成都Java培訓學員分享學習收獲

下一篇

學員分享 參加千鋒成都軟件測試培訓的學習成果