Vue2.x 踩坑与总结
vue2.x
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.
在vue1.0中允許開發者以body或者html作為根實體的掛載點，但是到了2.0后，只能通過獨立的節點掛載，例如：div等，否則報警告
3.動態組件渲染（跟1.x類似）
多個組件可以使用同一個掛載點，然后動態地在它們之間切換。使用保留的 元素，動態地綁定到它的 is 特性：
keep-alive
如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：
4.ref
有時候需要直接在父組件中訪問子組件實例，或者直接操作DOM元素，此時需要使用ref。
ref被用來給元素或子元素注冊引用信息。引用信息會根據父組件的$refs對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素，如果用在子組件上，引用信息就是組件實例。
hello
當 v-for 用于元素或組件的時候，引用信息將是包含DOM節點或組件實例數組。
關于ref注冊時間的重要說明: 因為ref本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模版中做數據綁定。
5.自定義事件
在vue自定義事件使用$on與$emit，前者用于觸發監聽，后者用于觸發，監聽可以有兩種方式
6.組件命名的約定
當注冊組件（或者 props）時，可以使用 kebab-case ，camelCase ，或 TitleCase
// 在組件定義中 components: {// 使用 kebab-case 形式注冊'kebab-cased-component': { /* ... */ },// register using camelCase'camelCasedComponent': { /* ... */ },// register using TitleCase'TitleCasedComponent': { /* ... */ } }在 HTML 模版中，只能使用 kebab-case 形式：
當使用字符串模式時可以使用 camelCase 、 TitleCase 或者 kebab-case 來引用：
7.子組件中使用this
有時候子組件簡單，可以在父組件中直接注冊，此時在子組件內使用this就是子組件實例并不是父組件，例如：
export default{data(){return{parentMsg:'hello!'}},components:{child:{props:['inputMessage'],template:'{{inputMessage}}'},'child-secound':{props:['inputMessage'],template:'{{upperCase}}',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`一樣的 APIstyle: {color: 'red',fontSize: '14px'},// 正常的 HTML 特性attrs: {id: 'foo'},// 組件 propsprops: {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 }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 | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+原文發布時間：2017-02-07 本文來源掘金如需轉載請緊急聯系作者
總結
以上是生活随笔為你收集整理的Vue2.x 踩坑与总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UniDBGrid增加显示记录数的lab
- 下一篇： 用vue做项目的一些总结