摘要：年前就打算學習并總結(jié)一下，但是因為年前工作比較多，所以進展十分緩慢，現(xiàn)在終于學了一大部分，而且自己在學習開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來。因為在項目中使用了，所以對于也有一個踩坑總結(jié)，點擊鏈接。

年前就打算學習并總結(jié)一下vue2.x，但是因為年前工作比較多，所以進展十分緩慢，現(xiàn)在終于學了一大部分，而且自己在學習開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來。因為在項目中使用了webpack2.x，所以對于webpack2.x也有一個踩坑總結(jié)，點擊鏈接。

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

在按照vue1.0的配置配置好webpack后，會出現(xiàn)Failed to mount component: template or render function not defined. (found in root instance) 的錯誤，這里涉及到vue2.0與vue1.0的第一個不同的地方。具體區(qū)別獨立構(gòu)建 vs 運行時構(gòu)建。解決方法為在webpack配置文件中添加如下配置項：

resolve: {
  alias: {
    "vue$": "vue/dist/vue.common.js"
  }
}

在原來的vue1.0的項目中我使用body元素作為掛載點，但是在vue2.0中，如果使用body或者html作為掛載點，則會報以下警告：Do not mount Vue to or - mount to normal elements instead.

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

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

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

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

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

hello

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

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

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

當注冊組件（或者 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 來引用：

有時候子組件簡單，可以在父組件中直接注冊，此時在子組件內(nèi)使用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();
                }
            }    
        }
    }
}

一般情況下，vue在渲染完成后，如果數(shù)據(jù)發(fā)生變化，只會重新渲染數(shù)據(jù)，不會重新渲染整個元素，但是有時候我們需要元素被重新渲染，此時就需要使用key關(guān)鍵字，使用v-bind綁定key關(guān)鍵字，可以實現(xiàn)在數(shù)據(jù)發(fā)生變化時候重新渲染整個元素。注：同一父級元素下所有子元素如果都要在數(shù)據(jù)變化后重新渲染元素，則需要被綁定的key

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

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

createElement接受三個參數(shù)：

{String | Object | Function}即一個HTML標簽 | 組件選項 | 一個函數(shù)，必須返回上述其中一個

{Object}一個對應(yīng)HTML標簽屬性的數(shù)據(jù)對象（可選）

{String | Array}子節(jié)點（VNode）（可選）

?? 關(guān)于第三個參數(shù)的說明

createElement第三個參數(shù)，如果是String，則類似于innerHTML，如果是Array，則可以寫入一個執(zhí)行函數(shù)，這個函數(shù)用于創(chuàng)建另一個DOM結(jié)構(gòu)（而且這里如果想寫入一個執(zhí)行函數(shù)，必須是數(shù)組！?。?/p>

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

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

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

{
  // 和`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 修飾器
  // 需要手動匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅對于組件，用于監(jiān)聽原生事件，而不是組件使用 vm.$emit 觸發(fā)的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令. 注意事項：不能對綁定的舊值設(shè)值
  // Vue 會為您持續(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中是最頂層的出口，渲染最高級路由匹配到組件。同樣地，一個被渲染組件同樣可以包含自己的嵌套。

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

在vue-router1中使用v-link寫入路由，但是在vue-router2中要使用router-link寫入路由，在瀏覽器渲染的時候會把router-link渲染成a。

有時候需要為router-link注冊事件，對于一般的html元素，直接使用@click="eventFun"即可，但是對于router-link，像普通html元素那樣注冊事件后并不管用，需要添加.native才會成功注冊。

事實上給組件綁定原生事件就需要.native修飾v-on，否則無法注冊成功。

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

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

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

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

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