vue2.x
1.獨(dú)立構(gòu)建vs運(yùn)行時(shí)構(gòu)建
在按照vue1.0的配置配置好webpack后，會(huì)出現(xiàn)Failed to mount component: template or render function not defined. (found in root instance)
的錯(cuò)誤责球，這里涉及到vue2.0與vue1.0的第一個(gè)不同的地方。具體區(qū)別獨(dú)立構(gòu)建 vs 運(yùn)行時(shí)構(gòu)建贸伐。解決方法為在webpack配置文件中添加如下配置項(xiàng)：
resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' }}
2.掛載點(diǎn)的選擇
在原來(lái)的vue1.0的項(xiàng)目中我使用body
元素作為掛載點(diǎn)蹦肴，但是在vue2.0中，如果使用body
或者h(yuǎn)tml
作為掛載點(diǎn)扇苞，則會(huì)報(bào)以下警告：Do not mount Vue to <html> or <body> - mount to normal elements instead.
<font color='red'>在vue1.0中允許開(kāi)發(fā)者以body
或者h(yuǎn)tml
作為根實(shí)體的掛載點(diǎn)据某，但是到了2.0后橡娄，只能通過(guò)獨(dú)立的節(jié)點(diǎn)掛載，例如：div等癣籽，否則報(bào)警告</font>
3.動(dòng)態(tài)組件渲染（跟1.x類(lèi)似）
多個(gè)組件可以使用同一個(gè)掛載點(diǎn)挽唉，然后動(dòng)態(tài)地在它們之間切換滤祖。使用保留的 <component> 元素，動(dòng)態(tài)地綁定到它的 is 特性：
<component :is="componentId"></component><component :is="$options.components.child"></component>
keep-alive
如果把切換出去的組件保留在內(nèi)存中瓶籽，可以保留它的狀態(tài)或避免重新渲染匠童。為此可以添加一個(gè) keep-alive
指令參數(shù)：
<keep-alive> <component :is="currentView"> </component></keep-alive>
4.ref
有時(shí)候需要直接在父組件中訪(fǎng)問(wèn)子組件實(shí)例，或者直接操作DOM元素棘劣，此時(shí)需要使用ref
俏让。
ref
被用來(lái)給元素或子元素注冊(cè)引用信息。引用信息會(huì)根據(jù)父組件的$refs
對(duì)象進(jìn)行注冊(cè)茬暇。如果在普通的DOM元素上使用首昔，引用信息就是元素，如果用在子組件上糙俗，引用信息就是組件實(shí)例勒奇。
<p ref="p">hello</p><child-comp ref="child"></child-comp>
當(dāng) v-for
用于元素或組件的時(shí)候，引用信息將是包含DOM節(jié)點(diǎn)或組件實(shí)例數(shù)組巧骚。
關(guān)于ref注冊(cè)時(shí)間的重要說(shuō)明: 因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的赊颠，在初始渲染的時(shí)候你不能訪(fǎng)問(wèn)它們 - 它們還不存在！$refs
也不是響應(yīng)式的劈彪，因此你不應(yīng)該試圖用它在模版中做數(shù)據(jù)綁定竣蹦。
5.自定義事件
在vue自定義事件使用$on
與$emit
，前者用于觸發(fā)監(jiān)聽(tīng)沧奴，后者用于觸發(fā)痘括，監(jiān)聽(tīng)可以有兩種方式
<my-component v-on:test="callbackFun"></my-component><script> //直接用$on監(jiān)聽(tīng) vm.$on('text',function(){})</script>
6.組件命名的約定
當(dāng)注冊(cè)組件（或者 props）時(shí)，可以使用 kebab-case 滔吠，camelCase 纲菌，或 TitleCase
// 在組件定義中components: { // 使用 kebab-case 形式注冊(cè) 'kebab-cased-component': { /* ... / }, // register using camelCase 'camelCasedComponent': { / ... / }, // register using TitleCase 'TitleCasedComponent': { / ... */ }}
在 HTML 模版中，只能使用 kebab-case 形式：
<kebab-cased-component></kebab-cased-component><camel-cased-component></camel-cased-component><title-cased-component></title-cased-component>
當(dāng)使用字符串模式時(shí)可以使用 camelCase 疮绷、 TitleCase 或者 kebab-case 來(lái)引用：
<my-component></my-component><myComponent></myComponent><MyComponent></MyComponent>
7.子組件中使用this
有時(shí)候子組件簡(jiǎn)單翰舌，可以在父組件中直接注冊(cè)，此時(shí)在子組件內(nèi)使用this
就是子組件實(shí)例并不是父組件冬骚，例如：
export default{ data(){ return{ parentMsg:'hello!' } }, components:{ child:{ props:['inputMessage'], template:'<span>{{inputMessage}}</span>' }, 'child-secound':{ props:['inputMessage'], template:'<span>{{upperCase}}</span>', computed:{ upperCase(){ return this.inputMessage.toUpperCase(); } } } }}
8.key
的使用
一般情況下椅贱，vue在渲染完成后，如果數(shù)據(jù)發(fā)生變化只冻，只會(huì)重新渲染數(shù)據(jù)夜涕，不會(huì)重新渲染整個(gè)元素，但是有時(shí)候我們需要元素被重新渲染属愤，此時(shí)就需要使用key
關(guān)鍵字，使用v-bind
綁定key
關(guān)鍵字酸役，可以實(shí)現(xiàn)在數(shù)據(jù)發(fā)生變化時(shí)候重新渲染整個(gè)元素住诸。注：同一父級(jí)元素下所有子元素如果都要在數(shù)據(jù)變化后重新渲染元素驾胆，則需要被綁定的key
9.v-move
的使用
在使用<transition-group>
時(shí)候，不僅可以定義進(jìn)入離開(kāi)動(dòng)畫(huà)贱呐，還可以使用新增的v-move
特性丧诺，與過(guò)渡一樣，默認(rèn)為v-move
奄薇，可以用name
進(jìn)行自定義前綴驳阎，也可以用move-class
屬性手動(dòng)設(shè)定。用了這個(gè)之后就可以實(shí)現(xiàn)移動(dòng)過(guò)程中的動(dòng)畫(huà)馁蒂。
10.跳過(guò)css檢測(cè)
對(duì)于只使用js過(guò)度的元素使用v-bind:css="false"
跳過(guò)vue對(duì)css的檢測(cè)呵晚。
render函數(shù)的使用
createElement接受三個(gè)參數(shù)：
{String | Object | Function}即一個(gè)HTML標(biāo)簽 | 組件選項(xiàng) | 一個(gè)函數(shù)，必須返回上述其中一個(gè)
{Object}一個(gè)對(duì)應(yīng)HTML標(biāo)簽屬性的數(shù)據(jù)對(duì)象（可選）
{String | Array}子節(jié)點(diǎn)（VNode）（可選）
?? 關(guān)于第三個(gè)參數(shù)的說(shuō)明
createElement第三個(gè)參數(shù)沫屡，如果是String饵隙，則類(lèi)似于innerHTML，如果是Array沮脖，則可以寫(xiě)入一個(gè)執(zhí)行函數(shù)金矛，這個(gè)函數(shù)用于創(chuàng)建另一個(gè)DOM結(jié)構(gòu)（而且這里如果想寫(xiě)入一個(gè)執(zhí)行函數(shù)，必須是數(shù)組Ｉ捉臁Ｊ豢 ）
每個(gè)createElement只能創(chuàng)建一個(gè)元素，所以如果是創(chuàng)建多個(gè)元素相互嵌套免姿，需要多個(gè)createElement函數(shù)相互嵌套饼酿，最后再render，這個(gè)跟原生js創(chuàng)建DOM元素類(lèi)似
如果需要同時(shí)渲染多個(gè)元素养泡，則需要在第三個(gè)參數(shù)的數(shù)組中嗜湃，分別寫(xiě)入需要渲染的元素，此時(shí)Vue會(huì)按照數(shù)組中順序進(jìn)行渲染
完整數(shù)據(jù)對(duì)象：
<code>
{
// 和v-bind:class一樣的 API
'class': {
foo: true,
bar: false
},
// 和v-bind:style一樣的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 組件 props
props: {
myProp: 'bar'
},
// DOM 屬性
domProps: {
innerHTML: 'baz'
},
// 事件監(jiān)聽(tīng)器基于 "on"
// 所以不再支持如 v-on:keyup.enter 修飾器
// 需要手動(dòng)匹配 keyCode澜掩。
on: {
click: this.clickHandler
},
// 僅對(duì)于組件购披，用于監(jiān)聽(tīng)原生事件，而不是組件使用 vm.$emit 觸發(fā)的事件肩榕。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令. 注意事項(xiàng)：不能對(duì)綁定的舊值設(shè)值
// Vue 會(huì)為您持續(xù)追踨
directives: [
{
name: 'my-custom-directive',
value: '2'
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => h('span', props.text)
},
// 如果子組件有定義 slot 的名稱(chēng)
slot: 'name-of-slot'
// 其他特殊頂層屬性
key: 'myKey',
ref: 'myRef'
}
</code>
vue-router2.x
1.router-view
在vue-router2中<router-view>
是最頂層的出口刚陡，渲染最高級(jí)路由匹配到組件。同樣地株汉，一個(gè)被渲染組件同樣可以包含自己的嵌套<router-view>
筐乳。
2.掛載
在router1.0中，掛載節(jié)點(diǎn)的方式為router.start()
而在router2.0中使用vue自己的$mount
手動(dòng)掛載
3.給link添加事件
在vue-router1中使用v-link
寫(xiě)入路由乔妈，但是在vue-router2中要使用router-link
寫(xiě)入路由蝙云，在瀏覽器渲染的時(shí)候會(huì)把router-link
渲染成a
。
有時(shí)候需要為router-link
注冊(cè)事件路召，對(duì)于一般的html元素勃刨，直接使用@click="eventFun"
即可波材，但是對(duì)于router-link
，像普通html元素那樣注冊(cè)事件后并不管用身隐，需要添加.native
才會(huì)成功注冊(cè)廷区。
事實(shí)上給組件綁定原生事件就需要.native
修飾v-on
，否則無(wú)法注冊(cè)成功贾铝。
<my-component v-on:click.native="doTheThing"></my-component>
4.利用vue-router做導(dǎo)航
在利用vue-router做導(dǎo)航的時(shí)候隙轻，需要用到redirect
關(guān)鍵字的重定向功能，具體寫(xiě)法如下：
const router = new VueRouter({ routes : [ {path:'/',redirect:'/ZY'}, {path:'/ZY',component:ZY} ]});
