最近在學vue，主要從以下幾個方面學習：

•環境安裝

•模板語法（怎麼寫）

•指令

•選項、生命週期（寫在哪兒）

•vuejs-devtools（怎麼除錯）

1.Vue.js 簡介

Vue.js是一套構建使用者介面的UI框架，它專注於MVVM模型的ViewModel層，通過雙向資料繫結把View層和Model層連結起來。

2.Vue.js 特點

•模板雙向繫結機制

•利用指令（directive）對DOM進行封裝

•元件化設計思想等

3.Vue.js 安裝

•CDN script引入

•NPM

•線上編輯器（推薦）

•命令列工具

  安裝node環境

  npm install -g @vue/cli

  vue create hello-world

  npm install

  npm run serve

4.模板語法

5.指令

•v-text=={{message}}

•v-html <div v-html="message2"></div>

•v-show：<h1 v-show="ok">Hello!</h1>

•v-if：<div v-if="type === 'A'">

•v-else：<div v-else>

•v-else-if：<div v-else-if="type === 'B'">

•v-for：<div v-for="(item, index) in items"></div>

•v-on[email protected]：<button v-on:click="doThat('hello', $event)"></button>

•v-bind==：<img v-bind:src="imageSrc"> 縮寫<img :src="

•v-model：<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

6.Vue事件

•V-on：監聽事件

•自定義事件

元件內丟擲：this.$emit('myEvent')

外部監聽：<my-component v-on:myEvent="doSomething"></my-component>

•將原生事件繫結到元件

<base-input v-on:focus.native="onFocus"></base-input>

7.特殊特性

•Key：有相同父元素的子元素必須有獨特的 key，主要用在v-for

•Ref：<input ref="input">被用來給元素或子元件註冊引用資訊

•Slot：用於標記往哪個具名插槽中插入子元件內容

8.選項 / 資料

•Data： Vue 例項的資料物件

•Props： props 可以是陣列或物件，用於接收來自父元件的資料

•Computed：計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算

•Watch：一個物件，鍵是需要觀察的表示式，值是對應回撥函式

•Methods：放置普通函式的地方

9.生命週期

beforeCreate：此時data、method和$el均沒有初始化
created：此時data和method初始化完成，但是DOM節點並沒有掛載

beforeMount：編譯模板，並且將此時在el上掛載一個虛擬的DOM節點

mounted：編譯模板，且將真實的DOM節點掛載在el上，可做資料請求

beforeUpdate：在資料有更新時，進入此鉤子函式，虛擬DOM被重新建立

updated：資料更新完成時，進入此鉤子函式

beforeDestory：元件銷燬前呼叫，移除watchers、子元件和事件等 
destoryed：元件銷燬後呼叫

10.混入

11.元件

12.除錯

13.一些學習網站和參考資料

•https://cn.vuejs.org/v2/api/

•https://wiki.imooc.com/vue/vuejsintroduce.html

•https://codesandbox.io

•https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd