vue框架已經(jīng)火了好長(zhǎng)一段時(shí)間了壳坪，早在2015年的雙11中午磁，淘寶的部分導(dǎo)購(gòu)業(yè)務(wù)——如：雙十一晚會(huì)搖一搖清單笋妥、我的雙十一標(biāo)簽進(jìn)入的人群會(huì)場(chǎng)尋找與自身匹配的商品懊昨。今年以來(lái)，vue的文檔更新很快完善春宣、社區(qū)也日漸狀大酵颁，再加上于某廠（你懂的）大力的推廣，vue的前景十分光明月帝。本文目的：通過(guò)這篇文章了解一些vue的基本概念躏惋，了解如何在實(shí)際編碼中使用vue，文末有demo的地址嚷辅，大家可以clone簿姨、運(yùn)行后，實(shí)際感受一下。

文章開(kāi)始扁位，先比較一下vue和react准潭。

先說(shuō)它們的相似之處：

- 使用 Virtual DOM，提供了響應(yīng)式編程和組件化的視圖組件域仇；
- 不同于angualr的大而全刑然，vue、react將注意力集中保持在核心庫(kù)暇务，如果如果你需要用到其他的話泼掠，可以在社區(qū)中尋找或者自己開(kāi)發(fā)一個(gè)，如vue-router（路由）和vuex(負(fù)責(zé)處理全局狀態(tài)管理的庫(kù))垦细；

然后是不同之處：

- 性能：據(jù)vue.js官網(wǎng)聲稱vue的性能在某些場(chǎng)景下是優(yōu)于react的——渲染性能 10,000 個(gè)列表項(xiàng) 100 次择镇，vue較之react平均快100ms；Vue 每秒最高處理 10 幀括改，而 React 每秒最高處理不到 1 幀腻豌，因此在開(kāi)發(fā)類似動(dòng)畫(huà)這樣的應(yīng)用時(shí)，vue.js更占優(yōu)勢(shì)叹谁；
- html模板綁定：react使用JSX饲梭，vue也支持JSX乘盖，但建議使用其內(nèi)置的模板引擎焰檩，也可以使用Jade。JSX的不足在于：當(dāng)遇到需要使用if判斷订框、循環(huán)綁定時(shí)析苫，jsx的語(yǔ)法讓代碼看起來(lái)很混亂、也不直觀穿扳；當(dāng)然衩侥，jsx也有自己的優(yōu)勢(shì)——支持linting等檢查；
- css： vue通過(guò)在dom上增加scoped矛物，就可以實(shí)現(xiàn)CSS Modules的功能茫死；
- React相比Vue也有自己的優(yōu)勢(shì)，react的生態(tài)系統(tǒng)更豐富履羞、完善峦萎；

看起來(lái)vue很"niubility"的樣子，那vue小白用戶如何快速的動(dòng)手嘗試呢忆首？下面以首頁(yè)（index.vue）為例爱榔，了解一下具體的用法，里面包含了組件的寫(xiě)法及在頁(yè)面中如何組合糙及、模板數(shù)據(jù)及事件綁定详幽。

• 目錄結(jié)構(gòu)

• 效果圖

  首頁(yè)

