一些vue的基本操作
阿新 • • 發佈：2018-12-10
MVVM
Vue中是如何體現MVVM
參考:https://cn.vuejs.org/v2/guide/instance.html
指令
作用:取代dom操作
{{}}
v-text & v-html
v-on 事件修飾符 @keyup.13="處理函式"
v-bind 繫結 縮寫 v-bind: 縮寫成 `:`
v-model 雙向繫結 將來用在表單操作中
v-if & v-show https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-for
(item,index) in 陣列 :key="唯一的"
過渡和動畫
前提
1、我們被動畫的元素(div,p,span)，一定要包裹在Vue給我們提供的一個標籤內(transition)
2、我們被動畫的元素，只有在下列情況下，才會有過渡效果
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態元件
元件根節點
通用的特點
1、動畫整體分進入和離開兩個階段
根據它定義好的類名，來自己寫過渡
注意:
Vue在動畫進入或是離開的時候，給我們分別提供了
三個它實現定義好的類名給我們用，我們就可以通過
它提供好的型別，來寫我們自己的樣式
在Vue中使用有名的第三方動畫庫 animate
參考: https://daneden.github.io/animate.css/ 1、匯入animate 2、在被動畫的元素上，我們通過自定義類名，來使用animate.css 提供好的類名(animated fadeInRight) 3、我們的行內元素在使用一個類名的時候fadeInRight可能會有問題，把它變成塊級元素
JavaScript 鉤子(函式) 來實現動畫
1、我們在transtion上面，註冊我們進入或是離開時候的事件 2、在methonds中寫好對應的處理函式 3、在beforeEnter中，寫進入開始的狀態【以進入為例】 4、在enter中，寫進入階段的持續時間【以進入為例】 5、在afterEnter中，寫進入結束的狀態【以進入為例】 注意點: 1、我們的進入結束狀態，可以寫在afterEnter中，也可以寫在 enter中，如果我們後面要考慮使用第三方的動畫庫，來替代我們自己手寫，這個時候，建議把結束狀態放在enter中來寫 2、我們自己手寫js程式碼來實現動畫，必須在進入階段，重新整理動畫幀
Velocity.js來操作動畫
參考:http://velocityjs.org/
1、匯入velocityjs
2、在enter，leave中使用velocityjs，會大大簡化
我們js程式碼的書寫
工作中如何抉擇?
1、如果自己寫css程式碼，建議能使用Animate.css就是用它
實在沒有提供再自己寫
2、如果自己寫js程式碼，建議能使用velocityjs，就先使用它
如果實在不能滿足，再自己寫
computed & watch
參考:https://cn.vuejs.org/v2/guide/computed.html
計算屬性:
當我們需要計算某些值的時候，我們就可以使用它
特點:
1、他本質是一個函式
2、它必須要有返回值
3、計算屬性相比於普通的方法來說，是有快取的
4、計算函式中所以來的模型值，發生變化了，它會重新計算
https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95
偵聽器:
需要監聽某個值的變化的時候，就可以使用它
watch:{
模型的屬性:處理函式(新值,舊值)
}
watch 和 data同級
元件【重要】
元件的作用:
最重要的作用就是複用
全域性元件的寫法:
前四種:【學會之後，能看懂Vue的文件】
1、先定義，再註冊，最後使用
2、定義註冊一步到位，最後使用
3、對元件定義的優化1，對template寫法的優化1
4、對元件定義的優化2，對template寫法的優化1
第五種:
單檔案元件
注意點:
1、元件要想被使用，必須得註冊
2、元件的template必須有且只有唯一一個根元素
3、元件中的data必須是一個函式，並且該函式要返回一個字面量物件