vue框架已經火了好長一段時間了，早在2015年的雙11中，淘寶的部分導購業務——如：雙十一晚會搖一搖清單、我的雙十一標簽進入的人群會場尋找與自身匹配的商品。今年以來，vue的文檔更新很快完善、社區也日漸狀大，再加上于某廠（你懂的）大力的推廣，vue的前景十分光明。本文目的：通過這篇文章了解一些vue的基本概念，了解如何在實際編碼中使用vue，文末有demo的地址，大家可以clone、運行后，實際感受一下。
文章開始，先比較一下vue和react。
先說它們的相似之處：
- 使用 Virtual DOM，提供了響應式編程和組件化的視圖組件；
- 不同于angualr的大而全，vue、react將注意力集中保持在核心庫，如果如果你需要用到其他的話，可以在社區中尋找或者自己開發一個，如vue-router（路由）和vuex(負責處理全局狀態管理的庫)；
然后是不同之處：
- 性能：據vue.js官網聲稱vue的性能在某些場景下是優于react的——渲染性能 10,000 個列表項 100 次，vue較之react平均快100ms；Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀，因此在開發類似動畫這樣的應用時，vue.js更占優勢；
- html模板綁定：react使用JSX，vue也支持JSX，但建議使用其內置的模板引擎，也可以使用Jade。JSX的不足在于：當遇到需要使用if判斷、循環綁定時，jsx的語法讓代碼看起來很混亂、也不直觀；當然，jsx也有自己的優勢——支持linting等檢查；
- css： vue通過在dom上增加scoped，就可以實現CSS Modules的功能；
- React相比Vue也有自己的優勢，react的生態系統更豐富、完善；
看起來vue很"niubility"的樣子，那vue小白用戶如何快速的動手嘗試呢？下面以首頁（index.vue）為例，了解一下具體的用法，里面包含了組件的寫法及在頁面中如何組合、模板數據及事件綁定。
-
目錄結構
-
效果圖
首頁
-
index.vue(views文件夾下），一個views文件夾下的頁面由多個components中的組件拼合而成。頁面由3個組件拼成：頂部、中間、底部。注：每一個組件都是單獨一個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號-1 All rights reserved.' } }, methods:{ hello: function(){ alert("hello world"); this.msg="我被點擊啦"; } } } </script> -
最后附上，最終生成的主html的結構：
頁面dom結構
如果你想新建多個頁面，你也可以在項目中進行相應的配置。
-
main.js
var Vue = require('vue') //路由 var VueRouter = require('vue-router') Vue.use(VueRouter) //vue-resource：通過 XMLHttpRequest 或 JSONP 發起請求并處理響應 var VueResource = require('vue-resource') Vue.use(VueResource) //多個頁面 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>' }) // 路由器需要一個根組件。 // 出于演示的目的，這里使用一個空的組件，直接使用 HTML 作為應用的模板 var Apptest = Vue.extend({}) // 創建一個路由器實例 // 創建實例時可以傳入配置參數進行定制，為保持簡單，這里使用默認配置 var router = new VueRouter() // 定義路由規則 //在使用 vue-router 時，我們需要做的就是把路由映射到各個組件 //vue-router 會把各個組件渲染到正確的地方。 router.map({ '/index': { component: index }, '/blogmanage': { component: blogManage }, '/blog': { component: blog }, '/works': { component: works }, '/helloworld': { component: helloWorld } }) // 現在我們可以啟動應用了！ // 路由器會創建一個 App 實例，并且掛載到選擇符 #app 匹配的元素上。 router.start(Apptest, '#test') -
在下面提到的項目里，也有我們常規的列表（views/blog.vue）及todolist（views/blogManage.vue）的demo，下面是截圖：
博客列表
todolist.png
如果你想本地實踐一下，可以通過下面的兩種方式找到整個項目（readme文檔里有詳細的使用說明，運行起來只需要兩步）
在github上搜索learn-vue,第一個項目就是；
learn-vue
阿里也推出了Weex，其實叫Vue-Native也可以(這個名字只是為了讓你大致了解Weex是用來干嘛的，不要真的在網上搜~~)；另外，vue今年推出了2.0版本，相較1.0，主要做了下面的一些改變：
- 2.0 用一個 fork 自 snabbdom 的輕量 Virtual DOM 實現對渲染層進行了重寫；
- 改變了一些代碼寫法，如循環v-for——當含有 index 時，以前傳遞的參數順序是(index, value)，現在變成了(value, index)。
- 官方支持的庫和工具——vue-router、vuex、vue-loader等都已經升級并支持 2.0 了；
雖然看起來做了一些大的變化，但是幾乎90%的 API 和核心概念都沒有變，官方推出了從1.0到2.0的遷移方案，同時出了一個migration helper的工具，這個工具發現了一個棄用的用法之后，就會給出通知和建議，并附上關于詳細信息的鏈接。一般情況下，中小型的系統從vue1.0遷移到2.0版本大概只需要1天的時間。
