1.基本綁定：
? ?new Vue(
? ? ? ?{
? ? ? ? ? ?el:'#elID',
? ? ? ? ? ?data:{
? ? ? ? ? ? ? ?// data obj
? ? ? ? ? ?},
? ? ? ? ? ?computed:{
? ? ? ? ? ? ? ?// computed obj
? ? ? ? ? ?},
? ? ? ? ? ?methods:{
? ? ? ? ? ? ? ?// methods obj
? ? ? ? ? ?},
? ? ? ?}
? ?);
2.指令：
? ?前綴為v-
? ?*v-if, v-for, v-bind, v-on...
? ?*特性插值會轉(zhuǎn)為v-bind綁定: href='{{url}}' --> v-bind:href='url'
3.數(shù)據(jù)綁定只接受單個表達式：
? ?{{number+1}} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ok
? ?{{ok?'yes':'no'}} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ok
? ?{{message.split('').reverse().join('')}} ? ? ? ?ok
? ?{{var a=1}} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?no
? ?{{if(ok){return message}}} ? ? ? ? ? ? ? ? ? ? ? ?no
4.過濾器：
? ?管道式的寫法 --> {{message|capitalize}}
? ?*可以串聯(lián): filterA|filterB
? ?*可以帶參數(shù): filterA 'arg1' arg2
5.修飾符
? ?前綴為.
? ?*v-bind:href.literal='a/b/c'
6.縮寫
? ?v-bind:href='url' --> :href='url'
? ?v-on:click='dosomething' --> @click='dosomething'
7.計算setter
? ?computed:{
? ? ? ?fullName:{
? ? ? ? ? ?get:function(){
? ? ? ? ? ? ? ?// getter
? ? ? ? ? ?}
? ? ? ? ? ?set:function(newValue){
? ? ? ? ? ? ? ?//setter
? ? ? ? ? ?}
? ? ? ?}
? ?}
8.Class與Style綁定
? ?*變量語法：v-bind:class="{'class-a':isA, 'class-b':isB}" ? ? ? ?--> ? ? ? ?data:{isA:true, isB:false}
? ?*對象語法：v-bind:class="classObj" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--> ? ? ? ?data:{classObj:{'class-a':true, 'class-b':false}}
? ?*數(shù)組語法：v-bind:class='[classA, classB]' ? ? ? ? ? ? ? ? ? ? ? ?--> ? ? ? ?data:{classA:'class-a', classB:'class-b'}
9.條件渲染
? ?*v-if, v-show, v-else
? ?*
Yes
No
? ?*
Yes
No
? ?*show只是簡單的display:none
10.列表渲染
? ?v-for
? ?*內(nèi)置變量：{{$index}}
? ?*用法：v-for='item in items'
v-for='(index, item) in items' ? ?*數(shù)組則是索引，遍歷對象則是鍵
11.數(shù)組變動檢測
? ?能觸發(fā)視圖更新的方法：
? ?*push, pop, shift, unshift, splice, sort, reverse ? ? ? ? ? ?// 變異方法
? ?*filter, concat, slice ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 替換數(shù)組
? ?*盡可能復用DOM: track-by
? ? ? ?v-for="item in items" track-by="_uid"
? ? ? ?track-by='$index' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 根據(jù)index追蹤，不是很明白！...片段不被移動，簡單地已對應索引的新值刷新,也能處理數(shù)據(jù)數(shù)組中重復的值...
不能檢測到以下變化：
1.直接用索引設置元素： ? ?vm.items[0]={}; ? ? ? ? ? ? ? ? ? ?// vue解決方案：vm.items.$set(0, { childMsg: 'Changed!'}), vm.items.$remove(item)
2.修改數(shù)據(jù)的長度： ? ? ? ?vm.items.length=0; ? ? ? ? ? ? ? ?// js中常見的清空, vue解決方案：直接用空數(shù)組替換
12.對象v-for
內(nèi)置變量：$key
13.值域v-for
{{ n }}
14.內(nèi)置的過濾器
? ?filterBy 和 orderBy
15.方法與事件處理器
·v-on 監(jiān)聽DOM事件
? ? ? ?
? ? ? ?
? ? ? ? ? ? ? ?// 內(nèi)聯(lián)語句處理器, $event為內(nèi)置變量，原生的DOM事件
·事件修飾符
·按鍵修飾符
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 鍵盤事件后面可接keyCode
常見的按鍵有提供別名：
·enter
·tab
·delete
·esc
·space
·up
·down
·left
·right
16.表單控件綁定
·v-model綁定字段
? ? ? ? ? ?// 綁定的值通常是靜態(tài)字符串，勾選框是布爾值
·參數(shù)特性
lazy ? ? ? ?// 延遲到change事件中同步(原為input)
number ? ? ? ?// 僅允許輸入數(shù)字
debounce ? ?// 延時同步
17.過渡
典型的過渡：
? ? ? ?
需要添加CSS樣式：
.expand-transition(必須), .expand-enter, .expand-leave
*如果未設置, 默認為.v-transition, .v-enter, .v-leave
同時提供鉤子：
Vue.transition('expand',{...});
·beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, leaveCancelled
漸近過渡：
? ? ? ? ? ?
*鉤子stagger, 延時過渡
18.組件
·創(chuàng)建組件： ? ? ? ?var c = Vue.extend({
? ? ? ? ? ? ? ? ? ? ? ?template:'
});
·注冊組件: ? ? ? ?Vue.component('my-component', c); ? ? ? ? ? ? ? ? ? ?// 如果名字是myComponent, html中必須寫成my-component
? ?·使用組件： ? ? ? ?
? ?// htmlnew Vue({el:'#app'}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// js
*注冊可縮寫為 ? ?vue.component('my-component',{
? ? ? ? ? ? ? ? ? ? ? ?template:'
});
局部注冊：
var c = Vue.extend({});
var parentComponent = Vue.extend({
components:{
'my-component': c,
}
});
組件選項：
var c = Vue.extend({
data:function(){
return {a:1};
}
});
is特性：
*table中限制其他的節(jié)點不能放置其中
? ? ? ?
? ?Props:
? ? ? ?props用以從父組件接收數(shù)據(jù):
使用：
Vue.component('child',{
props:['msg'],
template:'{{msg}}'
});
聲明：
// 字面量語法
// 動態(tài)語法
*如果props是myMsg, html中需要用my-msg(即：camelCase - kebab-case, 因為html的特性是不區(qū)分大小寫)
*字面量和動態(tài)語法稍有不同
// 傳遞了一個字符串 "1"
// 傳遞實際的數(shù)字
Props綁定類型：
// 默認為單向綁定
// 雙向綁定
//單次綁定
*如果prop是一個對象或數(shù)組，是按引用傳遞。不管使用哪種綁定方式，都將是雙向綁定
Props驗證：
props:{ ? ? ? ? ? ?// 此時props是一個對象
propA: Number,
propB:{
type: String, ? ? ? ? ? ? ? ? ? ?// 類型(原生構(gòu)造器：String, Number, Boolean, Function, Object, Array)
required: true, ? ? ? ? ? ? ? ? ? ?// 是否必須項
default: 'thyiad', ? ? ? ? ? ? ? ?// 默認值(如果是Object, 默認值需由一個函數(shù)返回)
validator: function(value){ ? ? ? ?// 驗證
return value === 'thyiad';
},
coerce:function(val){
return val+''; ? ? ? ? ? ? ? ?// 將值強制轉(zhuǎn)換為字符串
return JSON.parse(val); ? ? ? ?// 將JSON字符串轉(zhuǎn)換為對象
}
}
}
父子組件通信：
this.$parent ? ? ? ?// 子組件訪問父組件
this.$root ? ? ? ? ? ?// 訪問根實例
this.$children ? ? ? ?// 父組件的所有子元素
*不建議在子組件中修改父組件的狀態(tài)
自定義事件：
$on() ? ? ? ? ? ? ? ?// 監(jiān)聽事件
$emit() ? ? ? ? ? ? ? ?// 觸發(fā)事件
$dispatch() ? ? ? ? ? ?// 派發(fā)事件，沿著父鏈冒泡
$broadcast() ? ? ? ?// 廣播事件, 向下傳遞給所有的后代
使用：
子組件中綁定函數(shù)派發(fā)事件：
methods:{
notify:function(){
this.$dispatch('child-msg',this.msg);
}
}
父組件中定義事件：
events:{
'child-msg':function(msg){
this.messages.push(msg);
}
}
*更直觀的聲明方式：
// 直觀的為父組件定義事件(child-msg), 并且觸發(fā)父組件的handleIt函數(shù), 子組件只關注觸發(fā)事件
子組件索引：
? ? ? ?
var child = parent.$refs.profile;
使用Slot分發(fā)內(nèi)容：
單個Slot:
父組件的內(nèi)容將被拋棄，除非子組件包含
如果只有一個沒有特性的slot, 整個內(nèi)容將被插到它所在的地方, 替換slot.
父組件：
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
parent content
子組件模板：
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
child content
? ? ? ? ? ? ? ? ? ?
如果父節(jié)點沒有設置內(nèi)容，這里才會被顯示
命名Slot：
父組件模板：
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
One
? ? ? ? ? ? ? ? ? ?
two
? ? ? ? ? ? ? ? ? ?
Default A
子組件模板：
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
// 默認slot, 找不到匹配內(nèi)容的回退插槽, 如果沒有默認的slot, 不匹配內(nèi)容將被拋棄
? ? ? ? ? ? ? ? ? ?
動態(tài)組件：
可以在不同組件之間切換：
new Vue({
el:'body',
data:{
currentView:'home',
},
components:{
home:{},
posts:{},
archive:{},
}
});
父組件：
// component是Vue保留的元素
*keep-alive用來把切換出去的組件保留在內(nèi)存中, 可以保留它的狀態(tài)避免重新渲染
activate鉤子：
用以在切入前做一些異步操作：
activate:function(done){
var self = this;
loadDataAsync(function(data){
self.someData=data;
done();
});
}
transition-mode
指定列兩個動態(tài)組件之間如何過渡：
? ? ? ? ? ? ? ? ? ?
*默認進入與離開平滑地過渡, 可以指定另外兩種模式：in-out, out-in (先進入or先離開)
組件和v-for:
? ? ? ? ? ?
*因為組件的作用域是孤立的, v-for里的item無法直接傳遞給組件, 必須像上面一樣使用props傳遞數(shù)據(jù)
異步組件
資源命名約定
遞歸組件
片段實例
*推薦模板只有一個根節(jié)點(使用template選項時)
內(nèi)聯(lián)模板
組件把它的內(nèi)容當做它的模板
? ? ? ? ? ?
*不推薦
19.深入響應式原理
·如何追蹤變化
*使用Object.defineProperty設置getter/setter
·變化檢測問題
*不能檢測到對象屬性的添加或刪除
*vm.$set('b', 2);
Vue.set(object, key, value);
·初始化數(shù)據(jù)
*推薦在data對象上聲明所有的響應屬性
·異步更新隊列
*默認異步更新DOM, 下次事件循環(huán)時清空隊列, 執(zhí)行必要的DOM更新
*Vue.nextTick(callback);
·計算屬性的秘密
*計算屬性是有緩存的, 除非顯示設置為不緩存
computed:{
attr:function(){
return Date.now()+this.msg;
}
}
TO:
computed:{
attr:{
cache: false,
get: function(){
return Date.now()+this.msg;
}
}
}
*但只是在JS中訪問是這樣的, 數(shù)據(jù)綁定仍是依賴驅(qū)動的。 ? ? ? ?
? ?
? ?
