1.獨立構建vs運行時構建
在按照vue1.0的配置配置好webpack后，會出現Failed to mount component: template or render function not defined. (found in root instance) 的錯誤，這里涉及到vue2.0與vue1.0的第一個不同的地方。具體區別獨立構建 vs 運行時構建。解決方法為在webpack配置文件中添加如下配置項：
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
2.掛載點的選擇
在原來的vue1.0的項目中我使用body元素作為掛載點，但是在vue2.0中，如果使用body或者html作為掛載點，則會報以下警告：Do not mount Vue to <html> or <body> - mount to normal elements instead.
<font color='red'>在vue1.0中允許開發者以body或者html作為根實體的掛載點，但是到了2.0后，只能通過獨立的節點掛載，例如：div等，否則報警告</font>
3.動態組件渲染（跟1.x類似）
多個組件可以使用同一個掛載點，然后動態地在它們之間切換。使用保留的 <component> 元素，動態地綁定到它的 is 特性：
<!-- 動態組件由 vm 實例的屬性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能夠渲染注冊過的組件或 prop 傳入的組件 --> <component :is="$options.components.child"></component>
keep-alive
如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：
<keep-alive>
<component :is="currentView">
<!-- 非活動組件將被緩存！ -->
</component>
</keep-alive>
4.ref
有時候需要直接在父組件中訪問子組件實例，或者直接操作DOM元素，此時需要使用ref。
ref被用來給元素或子元素注冊引用信息。引用信息會根據父組件的$refs對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素，如果用在子組件上，引用信息就是組件實例。
<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>
當 v-for 用於元素或組件的時候，引用信息將是包含DOM節點或組件實例數組。
關於ref注冊時間的重要說明: 因為ref本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模版中做數據綁定。
5.自定義事件
在vue自定義事件使用$on與$emit，前者用於觸發監聽，后者用於觸發，監聽可以有兩種方式
<!--使用v-on在html中監聽-->
<my-component v-on:test="callbackFun"></my-component>
<script>
//直接用$on監聽
vm.$on('text',function(){})
</script>
6.組件命名的約定
當注冊組件（或者 props）時，可以使用 kebab-case ，camelCase ，或 TitleCase
// 在組件定義中
components: {
// 使用 kebab-case 形式注冊
'kebab-cased-component': { /* ... */ },
// register using camelCase
'camelCasedComponent': { /* ... */ },
// register using TitleCase
'TitleCasedComponent': { /* ... */ }
}
在 HTML 模版中，只能使用 kebab-case 形式：
<!-- 在HTML模版中始終使用 kebab-case --> <kebab-cased-component></kebab-cased-component> <camel-cased-component></camel-cased-component> <title-cased-component></title-cased-component>
當使用字符串模式時可以使用 camelCase 、 TitleCase 或者 kebab-case 來引用：
<!-- 在字符串模版中可以用任何你喜歡的方式! --> <my-component></my-component> <myComponent></myComponent> <MyComponent></MyComponent>
7.子組件中使用this
有時候子組件簡單，可以在父組件中直接注冊，此時在子組件內使用this就是子組件實例並不是父組件，例如：
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在渲染完成后，如果數據發生變化，只會重新渲染數據，不會重新渲染整個元素，但是有時候我們需要元素被重新渲染，此時就需要使用key關鍵字，使用v-bind綁定key關鍵字，可以實現在數據發生變化時候重新渲染整個元素。注：同一父級元素下所有子元素如果都要在數據變化后重新渲染元素，則需要被綁定的key
9.v-move的使用
在使用<transition-group>時候，不僅可以定義進入離開動畫，還可以使用新增的v-move特性，與過渡一樣，默認為v-move，可以用name進行自定義前綴，也可以用move-class屬性手動設定。用了這個之后就可以實現移動過程中的動畫。
10.跳過css檢測
對於只使用js過度的元素使用v-bind:css="false"跳過vue對css的檢測。
render函數的使用
createElement接受三個參數：
-
{String | Object | Function}即一個HTML標簽 | 組件選項 | 一個函數，必須返回上述其中一個
-
{Object}一個對應HTML標簽屬性的數據對象（可選）
-
{String | Array}子節點（VNode）（可選）
⚠️ 關於第三個參數的說明
-
createElement第三個參數，如果是String，則類似於innerHTML，如果是Array，則可以寫入一個執行函數，這個函數用於創建另一個DOM結構（而且這里如果想寫入一個執行函數，必須是數組！！）
-
每個createElement只能創建一個元素，所以如果是創建多個元素相互嵌套，需要多個createElement函數相互嵌套，最后再render，這個跟原生js創建DOM元素類似
-
如果需要同時渲染多個元素，則需要在第三個參數的數組中，分別寫入需要渲染的元素，此時Vue會按照數組中順序進行渲染
完整數據對象：
{
// 和`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'
},
// 事件監聽器基於 "on"
// 所以不再支持如 v-on:keyup.enter 修飾器
// 需要手動匹配 keyCode。
on: {
click: this.clickHandler
},
// 僅對於組件，用於監聽原生事件，而不是組件使用 vm.$emit 觸發的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令. 注意事項：不能對綁定的舊值設值
// Vue 會為您持續追踨
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 的名稱
slot: 'name-of-slot'
// 其他特殊頂層屬性
key: 'myKey',
ref: 'myRef'
}
vue-router2.x
1.router-view
在vue-router2中<router-view>是最頂層的出口，渲染最高級路由匹配到組件。同樣地，一個被渲染組件同樣可以包含自己的嵌套<router-view>。
2.掛載
在router1.0中，掛載節點的方式為router.start()而在router2.0中使用vue自己的$mount手動掛載
3.給link添加事件
在vue-router1中使用v-link寫入路由，但是在vue-router2中要使用router-link寫入路由，在瀏覽器渲染的時候會把router-link渲染成a。
有時候需要為router-link注冊事件，對於一般的html元素，直接使用@click="eventFun"即可，但是對於router-link，像普通html元素那樣注冊事件后並不管用，需要添加.native才會成功注冊。
事實上給組件綁定原生事件就需要.native修飾v-on，否則無法注冊成功。
<my-component v-on:click.native="doTheThing"></my-component>
4.利用vue-router做導航
在利用vue-router做導航的時候，需要用到redirect關鍵字的重定向功能，具體寫法如下：
const router = new VueRouter({
routes : [
{path:'/',redirect:'/ZY'},
{path:'/ZY',component:ZY}
]
});
5.路由嵌套
vue-router的路由嵌套指的是子組件會在父組件中渲染出來，必須是子組件的父組件，祖先不可以實現，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+