ps: 因為公司業(yè)務(wù)需求，最近學(xué)習(xí)了一段時間Vue+node轨帜，關(guān)于哪個前端框架更好现喳，仁者見智，
這里列一下前端各框架性能對比 Vue vs React / Vue vs AngularJs

關(guān)于vue全家桶 vue-cli + vue-router + vuex + axios

一搪泳、 腳手架新建項目 vue-cli

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev

項目目錄

二蜕提、 Vue的路由 vue-router

vue-router在全家桶里面定位是什么呢? 前端路由森书、創(chuàng)建單頁應(yīng)用靶端！

# 摘自vue-router官方解釋
用 Vue.js + vue-router 創(chuàng)建單頁應(yīng)用谎势，是非常簡單的。
使用 Vue.js 杨名，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序脏榆，
當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是台谍，
將組件(components)映射到路由(routes)须喂，然后告訴 vue-router 在哪里渲染它們

vue的核心概念是組件(components)，vue-router將組件(components)映射到路由(routes)趁蕊，然后告訴 vue-router 在哪里渲染它們坞生！

關(guān)于路由的使用

1、在App.vue中新建視圖 --- 渲染到哪

App.vue

2掷伙、 路由頁面（router/module/index）編寫路由 --- 渲染什么模塊

image.png

module1是己、module2分文件夾，是解決大型項目路由復(fù)雜的問題任柜。業(yè)務(wù)復(fù)雜度不高的可以直接把index.js文件拿出來

如果出現(xiàn)使用 ()=>import(@/component/index),加載組件報錯的問題卒废，可能是其他方式構(gòu)建的項目，沒有使用babel,或者缺少babel插件syntax-dynamic-import宙地，解決辦法參考： vue-router按需加載

3摔认、 路由配置好之后，路由怎么跳轉(zhuǎn)
路由按照上面的寫法就配置好了各個路由宅粥，那么在頁面之間需要路由跳轉(zhuǎn)怎么做呢参袱？

a. 標(biāo)簽導(dǎo)航 <router-link to="/foo">Go to Foo</router-link>
b. 編程式導(dǎo)航  $router.push()、$router.replace()

查看詳細(xì)： vue-router

三、axios(vue-resource已經(jīng)不再維護(hù)蓖柔，vue2.0官方推薦使用axios)

Axios 是一個基于 promise 的 HTTP 庫辰企，可以用在瀏覽器和 node.js 中。

• 從瀏覽器中創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 http 請求
• 支持 Promise API
• 攔截請求和響應(yīng)
• 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
• 取消請求
• 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
• 客戶端支持防御 XSRF

//get
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

文檔地址： github 况鸣、中文翻譯

項目整合Axios的方法
1牢贸、全局注冊axios，適用于請求較少的項目
在main.js中加入如下代碼：

import axios from 'axios'
Vue.prototype.$http = axios

全局注冊

2镐捧、封裝

//新建一個JS命名為api
import axios from 'axios' 
//在api中導(dǎo)入axios
let base = '/v1'

//把整個項目的網(wǎng)絡(luò)請求都寫在這個文件中用export導(dǎo)出

export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }

//這樣寫方便管理整個項目的網(wǎng)絡(luò)請求

//在我們要是用這個請求時比如說getproduct

import {
    getproduct
  }from '../api/api';
export default {
  name: 'HelloWorld',
  data () {
    return {
      params:{}
    }
  },
  methods: {
    getProductList(){
      getproduct(this.params).then(result=>{
        console.log(result);
      })
    }
  }
}
//注意我們導(dǎo)出的時候用的是export 所以導(dǎo)入的時候必須帶{}

擴展：利用Aixos實現(xiàn)前端實現(xiàn)登錄攔截

跨域請求

跨域請求是web開發(fā)必須解決的一個問題潜索。搞不定沒有數(shù)據(jù)，就只能GAMEOVER了懂酱。 看這里不焦急~

不同域名之間的訪問竹习，需要跨域才能正確請求×形跨域的方法很多整陌，通常都需要后臺配置
不過 Vue-cli 創(chuàng)建的項目，可以直接利用 Node.js 代理服務(wù)器瞎领，實現(xiàn)跨域請求【正向代理】

1泌辫、在 config>index.js 的 dev 中添加配置項 proxyTable：

• '/api' 為匹配項
• target 為被請求的地址

配置代理

參考:
Vue-cli 創(chuàng)建的項目如何跨域請求
前端開發(fā)如何獨立解決跨域問題 --- 這篇文章是標(biāo)題黨

Vue 知識點總結(jié)

vue 的核心思想是，數(shù)據(jù)驅(qū)動和組件化九默。

