使用vue2+Axios+Router 以後的總結以及遇到的一些坑

構建

vue有本身的腳手架構建工具vue-cli,使用起來很是方便，使用webpack來集成各類開發便捷工具，好比：

• 代碼熱更新，修改代碼以後網頁無刷新改變，對前端開發來講很是的方便
• PostCss，不再用去管兼容性的問題了，只針對chrome寫css代碼，會自動編譯生成支持多款瀏覽器的css代碼
• Eslint，統一代碼風格，規避低級錯誤，對於有代碼潔癖的人來講是絕對的好東西，不過有些地方的代碼校驗有時候也挺麻煩的-.-
• bable，ES2015出來已經有一段時間了，可是很多瀏覽器尚未兼容ES6.有了bable，放心使用ES6語法，它會自動轉義成ES5語法。
• Stylus，相似於SASS/SCSS，可是能夠不寫{}和「：」，使用起來仍是很方便的
• …

除此以外，vue-cli已經使用node配置了一套本地服務器和安裝命令等，本地運行和打包只須要一個命令就能夠搞定，很是的方便

開發

vue很是好的融合了react的組件化思想和angular的指令思想。 一個vue的組件將HTML、CSS、JS代碼寫在一個文件裏面，這樣既方便編寫，也方便管理和修改

Axios

在vue1.x的時候，vue的官方推薦HTTP請求工具是vue-resource，可是在vue2.0的時候將推薦工具改爲了axios。

使用方式都差很少，但須要注意的是：接口返回的res並不直接是返回的數據，而是通過axios自己處理過的json對象。真正的數據在res.data裏：

axios.get(url).then((res)=>{
  this.data = res.data
})

Vuex

vue提供了一個數據管理工具vuex，有點相似於angular中factory和service，能夠進行數據上的通訊。 好比存儲一些公共變量或者是不一樣組件間的數據處理等。

這個有一些高級用法在這裏不細說，想要了解的能夠去官方文檔看，有中文版本（https://vuex.vuejs.org/zh-cn/）。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

 

Vue-Router

vue-router是vue的路由系統，能夠用來建立單頁應用。基本思想是在主頁面中引入標籤，而後定義路由，把router掛在到app上，而後把各個子頁面渲染到view裏面。使用起來仍是很方便的， 跳轉頁面只須要

router.push('test')

獲取元素節點

vue2.0廢除了v-el指令，全部的節點指令修改成ref，而後經過ref來獲取元素節點，如

<div ref="testHook">test</div>
...js code
this.$ref.testHook

組件間的通訊

一。若是是和子組件通訊，則使用ref就能夠實現，如：

<test ref="testHook"></test>
...js code
this.$ref.testHook.add() //調用test子組件的add方法

二。使用emit來發送廣播

vue2提供了一套廣播機制，即一邊發送廣播，一邊接收廣播來執行相應操做。使用方法以下：

好比想要給test組件發送一個「相加」廣播:

export default {
  method:{
    click(){
      Vue.$emit('add',{}) //第二個參數可做爲傳遞數據傳送到監聽端口，不須要則傳空對象
    }
  }
}

那麼test組件中就須要監聽，在created方法裏寫

export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
    add(){
      this.count++
    }
  }
}