- MVVM
```
//vm -> VM ->
var vm =  new  Vue({

el:‘‘,
data:{
// 相當於Model -> M
msg:‘‘
},
methods:{
this -> vm
this.msg
}
})

MVVM的作用是什麽呢？
傳統的操作dom的做法是將邏輯與視圖操作完全糅合在一起了，為了系統的可擴展性
必須要想方設法的將他們二者放開，那麽這個時候就出現了MVVM設計模式

在Vue中是如何去應用MVVM的呢？
我們的Vue的對象實例負責管理邏輯操作和視圖，當邏輯獲取到數據以後只需要操作
data中定義的屬性，即可通過系統的v-相關指令來控制到視圖的變化
```

- 利用案例將Vue的編寫步驟固定好
```
1、導入vue.js
2、定義vue監控的dom元素的區域，將來在這個區域中的所有的和vue相關的指令
都能夠備處理
3、實例化Vue對象
el:    ->  存放的是需要vue對象進行監控的區域，通常是id或者class
data:  ->  這個裏面定義的所有屬性相當於MVVM中Model,這個Model被VM來管理，並且能夠將這些數據通過v-這些指令解析到Viwe上
methods:-> 主要是給 v-on 這個指令來進行事件註冊的

```

- 系統指令

## Vue中的指令
- Vue的系統指令通常都是v-開頭的這些指令
- 自定義指令

## 自定義指令
- 自定義指令寫法
```
1、自定義屬性指令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‘;
}
});


2、自定義元素指令Vue.elementDirective(指令id,{bind:function(){}})
this.el
this.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" >


特點：
1、指令的定義一定要放到 new Vue({}) 代碼之前，否則報錯並且無效
2、在利用Vue.directive()註冊指令的時候，不需要加上v- 這個前綴
3、在dom元素上使用的時候，必須加上v- 前綴
4、如果想要給自定義屬性指令傳入參數，則註意：
1、在註冊的時候要利用 params:[] 來接收參數
2、通過bind:function(){}中 利用 this.params點出和parms:[]中定義的那個字符串同名的屬性
3、在dom元素上使用的時候
通過  v-color空格更上 parmas:[]中定義好的同名的參數名稱

```


## 過濾器
- 系統過濾器

- 自定義過濾器
```
1、私有過濾器

代碼可以參考：04-源代碼\知識點\03自定義私有過濾器實現日期格式化功能.html

2、全局過濾器
代碼可以參考：04-源代碼\知識點\04自定義全局過濾器實現日期格式化功能.html

```

- 利用自定義過濾器實現品牌案例中時間的格式化

## v-on註冊事件的按鍵修飾符
- 利用enter修飾符實現品牌管理中的添加區域實現回車即新增
- v-on綁定事件時的按鍵修飾符
```
通過 Vue.directive(‘on‘).keyCodes 就可以獲取到所有的按鍵修飾符的單詞就可以使用了

down:40
enter:13
esc:27
left:37
right:39
space:32
tab:9
up:38

//2.0 可以利用Vue.directive(‘on‘).keyCodes 動態添加一個屬性來實現自定義的按鍵修飾符的擴展

```

## vue-resource實現ajax請求
- $http上方法的演示

- Vue生命周期相關方法

- 實現品牌管理按鈕的ajax版

## 組件開發
- 全局組件

- 局部組件

- props父組件向子組件傳值

- $emit() 和 $on() 實現子組件向父組件傳值

VUe 筆記