通過這段時間的學習，我對于vue.js有了一定的了解和泌。
下面是我的一些學習心得，主要分為三部分：

• vue.js相關(guān)概念
• 工具和插件使用
• 學習感想

相關(guān)概念

什么是Vue.js

Vue.js是一個用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是岖常，Vue 被設(shè)計為可以自底向上逐層應用。Vue 的核心庫只關(guān)注視圖層萤皂，不僅易于上手撒穷，還便于與第三方庫或既有項目整合。
Vue.js采用MVVM的設(shè)計模式（M-Model裆熙，V-View端礼，VM-ViewModel）禽笑，將數(shù)據(jù)和視圖分離，用數(shù)據(jù)來驅(qū)動視圖蛤奥。vue專注于view(視圖層)佳镜，view層的變化由數(shù)據(jù)操控，即所有的一切通過操作數(shù)據(jù)來進行凡桥，盡量避免操作dom樹蟀伸。與此同時，View和ViewModel之間通過雙向綁定建立聯(lián)系缅刽，即View變化啊掏，ViewMode也會發(fā)生相應的變化，反之亦然衰猛。

vue生命周期

每個 vue 實例創(chuàng)建時迟蜜，都會經(jīng)歷一系列的初始化過程，這個過程就是生命周期啡省。在周期中會調(diào)用相應的生命周期鉤子娜睛。我們可以利用這些鉤子，在合適的時機執(zhí)行我們的業(yè)務邏輯卦睹。

image

• created 實例創(chuàng)建完成后調(diào)用分预，此階段完成了數(shù)據(jù)的觀測等兢交，但尚未掛載， $el 還不可用笼痹。需要初始化處理一些數(shù)據(jù)時會比較有用
• mounted el 掛載到實例上后調(diào)用配喳，一般我們的第一個業(yè)務邏輯會在這里開始
• beforeDestroy 實例銷毀之前調(diào)用。主要解綁一些使用 addEventListener 監(jiān)聽的事件等凳干。

指令

指令是vue 模板中最常用的一項功能晴裹，它帶有前綴v-。指令的主要職責就是當其表達式的值改變時救赐，相應地將某些行為應用到 DOM 上涧团。常用的指令有

• v-bind：動態(tài)更新html上的屬性
• v-model：用在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定的。根據(jù)控件類型v-model自動選取正確的方法更新元素经磅。
• v-for：循環(huán)渲染
• v-if：根據(jù)表達式的值在DOM中生成或移除一個元素泌绣。
• v-show：根據(jù)表達式的值控制元素顯示隱藏，類似display：block/none
• v-else：跟著v-if或者v-show使用
• v-on：綁定事件監(jiān)聽器
  注：一般來說预厌，v-if有更高的切換消耗阿迈，而v-show有更高的初始渲染消耗。因此轧叽，如果需要頻繁的切換苗沧，則使用v-show較好刊棕；如果在運行時條件不大可能改變，則使用v-if較好待逞。

插值與表達式

雙大括號'{{}}'是最基本的文本插值方法甥角，會自動將雙向綁定的數(shù)據(jù)實時顯示出來
在'{{}}'中，除了簡單的綁定屬性值外识樱，還可 使用 JavaScript 表達式進行簡單的運算, 三元運算等嗤无。因為文本插值只支持單個表達式，如果表達式過長或者邏輯復雜時可以使用計算屬性

<div id=" app ">
    {{book}} //顯示《Vue.js實戰(zhàn)》
    {{price / 10}}//顯示3
    {{isOk?'yes':'no'}}//顯示no
</div> 
<script> 
var app =new Vue({ 
    el:'#app', 
    data:{ 
      book:'《Vue.js 實戰(zhàn)》'牺荠，
      price:'30',
      isOk:false
    }
}) 
</script>

計算屬性與方法

所有的計算屬性都以函數(shù)的形式寫在 Vue 實例內(nèi)的 computed 選項內(nèi)翁巍，最終返回計算后的結(jié)果。每一個計算屬性都有一個getter方法和setter方法休雌，分別用來讀取和寫入灶壶，絕大多數(shù)情況下，我們只會用默認的 getter 方法來讀取計算屬性杈曲，所以聲明計算屬性時直接使用默認的寫法驰凛，不聲明getter和setter，但是在使用vuex結(jié)合表單時担扑，在計算屬性中就需要getter和setter方法恰响，否則修改表單會報錯。

<div id=" app ">
    {{text.split(',').reverse().join(',')}}
    {{reverseText}}
