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屬性
在創建對象時指定：getName(){return xxx}/setName(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請求，綁定監聽)
beforeDestory()：做一些收尾工作
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-html會將value作為html標簽來解析
v-if v-else v-show：顯示/隱藏元素
v-if：如果value為true，當前標簽會輸出在頁面中
v-else：與v-if一起使用，如果value為false，將當前標簽輸出到頁面中
v-show：就會在標簽中添加display樣式, 如果vlaue為true, display=block, 否則是none
v-for：遍歷
*遍歷數組：v-for="(persons,index) in persons"
*遍歷對象：v-for="value in person"
v-on：綁定事件監聽
*v-on:事件名，可以縮寫為：@事件名
*監聽具體的按鍵：@keyup.keyCode @keyup.enter
*停止時間的冒泡和阻止時間的默認行為：@click.stop @click.prevent
*隱含對象：$event
v-bind：強制綁定解析表達式
*html標簽屬性是不支持表達式的，就可以使用v-bind
*可以縮寫為： :id='name'
*代碼
:class="a"
:class="{classA:isA,classB:isB}"
:class="[classA,classB]"
: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'>