vue.js學習筆記

0、寫在前面

通過一段時間學習，感受vue的數據驅動的思想真的挺好，簡單記錄下學習筆記，方便往後查閱、、、

 

一、基礎

MVVM即Model<--->ViewModel<--->View

{{ data }}，傳入文本

v-html="data"

指令系統：

v-bind:class="{ 'class1': use }"，動態更新屬性值，可簡寫爲:class="{ 'class1': use }"

v-on:click="doSomething"，事件監聽器，可簡寫爲@click="doSomething"

條件循環

v-if，v-else-if，v-else，v-for

計算屬性，跟普通方法比有緩存

以函數形式寫在computed內

v-model，主要用於form表單，實現了DOM和數據的雙向綁定，任意改變一方，另外一方跟着改變

component（組件），能夠子組件能夠掛父組件

slot，寫在子組件中，若是父組件有內容傳入則替換爲傳入內容

vue.js編譯時解析爲virtual DOM

object-->render-生成虛擬節點->create Element（基於虛擬節點建立DOM節點）-狀態更新後，進行對比->patch（更新DOM）

 

二、生命週期，鉤子函數

建立期間的生命週期函數：

beforeCreate：實例剛在內存中被建立出來，此時，尚未初始化好 data 和 methods 屬性

created：實例已經在內存中建立OK，此時 data 和 methods 已經建立OK，此時尚未開始 編譯模板，常在此時發送ajax初始化全局頁面，不宜過多，不然會白屏時間長

beforeMount：此時已經完成了模板的編譯，可是尚未掛載到頁面中

mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示，常在此時發送ajax初始化局部組件頁面

運行期間的生命週期函數：

beforeUpdate：狀態更新以前執行此函數， 此時 data 中的狀態值是最新的，可是界面上顯示的 數據仍是舊的，由於此時尚未開始從新渲染DOM節點

updated：實例更新完畢以後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被從新渲染好了！不可在此時操做數據，不然會進入死循環

銷燬期間的生命週期函數：

beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。可作刪除提示，例如你確認刪除xx嗎

destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 這時已經沒法操做任何東西了

 

三、經常使用插件

webpack，打包器，模塊化書寫，打包後輸出

v-router，前端路由，實現SPA（單頁面應用）的基礎

vuex，用於組件之間的數據傳遞

axios，發送接收ajax請求

element-ui，vue版的bootstrap，功能更強，更炫

 

四、模塊化開發經常使用命令

建立webpack模板的項目

vue init webpack my-project

下載package.json中的依賴包

npm install

啓動項目

npm run dev

 

五、一些問題

爲何要使用Vue？

傳統的jQuery，直接操做DOM，代碼寫多了難以維護

Vue只關心數據，數據驅動DOM，更方便的模塊化開發

SPA的優缺點？

優勢：全部頁面都在同一個HTML頁面中，後續操做開銷較小

缺點：因爲頁面內容都由js生成，沒法被搜索引擎收錄，不利於SEO

v-if和v-show的區別?

v-if是建立新的DOM，更大的開銷，適用於切換不頻繁的場景

v-show是控制css切換，更小的開銷，適用於切換頻繁的場景