1震放、MVVM數(shù)據(jù)驅(qū)動，有別于傳統(tǒng)jq+bootstrap的技術(shù)棧驼修，代碼組織的時候殿遂，需要摒棄操作dom的想法，一切皆數(shù)據(jù)乙各！一切交互的操作墨礁，都是對數(shù)據(jù)的修改~

數(shù)據(jù)驅(qū)動

2、組件化耳峦，其實就是把頁面進(jìn)行分塊處理恩静，分成多個小塊，每個小塊就是一個組件妇萄，這樣可以形成組件的復(fù)用蜕企，而且提高開發(fā)效率。
把應(yīng)用根據(jù)功能拆分為一個個顆粒度合理的組件冠句，需要一些項目鍛煉轻掩。
擴展： 編寫良好的前端組件

組件樹

3、指令
文本{{ }} 懦底、 v-html唇牧、v-show罕扎、v-if、v-else丐重、v-if-else腔召、v-once、v-bind扮惦、v-for臀蛛、v-on、

區(qū)別點

a. v-if vs v-show

v-if 是“真正”的條件渲染崖蜜，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建浊仆。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r豫领，才會開始渲染條件塊抡柿。

相比之下，v-show 就簡單得多——不管初始條件是什么等恐，元素總是會被渲染洲劣，并且只是簡單地基于 CSS 進(jìn)行切換。

一般來說课蔬，v-if 有更高的切換開銷囱稽，而 v-show 有更高的初始渲染開銷。因此购笆，如果需要非常頻繁地切換粗悯，則使用 v-show 較好虚循；如果在運行時條件很少改變同欠，則使用 v-if 較好。

b. v-for 列表渲染

# 當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時横缔，它默認(rèn)用“就地復(fù)用”策略铺遂。
# 如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序茎刚，
# 而是簡單復(fù)用此處每個元素襟锐，并且確保它在特定索引下顯示已被渲染過的每個元素。
#  so. 列表渲染膛锭，被渲染組件要有唯一的key值粮坞，不應(yīng)該使用index作為key值，否則會產(chǎn)生bug
<div v-for="item in items" :key="item.id">
  <!-- 內(nèi)容 -->
</div>

:key="index" 復(fù)現(xiàn)bug

4初狰、修飾符
.prevent 莫杈、.stop 、.laze

5奢入、 組件通信 --- 數(shù)據(jù)的流動

• 組件內(nèi)部通訊(data筝闹、computed)

  
  
  data/computed

• 父組件 => 子組件 （props）
  當(dāng)子組件想訪問父組件的值的時候，我們可以通過子組件的props屬性，將父組件的值傳遞給子組件

單向數(shù)據(jù)流
Vue采用的是單向數(shù)據(jù)流方式关顷，數(shù)據(jù)只能從父組件流向子組件糊秆，
子組件不能修改父組件傳入的數(shù)據(jù)，否則Vue會給與警告议双。

props

• 子組件 => 父組件
  官網(wǎng)推薦的方法是在子組件中通過v-on綁定自定義事件來實現(xiàn)
  每個 Vue 實例都實現(xiàn)了事件接口痘番，即：
  使用 emit(eventName) 觸發(fā)事件
  這個的運行跟我們常用的dom原生的事件機制是一樣的。父組件注冊好監(jiān)聽事件平痰，當(dāng)子組件需要對父組件進(jìn)行操作的時候夫偶，調(diào)用觸發(fā)函數(shù)，觸發(fā)事件觉增。
  代碼案例： Vue子組件傳值給父組件

• 非父子組件的相互通信

  
  
  event bus

狀態(tài)管理模式 vuex

slot分發(fā)內(nèi)容

為了讓組件可以組合兵拢，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個過程被稱為內(nèi)容分發(fā) (即 Angular 用戶熟知的“transclusion”)逾礁。Vue.js 實現(xiàn)了一個內(nèi)容分發(fā) API说铃，參照了當(dāng)前 Web Components 規(guī)范草案，使用特殊的 <slot> 元素作為原始內(nèi)容的插槽嘹履。

    使用slot的好處就是可以定制個性化組件結(jié)構(gòu)

• 單個插槽

單個插槽

• 具名插槽

具名插槽

• 作用域插槽

子組件將數(shù)據(jù)像props一樣腻扇，傳遞到父組件中，使得父組件根據(jù)數(shù)據(jù)映射視圖砾嫉，并插入到子組件slot的位置幼苛。。

這個功能太變態(tài)焕刮。舶沿。。 實在不明白這樣搞有什么用配并。括荡。。

vue知識點擴展：

• 異步組件
• mixins
• 過濾器
• 深入vue響應(yīng)式原理
• SSR
• 單元測試

vue技術(shù)棧擴展：