摘要：年前就打算學(xué)習(xí)并總結(jié)一下，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來(lái)。因?yàn)樵陧?xiàng)目中使用了，所以對(duì)于也有一個(gè)踩坑總結(jié)，點(diǎn)擊鏈接。

年前就打算學(xué)習(xí)并總結(jié)一下vue2.x，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來(lái)。因?yàn)樵陧?xiàng)目中使用了webpack2.x，所以對(duì)于webpack2.x也有一個(gè)踩坑總結(jié)，點(diǎn)擊鏈接。

原文鏈接：http://mrzhang123.github.io/2...
項(xiàng)目地址：https://github.com/MrZhang123...

在按照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"
  }
}

在原來(lái)的vue1.0的項(xiàng)目中我使用body元素作為掛載點(diǎn)，但是在vue2.0中，如果使用body或者html作為掛載點(diǎn)，則會(huì)報(bào)以下警告：Do not mount Vue to or - mount to normal elements instead.

在vue1.0中允許開發(fā)者以body或者html作為根實(shí)體的掛載點(diǎn)，但是到了2.0后，只能通過獨(dú)立的節(jié)點(diǎn)掛載，例如：div等，否則報(bào)警告

多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)地在它們之間切換。使用保留的 元素，動(dòng)態(tài)地綁定到它的 is 特性：

如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個(gè) keep-alive 指令參數(shù)：

有時(shí)候需要直接在父組件中訪問子組件實(shí)例，或者直接操作DOM元素，此時(shí)需要使用ref。

ref被用來(lái)給元素或子元素注冊(cè)引用信息。引用信息會(huì)根據(jù)父組件的$refs對(duì)象進(jìn)行注冊(cè)。如果在普通的DOM元素上使用，引用信息就是元素，如果用在子組件上，引用信息就是組件實(shí)例。

hello

當(dāng) v-for 用于元素或組件的時(shí)候，引用信息將是包含DOM節(jié)點(diǎn)或組件實(shí)例數(shù)組。

關(guān)于ref注冊(cè)時(shí)間的重要說(shuō)明: 因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模版中做數(shù)據(jù)綁定。

在vue自定義事件使用$on與$emit，前者用于觸發(fā)監(jiān)聽，后者用于觸發(fā)，監(jiān)聽可以有兩種方式

當(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 形式：

當(dāng)使用字符串模式時(shí)可以使用 camelCase 、 TitleCase 或者 kebab-case 來(lái)引用：

有時(shí)候子組件簡(jiǎn)單，可以在父組件中直接注冊(cè)，此時(shí)在子組件內(nèi)使用this就是子組件實(shí)例并不是父組件，例如：

export default{
    data(){
        return{
            parentMsg:"hello!"
        }
    },
    components:{
        child:{
            props:["inputMessage"],
            template:"{{inputMessage}}"
        },
        "child-secound":{
            props:["inputMessage"],
            template:"{{upperCase}}",
            computed:{
                upperCase(){
                    return this.inputMessage.toUpperCase();
                }
            }    
        }
    }
}

一般情況下，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

在使用時(shí)候，不僅可以定義進(jìn)入離開動(dòng)畫，還可以使用新增的v-move特性，與過渡一樣，默認(rèn)為v-move，可以用name進(jìn)行自定義前綴，也可以用move-class屬性手動(dòng)設(shè)定。用了這個(gè)之后就可以實(shí)現(xiàn)移動(dòng)過程中的動(dòng)畫。

對(duì)于只使用js過度的元素使用v-bind:css="false"跳過vue對(duì)css的檢測(cè)。

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，則類似于innerHTML，如果是Array，則可以寫入一個(gè)執(zhí)行函數(shù)，這個(gè)函數(shù)用于創(chuàng)建另一個(gè)DOM結(jié)構(gòu)（而且這里如果想寫入一個(gè)執(zhí)行函數(shù)，必須是數(shù)組！！）

每個(gè)createElement只能創(chuàng)建一個(gè)元素，所以如果是創(chuàng)建多個(gè)元素相互嵌套，需要多個(gè)createElement函數(shù)相互嵌套，最后再render，這個(gè)跟原生js創(chuàng)建DOM元素類似

如果需要同時(shí)渲染多個(gè)元素，則需要在第三個(gè)參數(shù)的數(shù)組中，分別寫入需要渲染的元素，此時(shí)Vue會(huì)按照數(shù)組中順序進(jìn)行渲染

完整數(shù)據(jù)對(duì)象：

{
  // 和`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)聽器基于 "on"
  // 所以不再支持如 v-on:keyup.enter 修飾器
  // 需要手動(dòng)匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅對(duì)于組件，用于監(jiān)聽原生事件，而不是組件使用 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 }
  scopedSlots: {
    default: props => h("span", props.text)
  },
  // 如果子組件有定義 slot 的名稱
  slot: "name-of-slot"
  // 其他特殊頂層屬性
  key: "myKey",
  ref: "myRef"
}

在vue-router2中是最頂層的出口，渲染最高級(jí)路由匹配到組件。同樣地，一個(gè)被渲染組件同樣可以包含自己的嵌套。

在router1.0中，掛載節(jié)點(diǎn)的方式為router.start()而在router2.0中使用vue自己的$mount手動(dòng)掛載

在vue-router1中使用v-link寫入路由，但是在vue-router2中要使用router-link寫入路由，在瀏覽器渲染的時(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è)成功。

在利用vue-router做導(dǎo)航的時(shí)候，需要用到redirect關(guān)鍵字的重定向功能，具體寫法如下：

const router = new VueRouter({
    routes : [
        {path:"/",redirect:"/ZY"},
        {path:"/ZY",component:ZY}
    ]
});

vue-router的路由嵌套指的是子組件會(huì)在父組件中渲染出來(lái)，必須是子組件的父組件，祖先不可以實(shí)現(xiàn)，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

Vue.js官方文檔
vue-router 2官方文檔