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

<font color='red'>在vue1.0中允許開發者以body或者html作為根實體的掛載點，但是到了2.0後，只能通過獨立的節點掛載，例如：div等，否則報警告</font>

3.動態元件渲染（跟1.x類似）

多個元件可以使用同一個掛載點，然後動態地在它們之間切換。使用保留的 <component> 元素

<!-- 動態元件由 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 | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+