前端的对决：React的JSX与Vue的templates
请点击此处输入图片描述 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.com React 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倾向于支持根关键字，所以让我们坚持这一点。 <divid=root></div> 现在，走到最重要的一步。创建包含所有react代码的JavaScript文件。这是一个叫app.js的文件。 你现在把所有的事情都排除在外，进入主事件。用JSX显示所有新员工到 DOM中。 首先需要创建一个具有新雇员名称的数组。 constnames=[‘John’,‘Sarah’,‘Kevin’,‘Alice’]; 从那里，您需要创建一个响应元素，它将动态地呈现整个名称列表。这你没有必要再手动显示每一个。 constdisplayNewHires=( <ul> {names.map(name=><li>{name}</li>)} </ul> ); 这里要注意的关键是，您不必创建单独的<li>元素。你只需要描述你想让他们看一次，React会处理剩下的。这是一件非常给力的事。虽然你只有几个名字，但想象一下有成百上千的名单！你可以看到这当然是一个更好的方法。特别是如果<li>元素，比这里用到的元素更复杂。 代码的最后一步是需要将内容渲染到屏幕，主要是通过ReactDom的render渲染函数。 ReactDOM.render( displayNewHires, document.getElementById(‘root’) ); 在这里，你在用div里的内容作出响应，通过displayNewHires渲染root元素。 那么最终的React代码就应该是这个样子： constnames=[‘John’,‘Sarah’,‘Kevin’,‘Alice’]; constdisplayNewHires=( <ul> {names.map(name=><li>{name}</li>)} </ul> ); ReactDOM.render( displayNewHires, document.getElementById(‘root’) ); 这里要记住的一个关键是，这是所有的React代码。这意味着它都将编译成普通的JavaScript。下面是它最终看起来的样子： ‘usestrict’; varnames=[‘John’,‘Sarah’,‘Kevin’,‘Alice’]; vardisplayNewHires=React.createElement( ‘ul’, null, names.map(function(name){ returnReact.createElement( ‘li’, null, name ); }) ); ReactDOM.render(displayNewHires,document.getElementById(‘root’)); 这就是它的全部。现在有一个简单的React应用程序，它将显示名称列表。没有什么可以写的，但它应该能让你了解React的能力是什么。 特别说明下，react.js的相关课程可以点击这里：www.hubwiz.com 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> <liv-for=’nameinlistOfNames’> </li> </ul> 指令是Vue直接进入HTML添加JavaScript功能的方式。它们都以V开头，后面跟着描述性的名字，让你知道他们在做什么。在这个实例中，它是for循环。每一个名字在你的名字列表listOfNames中，你可以从你的名单列表上复制这个<li>元素和更换一个新的<li>元素来确定一个的名字。 现在，代码只需要最后一次编写。当前，它将为列表中的显示每个名称，但实际上并没有告诉它将把实际名称显示在浏览器上。为了解决这个问题，你将在你的<li>中插入一些类似mustache的语法。你可能在其他JavaScript库中看到的类似东西。 <ul> <liv-for=’nameinlistOfNames’> {{name}} </li> </ul> 现在<li> 元素是写完了。它现在将显示名字为listOfNames列表的每个项。记住name可以是任何其他的名称。你可以把它叫做item，它也会达到同样的目的。所有关键字都用作占位符，用于在列表中迭代。 你需要做的最后一件事就是创建数据集和在实际应用程序中初始化Vue。 这样做，你将需要创建一个新的Vue实例。通过将它分配给名为app的变量来实例化它。 letapp=newVue({ }); 现在，对象将包含一些参数。第一个是最重要的，el(element) 参数告诉Vue在DOM开始添加什么内容。就像你对你的React中的例子那样。 letapp=newVue({ el:’#root’, }); 最后一步是添加数据到Vue的应用。在Vue，所有的数据都将做为Vue实例的参数传送到应用程序。另外，每个Vue实例只能有一个每种类型参数。虽然有相当多的，但您只需要集中在两个例子，el和data。 letapp=newVue({ el:’#root’, data:{ listOfNames:[‘Kevin’,‘John’,‘Sarah’,‘Alice’] } }); 数据对象将接受一个数组listOfNames。现在，每当您想在应用程序中使用该数据集时，只需要使用指令调用它。很简单，对吧？ 这是最终的代码： HTML <divid=”root”> <ul> <liv-for=’nameinlistOfNames’> {{name}} </li> </ul> </div> JavaScript newVue({ el:”#root”, data:{ listOfNames:[‘Kevin’,‘John’,‘Sarah’,‘Alice’] } }); 结论 现在你知道如何使用React和Vue创建两个简单的应用程序。他们都提供了强大的功能，虽然Vue看起来往往是更容易使用。还有需要记住，Vue也支持JSX的使用，虽然它不是首选的实现方法。 无论哪种方式，Vue和React都是两个功能强大的库，你使用任何一个都不会有问题。 如果你觉得这篇文章很有帮助，给我一些掌声。 你可以在Twitter上跟踪我！ 汇智网（www.hubwiz.com，有很多很棒vue.js的课程包括vue.js\vuex\vue-router\vue工程化等）的小智原创翻译。 分享最新的Vue.js 2 全家桶系列教程： 1.vue.js 入门与提高: http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99 2.vuex 2 入门与提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a 3.vue-router 入门与提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50 4.vue.js 工程化实践: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9
