MVC 設計模式 作用: view 和model分離
VueJS
下載 1 直接下載vue.js的文件2使用vue-cli
指令
v-model 數據綁定
v-for 循環、迭代
v-bind 綁定屬性
v-on 添加事件
v-text 純文本
v-html html
v-cloak 防止閃屏
v-pre 跳過編譯
簡寫
@click
@keydown
:href
:src
:key
生命周期鉤子
beforeCreate 創建前
created 創建后
beforeMount 掛載前
mounted 掛載后
beforeUpdate 數據更新前
updated 數據更新后
beforeDestroy 銷毀前
destroyed 銷毀后
自定義指令
vue.directive('指令名',function(el){
當前對象
coding...
});
事件深入玩法
@click.prevent.stop
@keydown.enter.ctrl
自定義按鍵
Vue.config.keyCodes.xxx = 鍵碼;
過濾器 filter
文本過濾器
filters: {
xxx: function(arg1,arg2...){
return 處理后的結果;
}
}
{{message:xxx(xxx,xx,xx..)}}
數據過濾器
computed: {
xxx: function(arg1,arg2,arg3){
操作
返回
}
}
v-for="item in xxx"
computed 計算屬性
相比較methods,更加節省性能。適合用于重復渲染,邏輯復雜的計算。
computed: {
xxx: function(){
操作
return ;
}
}
組件 Component
路由 Router(SPA)
過渡 transition
數據交互 (axios、vue-resouce...等三方)
狀態管理 VueX
腳手架 Vue-cli