傳送門---個人網(wǎng)站
Vue學習及參考總結(jié)整理
>var vm = new Vue({
el: "選擇器", 掛載到頁面的那個元素里，即確定vue的作用范圍 外部可通過vm.$el訪問，得到的是一個原生dom元素，可進行對應操作
a: ' ', //自定義屬性 外部可通過vm.$options訪問
data: { }, //實例屬性都在這里面，外部通過實例名,即vm.$data調(diào)用
computed: { }, //計算屬性，也是實例屬性，只是以方法的形式存在，并可以有邏輯運算的屬性
method: { }, //實例方法都在這里
watch: { }, //對data和computed的屬性進行監(jiān)聽，當屬性有變化時自動觸發(fā)，以方法的形式存在 外部通過$.watch調(diào)用
//注意：以上屬性和方法，實例內(nèi)部都通過this調(diào)用,外部則通過對應的實例方法訪問
//在vue的生命周期過程中，它自身還提供了一系列的鉤子函數(shù)供我們使用，進行自定義邏輯的注入： <br>
created: function(){ 實例已經(jīng)創(chuàng)建 }
beforeCompile: function(){ 模塊編譯之前 }
compiled: function(){ 模塊編譯之后；即模板占位符被是內(nèi)容替換}
ready: function(){ 模板插入到文檔中了；相當于window.onload }
注意： 以上4個方法在對象被實例化后即按順序執(zhí)行，以下2個方法需通過事件觸發(fā)，并通過調(diào)用 實例名.$destory() 才執(zhí)行
beforeDestroy: function(){ 對象銷毀之前 }
destroyed: function(){ 對象銷毀之后 }
});
Vue對象解析
- 對象屬性
data、el、options、watch、computed
- 對象方法
生命周期之鉤子函數(shù)
- 對象實例訪問和調(diào)用屬性和方法
A:實例屬性調(diào)用：$options、$el、$data、$watch
這里著重說下$watch，它的一般語法為：
vm.$watch("監(jiān)聽的實例屬性名",function(newVal, oldVal) { // 對于監(jiān)聽數(shù)據(jù)變化后的業(yè)務處理代碼 }); --淺度監(jiān)聽
如果監(jiān)聽的屬性是基本數(shù)據(jù)類型，上面用法是沒有問題的，但如果監(jiān)聽的屬性是對象，則對象內(nèi)部的數(shù)據(jù)有變化，上面寫法是監(jiān)聽不到的，需要進行一個參數(shù)進行深度監(jiān)聽，具體語法如下:
vm.$watch("監(jiān)聽的實例屬性名",function(newVal, oldVal) { // 對于監(jiān)聽數(shù)據(jù)變化后的業(yè)務處理代碼 },{deep: true}); --深度監(jiān)聽
B:實例方法調(diào)用：$mount()、$log()、$destroy()
- 自帶過濾器&自定義過濾器
A：vue自帶的過濾器有：
capitalize(首字母大寫)、uppercase、currency、json( 相當于JSON.Stringify() )、debounce(后跟秒數(shù)，配合事件，延遲執(zhí)行)
limitBy(參數(shù)1, 參數(shù)2) 常用語v-for數(shù)組，限制輸出數(shù)量和從哪輸出；參數(shù)1代表輸出幾個，參數(shù)2代表從第幾個輸出
filterBy(參數(shù)) 過濾數(shù)據(jù)，過濾含有參數(shù)的數(shù)據(jù)，配合input輸入框，通過輸入變量過濾，打到熱搜索的效果
orderBy(參數(shù)) 對數(shù)據(jù)排序，參數(shù)為1時為正序，為-1時則倒序，其他什么參數(shù)呢？所以1和-1基本是常用情況
B：自定義過濾器語法 （對于時間戳的處理是比較常用的自定義過濾器）
Vue.filter("過濾器名稱",function(參數(shù)...){
... //業(yè)務處理
return ...;
});
以下內(nèi)容可忽略
自定義過濾器之雙向過濾器 //據(jù)說應用不多，暫且放著
Vue.filter("過濾器名稱",{
read: function(input) { return ... }, //model-view
write: function(val) { return ... } //view-model
})
-
自帶指令和自定義指令
指令是對HTML語法的擴展，必須以v-開頭，一般我們口中的指令實際是指屬性指令，使用該屬性指令的元素講具有對應的屬性功能，下面的C則是指元素指令，與屬性指令有所區(qū)別
A：自帶指令：v-if、v-show、v-else、v-model、v-text、v-html、v-bind、v-on、v-el、v-cloak...
這里著重說下v-text和v-cloak：在模板中我們調(diào)用實例屬性數(shù)據(jù)時通常這樣{{ 實例屬性 }}，這樣在網(wǎng)速比較 慢的情況下，頁面出現(xiàn)閃爍的時候會把花括號和里面的原始內(nèi)容顯示出來，這樣用戶體驗不好，處理這種情 況有2種方式：
- 在較大段落元素上使用v-clock指令，并設(shè)置該元素的css: display:none
- 使用v-text/v-html代替花括號即可，Vue2.0也支持這樣做，且花括號方式可能被取消
B：自定義指令語法：
Vue.directive("指令名稱",function(..){
this.el.style.background = 'red'; //這里的this代表new出來的實例，this.el代表原生的dom元素
});
模板中使用v-指令名稱進行使用，或v-指令名稱="參數(shù)"，可以在調(diào)用指令是進行傳參
定義指令名稱時不加v-，模板使用時加v-
C: 自定義元素指令 （據(jù)說用處不大，可忽略跳過，它所想要達到的效果，組件已超越）
Vue.elementDirective("自定義元素名稱",{
bind: function() {};
});
它不支持B情況語法，但B情況語法卻默認也是bind
- 自定義鍵盤信息
Vue.directive('on'),keyCodes.ctrl = 17; //17是ctrl的鍵碼 等號前的ctrl是定義ctrl的別名，可以隨便取，實際綁定的就是鍵盤上的ctrl鍵
模板調(diào)用@keydown.ctrl ="自定義方法"
