Vue學習筆記（4）

1. Vue.js是什麼?

1). 一位華裔前Google工程師(尤雨溪)開發的前端js庫
2). 作用: 動态建構使用者界面
3). 特點:
	* 遵循MVVM模式
	* 編碼簡潔, 體積小, 運作效率高, 移動/PC端開發
	* 它本身隻關注UI, 可以輕松引入vue插件和其它第三庫開發項目
4). 與其它架構的關聯:
	* 借鑒angular的模闆和資料綁定技術
	* 借鑒react的元件化和虛拟DOM技術
5). vue包含一系列的擴充插件(庫):
	* vue-cli: vue腳手架
	* vue-resource(axios): ajax請求
	* vue-router: 路由
	* vuex: 狀态管理
	* vue-lazyload: 圖檔懶加載
	* vue-scroller: 頁面滑動相關
	* mint-ui: 基于vue的元件庫(移動端)
	* element-ui: 基于vue的元件庫(PC端)
           

2. 基本使用

1). 引入vue.js
2). 建立Vue執行個體對象(vm), 指定選項(配置)對象
	el : 指定dom标簽容器的選擇器
	data : 指定初始化狀态資料的對象/函數(傳回一個對象)
3). 在頁面模闆中使用{{}}或vue指令
           

3. Vue對象的選項

1). el

指定dom标簽容器的選擇器
Vue就會管理對應的标簽及其子标簽
           

2). data

對象或函數類型
指定初始化狀态屬性資料的對象
vm也會自動擁有data中所有屬性
頁面中可以直接通路使用
資料代理: 由vm對象來代理對data中所有屬性的操作(讀/寫)
           

3). methods

包含多個方法的對象
供頁面中的事件指令來綁定回調
回調函數預設有event參數, 但也可以指定自己的參數
所有的方法由vue對象來調用, 通路data中的屬性直接使用this.xxx
           

4). computed

包含多個方法的對象
對狀态屬性進行計算傳回一個新的資料, 供頁面擷取顯示
一般情況下是相當于是一個隻讀的屬性
利用set/get方法來實作屬性資料的計算讀取, 同時監視屬性資料的變化
如何給對象定義get/set屬性
	在建立對象時指定: get name () {return xxx} / set name (value) {}
  	對象建立之後指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
           

5). watch

包含多個屬性監視的對象
分為一般監視和深度監視
    xxx: function(value){}
	xxx : {
		deep : true,
		handler : fun(value)
	}
另一種添加監視方式: vm.$watch('xxx', function(value){})
           

4. 過渡動畫

利用vue去操控css的transition/animation動畫
模闆: 使用<transition name='xxx'>包含帶動畫的标簽
css樣式
	.fade-enter-active: 進入過程, 指定進入的transition
	.fade-leave-active: 離開過程, 指定離開的transition
	.xxx-enter, .xxx-leave-to: 指定隐藏的樣式
編碼例子
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity .5s
    }
    .xxx-enter, .xxx-leave-to {
      opacity: 0
    }
    
    <transition name="xxx">
      <p v-if="show">hello</p>
    </transition>
           

5. 生命周期

vm/元件對象
生命周期圖
主要的生命周期函數(鈎子)
	created() / mounted(): 啟動異步任務(啟動定時器,發送ajax請求, 綁定監聽)
	beforeDestroy(): 做一些收尾的工作
           

6. 自定義過濾器

1). 了解

對需要顯示的資料進行格式化後再顯示
           

2). 編碼

1). 定義過濾器
	Vue.filter(filterName, function(value[,arg1,arg2,...]){
	  // 進行一定的資料處理
	  return newValue
	})
2). 使用過濾器
	<div>{{myData | filterName}}</div>
	<div>{{myData | filterName(arg)}}</div>
           

7. vue内置指令

v-text/v-html: 指定标簽體
	* v-text : 當作純文字
	* v-html : 将value作為html标簽來解析
v-if v-else v-show: 顯示/隐藏元素
	* v-if : 如果vlaue為true, 目前标簽會輸出在頁面中
	* v-else : 與v-if一起使用, 如果value為false, 将目前标簽輸出到頁面中
	* v-show: 就會在标簽中添加display樣式, 如果vlaue為true, display=block, 否則是none
v-for : 周遊
	* 周遊數組 : v-for="(person, index) in persons"   
	* 周遊對象 : v-for="value in person"   $key
v-on : 綁定事件監聽
	* v-on:事件名, 可以縮寫為: @事件名
	* 監視具體的按鍵: @keyup.keyCode   @keyup.enter
	* 停止事件的冒泡和阻止事件預設行為: @click.stop   @click.prevent
	* 隐含對象: $event
v-bind : 強制綁定解析表達式  
	* html标簽屬性是不支援表達式的, 就可以使用v-bind
	* 可以縮寫為:  :id='name'
	* :class
	  * :class="a"
		* :class="{classA : isA, classB : isB}"
		* :class="[classA, classB]"
	* :style
		:style="{color : color}"
v-model
	* 雙向資料綁定
	* 自動收集使用者輸入資料
ref : 辨別某個标簽
	* ref='xxx'
	* 讀取得到标簽對象: this.$refs.xxx
           

8. 自定義指令

1). 注冊全局指令

Vue.directive('my-directive', function(el, binding){
  el.innerHTML = binding.value.toUpperCase()
})
           

2). 注冊局部指令

directives : {
  'my-directive' : function(el, binding) {
      el.innerHTML = binding.value.toUpperCase()
  }
}
           

3). 使用指令

<div v-my-directive='xxx'>