**vue生命週期:
鉤子函式:
created -> 例項已經建立
beforecompile -> 編譯之前
compiled -> 編譯之後
ready -> 插入到文件中
beforedestroy -> 銷毀之前
destroyed -> 銷毀之後
new vue(,
methods:，
created:function
()， created:function
()， created:function
()， created:function
()， created:function
()， created:function
()});
常用指令:
v-model 一般表單元素(input) 雙向資料繫結
迴圈:當會迴圈的陣列需要重複顯示動態插入的相同的資料的時候使用track-by="索引"
track-by='索引' 提高迴圈效能
v-for="name in arr"
track-by="
}">
}v-for="name in json">}}
v-for="(k,v) in json">}}
}}
事件:
v-on:click="函式"
@click="函式"
@click/mouseout/mouseover/dblclick/mousedown.....
new vue(,
methods:
}});
顯示隱藏:
v-show=「true/false」
事件物件:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelbubble=true;
b). @click.stop="函式" 推薦
預設行為(預設事件):
阻止預設行為:
a). ev.preventdefault();
b). @contextmenu.prevent 推薦
鍵盤: @keydown
@keyup
"key($event)">鍵盤事件
new vue(,
methods:
}});
常用鍵:
回車a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
屬性: v-bind:src=""
width/height/title....
簡寫: :src="" 推薦
}} = "msg">
ajax互動
如果vue想做互動需引入: vue-resouce.js檔案
有兩種寫法
get:獲取乙個普通文字資料:
new vue(,
methods:,function
(res));}}
});get資料給服務
new vue(,
methods:).then(function
(res),function
(res));}}
});post資料給伺服器:
new vue(,
methods:,).then(function
(res),function
(res));}}
});jsonp:
new vue(,
methods:,).then(function
(res),function
(res));}}
});
計算屬性的使用:
* computed裡面可以放置一些業務邏輯**，一定要return
new vue(,
computed:
set:function
(val)}}
});
vue例項化後自帶的一些簡單方法:
var vm = new vue();
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛在vue程式
vm.$options -> 獲取自定義屬性
vm.$destroy -> 銷毀物件
vm.$log(); -> 檢視現在資料的狀態
過濾器:-> 過濾模板資料
系統提供一些過濾器:
vue自帶的過濾器
uppercase 過濾為大寫
lowercase 過濾為小寫
capitalize 過濾為首字母}}
}currency 錢
引數:第乙個引數 [貨幣符號] - 預設值: '$'
第二個引數 [小數字] - 預設值: 2
配合事件，延遲執行 debounce 2000
type="button" @click="show | debounce 2000">
資料配合使用過濾器:
limitby 引數(取幾個) 取多少個
limitby 取幾個 從哪開始 取從哪開始的多少個
filterby 『誰』 取包含哪個字母的
orderby 排序 按引數排序
orderby 取哪個 1/-
1 取哪個字母的正序或倒序
1-> 正序
2-> 倒序
="val in arr | limitby 2"
>
new vue(
});
vue.filter(過濾器名,function
(input));
時間轉化器
過濾html標記
雙向過濾器:*
vue.filter('filterhtml',,
write:function(val)
});資料 -> 檢視
model -> view
view -> model
自定義指令:
屬性:vue.directive(指令名稱,function(引數));
指令名稱: v-red -> red
* 注意: 必須以 v-開頭
自定義元素指令:（用處不大）
vue.elementdirective('zns-red',
});@keydown.up
@keydown.enter
@keydown.a/b/c....
').keycodes.ctrl=17;
vue.directive('on
').keycodes.myenter=13;
監聽資料變化:
vm.$el/$mount/$options/....
vm.$watch(name,fncb); //淺度
vm.$watch(name,fncb,); //深度監視**
vue1 0學習總結
使用vue已經有 三 四個月了，但是只是學著使用了一些基本方法。因為現在的前端框架越來越多 angular，react.但是我相信萬變不離其宗，很多用法框架之間還是想通的，所以借總結的vue的機會深入了解vue到每個細節，以後能更加熟練地使用vue，有機會也能在別的框架中體會相通的思想。指令 com...
vue 1 0基本了解
一 基本結構 基本結構 js 1.路由需要準備乙個跟元件 2.定義元件 var home vue.extend varlist vue.extend var item vue.extend 3.建立路由例項 var router new vuerouter 4.關聯 定義路由規則 router.ma...
VUE專案效能優化（VUE10）
1.不要講所有的資料都放在data中，data中的資料都會增加getter和setter，會收集對應的watcher 2.v if和v for不能連用 3.vue在使用v for給每項元素繫結事件時使用事件 4.spa 頁面採用keep alive快取元件 5.v if當值為false時內部指令不再...