VUe 筆記

- MVVM```//vm -> VM ->var vm =  new  Vue({el:'',data:{// 至關於Model -> Mmsg:''},methods:{this -> vmthis.msg}})MVVM的做用是什麼呢？傳統的操做dom的作法是將邏輯與視圖操做徹底糅合在一塊兒了，爲了系統的可擴展性必需要千方百計的將他們兩者放開，那麼這個時候就出現了MVVM設計模式在Vue中是如何去應用MVVM的呢？咱們的Vue的對象實例負責管理邏輯操做和視圖，當邏輯獲取到數據之後只須要操做data中定義的屬性，便可經過系統的v-相關指令來控制到視圖的變化```- 利用案例將Vue的編寫步驟固定好```一、導入vue.js二、定義vue監控的dom元素的區域，未來在這個區域中的全部的和vue相關的指令都可以備處理三、實例化Vue對象el:    ->  存放的是須要vue對象進行監控的區域，一般是id或者classdata:  ->  這個裏面定義的全部屬性至關於MVVM中Model,這個Model被VM來管理，而且可以將這些數據經過v-這些指令解析到Viwe上methods:-> 主要是給 v-on 這個指令來進行事件註冊的```- 系統指令## Vue中的指令- Vue的系統指令一般都是v-開頭的這些指令- 自定義指令## 自定義指令- 自定義指令寫法```一、自定義屬性指令Vue.directive(指令id（注意不能以v-開頭，未來在使用的時候自動加上）,function(){this.el})屬性指令舉例：<input type="text" v-focus> 中的 v-focus 這個指令咱們稱之爲自定義屬性指令定義格式：Vue.directive('focus',{bind:function(){//這個指令的邏輯//能夠利用this.el來獲取到當前指令所在的元素對象this.el.style.color = 'red';}});二、自定義元素指令Vue.elementDirective(指令id,{bind:function(){}})this.elthis.vm```- 利用自定義指令實現品牌管理的搜索框自動獲取焦點```<input type="text" v-focus>完整寫法：Vue.directive('focus',{bind:function(){//這個指令的邏輯//能夠利用this.el來獲取到當前指令所在的元素對象this.el.focus();}});簡單寫法：Vue.directive('focus',function(){this.el.focus();});//定義一個帶有參數的自定義指令Vue.directive('color',{params:['colorname'],bind:function(){//1.0 獲取到colorname的值var cname = this.params.colorname;//2.0 獲取到el之後給其賦予一個樣式this.el.style.color = cname;}});使用：<input type="text" v-model="productid"  v-color colorname="blue" >特色：一、指令的定義必定要放到 new Vue({}) 代碼以前，不然報錯而且無效二、在利用Vue.directive()註冊指令的時候，不須要加上v- 這個前綴三、在dom元素上使用的時候，必須加上v- 前綴四、若是想要給自定義屬性指令傳入參數，則注意：一、在註冊的時候要利用 params:[] 來接收參數二、經過bind:function(){}中 利用 this.params點出和parms:[]中定義的那個字符串同名的屬性三、在dom元素上使用的時候經過  v-color空格更上 parmas:[]中定義好的同名的參數名稱```## 過濾器- 系統過濾器- 自定義過濾器```一、私有過濾器代碼能夠參考：04-源代碼\知識點\03自定義私有過濾器實現日期格式化功能.html二、全局過濾器代碼能夠參考：04-源代碼\知識點\04自定義全局過濾器實現日期格式化功能.html```- 利用自定義過濾器實現品牌案例中時間的格式化## v-on註冊事件的按鍵修飾符- 利用enter修飾符實現品牌管理中的添加區域實現回車即新增- v-on綁定事件時的按鍵修飾符```經過 Vue.directive('on').keyCodes 就能夠獲取到全部的按鍵修飾符的單詞就可使用了down:40enter:13esc:27left:37right:39space:32tab:9up:38//2.0 能夠利用Vue.directive('on').keyCodes 動態添加一個屬性來實現自定義的按鍵修飾符的擴展```## vue-resource實現ajax請求- $http上方法的演示- Vue生命週期相關方法- 實現品牌管理按鈕的ajax版## 組件開發- 全局組件- 局部組件- props父組件向子組件傳值- $emit() 和 $on() 實現子組件向父組件傳值