* Vue.js是什么?
*一位華裔前Google工程師開發(fā)的前端js庫
? *一個MVVM框架
? *核心概念
? ? *數(shù)據(jù)綁定
? ? *組件
? *借鑒angular的模板和數(shù)據(jù)綁定技術(shù)
? *借鑒react的組件化和虛擬DOM技術(shù)
? *體積下,運行效率高,編碼
? 簡潔, PC/移動端開發(fā)都合適
? *它本身只關(guān)注UI,可以輕松引入vue插件和其它第三庫開發(fā)項目
*基本使用
? *引入vue.js
*創(chuàng)建Vue對象(vm),指定選項(配置)對象
? ? ? * el :指定dom標(biāo)簽容器的選擇器
? ? ? * data :指定初始化狀態(tài)屬性數(shù)據(jù)的對象
? ? ? ? ? ? ? 對象/函數(shù)(返回一個對象)
*頁面中
? ? ? *使用v-model:實現(xiàn)雙向數(shù)據(jù)綁定
? ? ? *使用{{}}:顯示數(shù)據(jù)
* Vue對象的選項
? * el
*指定dom標(biāo)簽容器的選擇器
? ? ? * Vue就會管理對應(yīng)的標(biāo)簽及其子標(biāo)簽
? * data
*對象或函數(shù)類型
? ? ? *指定初始化狀態(tài)屬性數(shù)據(jù)的對象
? ? ? * vue對象可以直接訪問其屬性
? ? ? *頁面中可以直接訪問使用
? ? ? *數(shù)據(jù)代理:由vm對象來代理對data中所有屬性的操作(讀/寫)
* methods
*包含多個方法的對象
? ? ? *供頁面中的事件指令來綁定回調(diào)
? ? ? *回調(diào)函數(shù)默認(rèn)有event參數(shù),但也可以指定自己的參數(shù)
? ? ? *所有的方法由vue對象來調(diào)用,訪問data中的屬性直接使用this.xxx
* computed
*包含多個方法的對象
? ? ? *對狀態(tài)屬性進(jìn)行計算返回一個新的數(shù)據(jù),供頁面獲取顯示
? ? ? *一般情況下是相當(dāng)于是一個只讀的屬性
? ? ? *利用set/get方法來實現(xiàn)屬性數(shù)據(jù)的計算讀取,同時監(jiān)視屬性數(shù)據(jù)的變化
? ? ? *如何給對象定義get/set屬性
? ? ? ? *在創(chuàng)建對象時指定: get name () {return xxx} / set name (value) {}
*對象創(chuàng)建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
* watch
* Vue.$watch()
*包含多個屬性監(jiān)視的對象
? ? ? *分為一般監(jiān)視和深度監(jiān)視
? ? ? ```
'xxx' : {
deep : true,
handler : fun(value)
}
```
*過渡動畫
? *利用vue去操控css的transition/animation動畫
? *模板:使用包含帶動畫的標(biāo)簽
? * css樣式
? ? * .fade-enter:進(jìn)入的開始狀態(tài)(不可見),在此指定進(jìn)入前不可見的樣式
? ? * .fade-enter-active:進(jìn)入的結(jié)束狀態(tài)(可見),在此指定顯示的transition
* .fade-leave-active:離開的結(jié)束狀態(tài)(不可見),在此指定隱藏的transition和消失后不可見的樣式
? ? * .fade-leave:離開的開始狀態(tài)(可見) ---一般不用
? *編碼例子
? ? ```
.xxx-enter-active, .xxx-leave-active {
transition: opacity .5s
}
.xxx-enter, .xxx-leave-active {
opacity: 0
}
hello
```
*生命周期
? * vm/組件對象
? *生命周期圖
? *主要的生命周期函數(shù)(鉤子)
* created():啟動異步任務(wù)(發(fā)送ajax請求,啟動定時器)
* beforeDestroy():做一些收尾的工作
*頁面指令
? * v-text/v-html:指定標(biāo)簽體
? ? * v-text :當(dāng)作純文本
? ? ? * v-html :將value作為html標(biāo)簽來解析
? * v-if v-else v-show
* v-if :如果vlaue為true,當(dāng)前標(biāo)簽會輸出在頁面中
? ? ? * v-else :與v-if一起使用,如果value為false,將當(dāng)前標(biāo)簽輸出到頁面中
? ? ? * v-show:就會在標(biāo)簽中添加display樣式,如果vlaue為true, display=block,否則是none
* v-for :遍歷
? ? ? *遍歷數(shù)組 : v-for="(person, index) in persons"
*遍歷對象 : v-for="value in person"? $key
* v-on :綁定事件監(jiān)聽
? ? ? * v-on:事件名,可以縮寫為: @事件名
? ? ? *監(jiān)視具體的按鍵: @keyup.keyCode? @keyup.enter
*阻止事件的冒泡和事件默認(rèn)行為: @click.stop? @click.prevent
*隱含對象: $event
* v-bind :強制綁定解析表達(dá)式
? ? ? *很多屬性值是不支持表達(dá)式的,就可以使用v-bind
*可以縮寫為:? :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
* v-model
*雙向數(shù)據(jù)綁定
? * ref :標(biāo)識某個標(biāo)簽
? ? ? * ref='xxx'
*讀取得到標(biāo)簽對象: this.$refs.xxx
*自定義指令
? *注冊全局指令
? ? ```
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toUpperCase()
})
```
*注冊局部指令
? ? ```
directives : {
'my-directive' : {
bind: function(el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
}
}
```
*使用指令:
```
v-my-directive='xxx'
```