</div> 
<script> 
var app =new Vue({ 
    el:'#app', 
    data:{ 
      text:'123,456'
    },
    computed:{
      reverseText:function(){
         return this.text.split(',').reverse().join(',')
     }
    }
}) 
</script>

vue中方法都寫在實例的methods屬性中涌献。Vue.js將methods 里的方法也代理了胚宦，所以也可以像訪問 Vue 數(shù)據(jù)那樣來調(diào)用方法

<div id=" app ">
    {{reverseText}}
</div> 
<script> 
var app =new Vue({ 
    el:'#app', 
    data:{ 
      text:'123,456'
    },
    methods:{
      reverseText:function(){
         return this.text.split(',').reverse().join(',')
     }
    }
}) 
</script>

從上面兩段代碼可以發(fā)現(xiàn)使用methods的方法可以起到和計算屬性相同的屬性，但是計算屬性和方法還是有區(qū)別的燕垃。計算屬性是基于它的依賴緩存的枢劝。 個計算屬性所依賴的數(shù)據(jù)發(fā)生變化時，它才會重新取值卜壕，所以text 只要不改變您旁，計算屬性也就不更新，但methods不同轴捎，只要重新渲染就會被調(diào)用鹤盒，函數(shù)也會執(zhí)行。
使用計算屬性還是 methods 取決于你是否需要緩存侦副，當遍歷大數(shù)組和做大量計算時侦锯，應當使用計算屬性，除非你不希望得到緩存秦驯。

數(shù)據(jù)雙向綁定

<div id="app">
  <input type="text" v-model=" name" placeholder="你的名字"
  <hl＞你好率触，{{ name }}</hl> 
