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