請點選此處輸入圖檔描述
React.js和Vue.js是這個星球上最流行的JavaScript庫。它們都很強大，相對來說很容易擷取和使用。
React和Vue的共性：
- 使用虛拟DOM。
- 提供響應式視圖元件。
- 專注于開發過程中的一個方面。目前集中在視圖層。
有這麼多相似之處，你可以假設它們都是同一事物的不同版本。
這兩個庫之間有一個主要的差別：它們如何讓開發人員建立視圖元件，反過來又可以應用程式。
React采用JSX（這個詞是react團隊創造的）渲染内容到DOM。那麼什麼是JSX？基本上，JSX是一個JavaScript渲染功能，幫助你将你的HTML放到你的JavaScript代碼中合适的地方。
Vue采用不同的方法，使用HTML模闆。使用Vue模闆就像是用JSX就是他們都是建立使用JavaScript。主要的差別是，JSX函數在實際的HTML檔案中從來不被使用，而Vue模闆不是這樣。
特别說明下，Vue.js的相關課程可以點選這裡：
www.hubwiz.comReact JSX
我們将深入探讨JSX如何工作。假設你有一個要在DOM上顯示的名稱清單。你們公司最近的一份新員工名單。
如果你使用的是普通的HTML，你首先需要建立一個index.html檔案。然後，你将添加以下代碼行。
<ul>
<li> John </li>
<li> Sarah </li>
<li> Kevin </li>
<li> Alice </li>
<ul>
這裡沒什麼好說的，隻是普通的HTML代碼。
那麼你使用JSX怎麼做同樣的事情？第一步是建立一個index.html檔案。但是，不像以前那樣添加完整的HTML，隻需要添加一個簡單的div元素。這個div将是容器元素，在那裡您的所有React代碼将被呈現。
div将需要一個唯一的ID，這樣React就知道如何可以找到它。facebook傾向于支援根關鍵字，是以讓我們堅持這一點。
<div id=root></div>
現在，走到最重要的一步。建立包含所有react代碼的JavaScript檔案。這是一個叫app.js的檔案。
你現在把所有的事情都排除在外，進入主事件。用JSX顯示所有新員工到 DOM中。
首先需要建立一個具有新雇員名稱的數組。
const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
從那裡，您需要建立一個響應元素，它将動态地呈現整個名稱清單。這你沒有必要再手動顯示每一個。
const displayNewHires = (
<ul>
{names.map(name => <li>{name}</li> )}
</ul>
);
這裡要注意的關鍵是，您不必建立單獨的<li>元素。你隻需要描述你想讓他們看一次，React會處理剩下的。這是一件非常給力的事。雖然你隻有幾個名字，但想象一下有成百上千的名單！你可以看到這當然是一個更好的方法。特别是如果<li>元素，比這裡用到的元素更複雜。
代碼的最後一步是需要将内容渲染到螢幕，主要是通過ReactDom的render渲染函數。
ReactDOM.render(
displayNewHires,
document.getElementById(‘root’)
);
在這裡，你在用div裡的内容作出響應，通過displayNewHires渲染root元素。
那麼最終的React代碼就應該是這個樣子：
const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
const displayNewHires = (
<ul>
{names.map(name => <li>{name}</li> )}
</ul>
);
ReactDOM.render(
displayNewHires,
document.getElementById(‘root’)
);
這裡要記住的一個關鍵是，這是所有的React代碼。這意味着它都将編譯成普通的JavaScript。下面是它最終看起來的樣子：
‘use strict’;
var names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
var displayNewHires = React.createElement(
‘ul’,
null,
names.map(function (name) {
return React.createElement(
‘li’,
null,
name
);
})
);
ReactDOM.render(displayNewHires, document.getElementById(‘root’));
這就是它的全部。現在有一個簡單的React應用程式，它将顯示名稱清單。沒有什麼可以寫的，但它應該能讓你了解React的能力是什麼。
特别說明下，react.js的相關課程可以點選這裡：
Vue.js Templates（模闆）
按照最後一個示例，您将再次建立一個簡單的應用程式，它将在浏覽器上顯示名稱清單。
你需要做的第一件事就是建立一個空的index.html檔案。在該檔案中，您将建立一個帶有根ID的空div。記住，根隻是個人偏好。你可以調用你的ID無論什麼情況下。您隻需確定稍後将HTML與JavaScript代碼同步時比對起來即可。
這個div會像它在React中那樣起作用。它會告訴JavaScript庫，在這個示例中，開始改變的時候在哪裡觀察DOM。
一旦這樣做了，你将建立一個JavaScript檔案，将存放Vue代碼。稱它為app.js，以便保持一緻。
現在你已經準備好你的檔案，讓我們看看Vue如何顯示元素到浏覽器。
Vue使用模闆的方法用它來操作DOM。這意味着你的HTML檔案不僅會有一個空的div，比如在React中。實際上，您将在HTML檔案中編寫一部分代碼。
為了給你一個更好的提醒，回想一下使用普通HTML建立名稱清單需要什麼。一個<ul>包含一些的<li>元素。在Vue，你要做幾乎相同的事情，隻有少數的變化增加。
建立一個<ul>。
<ul>
</ul>
現在添加一個空的<li>。
<ul>
<li>
</li>
</ul>
沒什麼新鮮的變化，通過增加一個指令，一個自定義的Vue的屬性你的<li>元素。
<ul>
<li v-for=’name in listOfNames’>
</li>
</ul>
指令是Vue直接進入HTML添加JavaScript功能的方式。它們都以V開頭，後面跟着描述性的名字，讓你知道他們在做什麼。在這個執行個體中，它是for循環。每一個名字在你的名字清單listOfNames中，你可以從你的名單清單上複制這個<li>元素和更換一個新的<li>元素來确定一個的名字。
現在，代碼隻需要最後一次編寫。目前，它将為清單中的顯示每個名稱，但實際上并沒有告訴它将把實際名稱顯示在浏覽器上。為了解決這個問題，你将在你的<li>中插入一些類似mustache的文法。你可能在其他JavaScript庫中看到的類似東西。
<ul>
<li v-for=’name in listOfNames’>
{{name}}
</li>
</ul>
現在<li> 元素是寫完了。它現在将顯示名字為listOfNames清單的每個項。記住name可以是任何其他的名稱。你可以把它叫做item，它也會達到同樣的目的。所有關鍵字都用作占位符，用于在清單中疊代。
你需要做的最後一件事就是建立資料集和在實際應用程式中初始化Vue。
這樣做，你将需要建立一個新的Vue執行個體。通過将它配置設定給名為app的變量來執行個體化它。
let app = new Vue({
});
現在，對象将包含一些參數。第一個是最重要的，el (element) 參數告訴Vue在DOM開始添加什麼内容。就像你對你的React中的例子那樣。
let app = new Vue({
el:’#root’,
});
最後一步是添加資料到Vue的應用。在Vue，所有的資料都将做為Vue執行個體的參數傳送到應用程式。另外，每個Vue執行個體隻能有一個每種類型參數。雖然有相當多的，但您隻需要集中在兩個例子，el和data。
let app = new Vue({
el:’#root’,
data: {
listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
}
});
資料對象将接受一個數組listOfNames。現在，每當您想在應用程式中使用該資料集時，隻需要使用指令調用它。很簡單，對吧？
這是最終的代碼：
HTML
<div id=”root”>
<ul>
<li v-for=’name in listOfNames’>
{{name}}
</li>
</ul>
</div>
JavaScript
new Vue({
el:”#root”,
data: {
listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
}
});
結論
現在你知道如何使用React和Vue建立兩個簡單的應用程式。他們都提供了強大的功能，雖然Vue看起來往往是更容易使用。還有需要記住，Vue也支援JSX的使用，雖然它不是首選的實作方法。
無論哪種方式，Vue和React都是兩個功能強大的庫，你使用任何一個都不會有問題。
如果你覺得這篇文章很有幫助，給我一些掌聲。
你可以在Twitter上跟蹤我！
彙智網（
，有很多很棒vue.js的課程包括vue.js\vuex\vue-router\vue工程化等）的小智原創翻譯。
分享最新的Vue.js 2 全家桶系列教程：
1.vue.js 入門與提高:
http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba992.vuex 2 入門與提高:
http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a3.vue-router 入門與提高:
http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d504.vue.js 工程化實踐:
http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)