</div> 
<script>
var app = new Vue({ 
  el: '#app', 
  data:{ 
    name:''
  }) 
</script>

上面代碼體現(xiàn)了vue的數(shù)據(jù)雙向綁定功能，input標簽使用v-model指令綁定了數(shù)據(jù)name，v-model是一個雙向綁定指令葱蝗，所以用戶在輸入框中輸入時，會更新數(shù)據(jù)name的值细燎，當使用app.name = 'XXX'更新數(shù)據(jù)時輸入框中內(nèi)容也會發(fā)生改變两曼。

組件

任何一個頁面都可以劃分成很多功能獨立的組件，然后像搭積木一樣搭建頁面玻驻。
組件是可復用的vue實例悼凑，和new Vue 接收相同的選項，例如 data璧瞬、computed户辫、watch、methods 以及生命周期鉤子等嗤锉。僅有的例外是像 el 這樣根實例特有的選項渔欢。
需要注意的一點是：組件中的data必須是一個函數(shù)，這樣組件復用時每個組件才能維護自己獨立的數(shù)據(jù)瘟忱，否則復用的組件共用一份數(shù)據(jù)奥额。

注冊

組件必須先注冊才能使用，注冊有兩種方式：全局注冊和局部注冊访诱。全局注冊后任何vue實例都可以調(diào)用垫挨。
組件都只是通過 Vue.component 全局注冊的

<div id="app">
<my-component></my-component> 
</div> 
<script>
Vue.component('my-component', {
  // ... options ...
})
var app =new Vue({ 
  el :'#app'
}) 
</script>

在vue實例中，可以使用components選項局部注冊組件触菜，注冊的組件只在該實例作用域下有效九榔。

<div id="app ">
<my-component></my-component> 
</div> 
<script>
var Child = { 
  template:'<div>局部注冊組件的內(nèi)容</div>'
}
var app =new Vue(( 
  el:'app',
  components:{
    'my-component':Child
  }
}) 
</script>

通信

• 父->子
  父組件通過props向子組件傳遞數(shù)據(jù)

<div id="app">
<my-component :message="parentMessage"></my-component> 
</div> 
<script>
Vue.component('my-component', {
  props:['message'],
  template:'<div>{{message}}</div>'
})
var app =new Vue({ 
  el :'#app',
  data(){
  parentMessage:'哈哈哈',
}
}) 
</script>

• 子->父
  子組件通過$emit觸發(fā)事件，父組件通過v-on來監(jiān)聽子組件的事件

<div id="app">
<p>總數(shù)：{{total}}</p>
<my-component @increase="handleTotal"></my-component>
</div> 
<script>
Vue.component('my-component', {
  data(){
  count:0
 },
  template:'<div><button @click="handler">+</button></div>',
  methods:{
    handler:function(){
       this.count++;
       this.$emit('increase',this.count);
   }
}
})
var app =new Vue({ 
  el :'#app',
  data(){
    total:0
  },
  methods:{
    handleTotal:function(val){
    this.total = total;
    }
  }
}) 
</script>

• 兄弟組件
  將數(shù)據(jù)上傳至共同父組件中涡相，再由父組件傳遞給子組件
  為了便于開發(fā)哲泊，Vue 推出了一個狀態(tài)管理工具 Vuex，可以很方便實現(xiàn)組件之間的參數(shù)傳遞

虛擬dom

之前有簡單了解react前端框架漾峡，react使用了虛擬DOM來提高性能攻旦，合并Dom操作，加快頁面的刷新速度生逸。vue2.0加入了虛擬dom的概念牢屋，虛擬dom操作相對快速。通過對虛擬DOM進行diff槽袄，逐步找到更新前后虛擬dom的差異烙无，然后更新變化的部分，減少了因為頁面重排dom樹結(jié)構(gòu)變化產(chǎn)生的性能耗費遍尺。

工具和插件的使用

在使用vue寫項目時截酷，通常會結(jié)合webpack打包工具，vuex狀態(tài)管理工具以及vue-router前端路由管理等工具乾戏。

webpack

在使用webpack時迂苛，首先要配置webpack.config.js文件三热，配置入口文件，出口文件三幻，loaders和plugins就漾，配置完成后，啟動項目webpack會自動分析模塊間引用關(guān)系念搬，將用到的模塊進行打包抑堡。而且webpack有豐富的插件可以使用。

vuex

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式朗徊。它采用集中式存儲管理應用的所有組件的狀態(tài)首妖，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。使用時需要在main.js中引入爷恳，同時使用vue.use(vuex)有缆，然后創(chuàng)建store，傳入根組件舌仍，這樣每個子組件都能獲取store中的state妒貌，state不能直接改變，只能通過顯式的提交mutations铸豁。vuex還提供了getters灌曙，actions和modules等選項。getters可以將計算屬性中處理從store獲得數(shù)據(jù)的過程提取出來實現(xiàn)復用节芥，mutation 里不應該異步操作數(shù)據(jù)在刺，所以有了 actions選項 ，action和mutation很像头镊，但是action里面提交的是mutation蚣驼，并且可以異步操作業(yè)務邏輯。最后一個選項是 modules 相艇，它用來將 store 分割到不同模塊颖杏。當你的項目足夠大時， store 里的state坛芽， getters留储， mutations， actions 會非常多咙轩，都放在 rnain.js 里顯得不是很友好获讳，使用 modules 可以把它們寫到不同的文件中。每個 module 擁有自己的 state getters活喊， mutations丐膝， actions ，而且可以多層嵌套。

const moduleA = { 
  state: { . . . } , 
  mutations: { . . . } , 
  actions: { . . . ) , 
  getters: { . . . )
}
const moduleB = { 
  state: { . . . } , 
  mutations: { . . . } , 
  actions: { . . . ) , 
  getters: { . . . )
}
const store= new Vuex . Store ( { 
  modules : { 
    a: moduleA, 
    b: moduleB
  }
})

vue-router

使用vue和vue-router構(gòu)建單頁應用會非常簡單帅矗，添加vue-router和添加vuex的過程相似偎肃，都是在main.js中引入，在使用vue.use(vue-router)损晤，創(chuàng)建routes并掛載到根組件软棺。vue-router每個路由映射一個組件，當路由匹配時加載相應的組件尤勋。目前自己用到的就是普通路由以及動態(tài)路由,嵌套路由只是了解但是沒有使用

vue-source/axios

vue-resource是一個通過XMLHttpRequest或者JSONP技術(shù)實現(xiàn)異步加載服務端數(shù)據(jù)的插件，vue2.0以后茵宪，vue就不再對vue-resource進行更新最冰，而是推薦axios

學習感想

學習vue之后，最大的感受就是幾乎不需要手動去操作DOM元素了稀火，只需要把元素和數(shù)據(jù)綁定起來暖哨，更新了數(shù)據(jù)后，vue就會自動更新DOM元素凰狞，比起在js中獲取元素設(shè)置相關(guān)屬性篇裁，方便了很多。而且vue的事件綁定都是在HTML中綁定赡若，跟在JS中獲取元素然后添加事件相比达布，代碼的可讀性提高很多，也有利于前端代碼的封裝逾冬。在使用vue寫項目時黍聂，首先是搭建環(huán)境，這里可以使用vue-cli腳手架搭建項目身腻，vue-cli提供了豐富的選項产还，可以幫我們搭建好項目框架，然后自己再引入需要的插件嘀趟、配置工具脐区，常常需要的就是vuex，vue-router以及axios和webpack她按，這些與vue結(jié)合使得構(gòu)建vue項目更加容易牛隅。