【Vue學習筆記】1.入門

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'>