vue.js 學習筆記

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
核心思想是：數據驅動、組件系統。

 

11個生命週期函數 

beforecreated：el 和 data 並未初始化 -------------在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

created：完成了 data 數據的初始化，el沒有 -----------在實例建立完成後被當即調用。在這一步，實例已完成如下的配置:數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount：完成了 el 和 data 初始化 --------在掛載開始以前被調用:相關的 render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。

mounted ：完成掛載--------el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
該鉤子在服務器端渲染期間不被調用。 

beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。 

updated：因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。注意 updated 不會承諾全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠用 vm.$nextTick 替換掉 updated：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
該鉤子在服務器端渲染期間不被調用。

activated：keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。 

deactivated：keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。 

beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。該鉤子在服務器端渲染期間不被調用。 

destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

errorCaptured：2.50版本新增 當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數: 錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

 

vue-cli 主要目錄結構：
　　index.html：通常只定義一個空的根節點，在main.js裏面定義的實例將掛載在#app節點下，內容經過vue組件填充。
　　src/ App.vue：是項目主組件，也是項目全部組件和路由的出口，以後它會被渲染到項目根目錄的 index.html 中顯示出來，咱們能夠在這裏寫一些適合全局的css樣式。
　　src/ main.js：入口文件，引入了vue模塊和app.vue組件以及路由router，咱們須要在全局使用的一些東西也能夠定義在這裏面。
　　src/router index.js：路由配置文件。

 

指令:
v-bind 屬性的綁定 簡寫 " : "
v-if 控制一個元素是否顯示(會對DOM進行建立和刪除操做 有較高的切換性能消耗)
v-show 控制一個元素是否顯示（切換了元素的display:none/block;樣式，有較高的初始渲染消耗）
v-for 數據循環
v-on 事件綁定 簡寫 " @ "
v-model 數據的雙向綁定

v-on @ 事件修飾符：
　　.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡
　　.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（若是事件可取消，則取消該事件，而不中止事件的進一步傳播）
　　.capture：與事件冒泡的方向相反，事件捕獲由外到內
　　.self：只會觸發本身範圍內的事件，不包含子元素
　　.once：只會觸發一次

v-for：若是用v-for迭代數字的話，前面的count值從1開始
　　<p v-for = "count in 10">這是第{{ count }} 次循環</p>

 

組件化實例
　　<div id="app">
　　　　<app-nav></app-nav>
　　　　<app-view>
　　　　　　<app-sidebar></app-sidebar>
　　　　　　<app-content></app-content>
　　　　</app-view>
　　</div>

 

在子組件中定義data ，data必須是個函數而不能是個對象
data：function(){
　　return {
　　　　content: "xiaozhong"
　　}
}

 

在vue中咱們能夠經過ref="zjz"獲取DOM節點  this.$refs.zjz.      ，進而來操做DOM

vue中單向數據流概念：子組件中只能使用父組件中傳過來的值，而不能更改，如需更改需克隆一份修改父組件經過屬性的方式向子組件傳值，子組件經過事件觸發的方式向父組件傳值

vue組件的屬性使用和不使用冒號的區別：加冒號的，說明後面的是一個變量或者表達式；沒加冒號的後面就是對應的字符串字面量！

非父子組件間的傳值：{
　　1.vuex
　　2.發佈訂閱模式---總線機制---Bus---觀察者模式 not_father_son.html
}

插槽(slot)：具名插槽，做用域插槽

 

使用animate.css ：只要在須要動畫的標籤外的transition標籤裏添加對應屬性，好比enter-active-class=「animated swing」，leave-active-class=「animated shake」便可

js動畫效果：注意事件函數中所傳遞的參數及某些事件函數返回的函數　　1. 進入動畫鉤子：before-enter; enter; after-enter　　2. 離開動畫鉤子：before-leave; leave; after-leave　　3. 在enter鉤子中的函數調用done()告訴VUE js動畫完成　　4. 使用velocity.js動畫庫實現動畫：Velocity（el，{樣式屬性}，{duration:1000，complete：done}）　　5. 中文文檔：http://www.mrfront.com/docs/velocity.js/index.html