• index.vue(views文件夾下），一個(gè)views文件夾下的頁(yè)面由多個(gè)components中的組件拼合而成。頁(yè)面由3個(gè)組件拼成：頂部唇聘、中間版姑、底部。注：每一個(gè)組件都是單獨(dú)一個(gè)vue（里面定義自己的樣式和交互事件）

  <template>
      <nv-head></nv-head>
      <index-center></index-center>
      <nv-bottom></nv-bottom>
  </template>
  <script>
  export default {
    components:{
        "nvHead":require('../components/head.vue'),
        "nvBottom":require('../components/footer.vue'),
        "indexCenter":require('../components/index-center.vue')
    }
  }
  </script>
  

• footer組件（components文件夾下）

  <style>
      .footer{position: absolute;bottom: 20px;width: 100%;color: #5f6060;line-height: 25px;font-size: 12px;}
  </style>
  <template>
  <section class="footer text-center hidden-sm hidden-xs">
    <p v-on:click="hello">{{msg}}</p>
  </section>
  </template>
  <script>
  export default {
      data () {
          return {
              msg: '?2016 coderYin 蘇ICP備15056083號(hào)-1 All rights reserved.'
          }
      },
      methods:{
          hello: function(){
              alert("hello world");
              this.msg="我被點(diǎn)擊啦";
          }
      }
  }
  </script>
  

• 最后附上迟郎，最終生成的主html的結(jié)構(gòu)：

  頁(yè)面dom結(jié)構(gòu)

如果你想新建多個(gè)頁(yè)面漠酿，你也可以在項(xiàng)目中進(jìn)行相應(yīng)的配置。

• main.js

  var Vue = require('vue')
  
  //路由
  var VueRouter = require('vue-router')
  Vue.use(VueRouter)
  
  //vue-resource：通過(guò) XMLHttpRequest 或 JSONP 發(fā)起請(qǐng)求并處理響應(yīng)
  var VueResource = require('vue-resource')
  Vue.use(VueResource)
  
  //多個(gè)頁(yè)面
  var index = require('./views/index.vue')
  var blogManage = require('./views/blog-manage.vue')
  var blog = require('./views/blog.vue')
  var works = require('./views/works.vue')
  
  // 你也可以自定義組件
  var helloWorld = Vue.extend({
      template: '<p>Hello world</p>'
  })
  
  // 路由器需要一個(gè)根組件谎亩。
  // 出于演示的目的炒嘲，這里使用一個(gè)空的組件，直接使用 HTML 作為應(yīng)用的模板
  var Apptest = Vue.extend({})
  
  // 創(chuàng)建一個(gè)路由器實(shí)例
  // 創(chuàng)建實(shí)例時(shí)可以傳入配置參數(shù)進(jìn)行定制匈庭，為保持簡(jiǎn)單夫凸，這里使用默認(rèn)配置
  var router = new VueRouter()
  
  // 定義路由規(guī)則
  //在使用 vue-router 時(shí)，我們需要做的就是把路由映射到各個(gè)組件
  //vue-router 會(huì)把各個(gè)組件渲染到正確的地方阱持。
  router.map({
      '/index': {
          component: index
      },
      '/blogmanage': {
           component: blogManage
       },
      '/blog': {
          component: blog
      },
      '/works': {
        component: works
      },
      '/helloworld': {
       component: helloWorld
      }
  })
  
  // 現(xiàn)在我們可以啟動(dòng)應(yīng)用了夭拌！
  // 路由器會(huì)創(chuàng)建一個(gè) App 實(shí)例，并且掛載到選擇符 #app 匹配的元素上衷咽。
  router.start(Apptest, '#test')
  

• 在下面提到的項(xiàng)目里鸽扁，也有我們常規(guī)的列表（views/blog.vue）及todolist（views/blogManage.vue）的demo，下面是截圖：

  博客列表

todolist.png

如果你想本地實(shí)踐一下镶骗，可以通過(guò)下面的兩種方式找到整個(gè)項(xiàng)目（readme文檔里有詳細(xì)的使用說(shuō)明桶现，運(yùn)行起來(lái)只需要兩步）

• 直接點(diǎn)擊這里；

• 在github上搜索learn-vue,第一個(gè)項(xiàng)目就是鼎姊；

learn-vue

阿里也推出了Weex骡和，其實(shí)叫Vue-Native也可以(這個(gè)名字只是為了讓你大致了解Weex是用來(lái)干嘛的，不要真的在網(wǎng)上搜~~)相寇；另外慰于，vue今年推出了2.0版本，相較1.0唤衫，主要做了下面的一些改變：

• 2.0 用一個(gè) fork 自 snabbdom 的輕量 Virtual DOM 實(shí)現(xiàn)對(duì)渲染層進(jìn)行了重寫(xiě)婆赠；
• 改變了一些代碼寫(xiě)法，如循環(huán)v-for——當(dāng)含有 index 時(shí)佳励，以前傳遞的參數(shù)順序是(index, value)休里，現(xiàn)在變成了(value, index)。
• 官方支持的庫(kù)和工具——vue-router植兰、vuex份帐、vue-loader等都已經(jīng)升級(jí)并支持 2.0 了；

雖然看起來(lái)做了一些大的變化楣导，但是幾乎90%的 API 和核心概念都沒(méi)有變废境，官方推出了從1.0到2.0的遷移方案，同時(shí)出了一個(gè)migration helper的工具，這個(gè)工具發(fā)現(xiàn)了一個(gè)棄用的用法之后噩凹，就會(huì)給出通知和建議巴元，并附上關(guān)于詳細(xì)信息的鏈接。一般情況下驮宴，中小型的系統(tǒng)從vue1.0遷移到2.0版本大概只需要1天的時(shí)間逮刨。