反应还是Vue什么的？

首先，简单介绍一下我。

我是一个热情的软件开发人员，喜欢学习新东西，我就一直在努力工作，让自己变得更聪明。我总是试图改进我的代码，并质疑自己是否可以做得更好或更直观。最重要的是理解代码以及如何实现某些东西，因为只有这样，您才能开始思考如何改进它。

如果你想知道为什么没有角，其原因是缺乏对一个好的老方式开始一个简单的项目的支持。我们无法在HTML页面上放置一个裸露的脚本标记并立即开始编写代码。

好了，是时候开始写这篇文章了。

反应JS

ReactJS是一个声明式的、基于组件的JavaScript库，用于构建用户界面。这意味着我们有封装逻辑的组件，这些组件稍后将用于创建复杂的交互式UI。

这真的很方便，但我认为这里的主要问题是，在ReactJS中，一切都是JavaScript。在我看来，这种权衡是不值得的。我的意思是，好的三层HTML，CSS和JavaScript怎么了？我们甚至有一种新的方式来表达我们的UI通过JSX，这使我们进一步远离标准的Web开发。有时这可能会很方便，但模板作为一个简单的替代方案似乎更有吸引力。

现在，让我们用你好世界例子：

首先，我们需要在页面上放置一个要挂载的元素：

其次，我们需要创建组件：

class Greeting extends React.Component {
  render() {
    return (
      <div>
        {this.props.message}
      </div>
    );
  }
};
ReactDOM.render(
  <Greeting message="Hello World!" />,
  document.getElementById('greeting')
);
对于这个例子，我们需要包括三个脚本标记。一个用于Reaction本身，一个用于Reaction-dom，另一个用于Babel编译ECMAScript代码。

上面的代码将显示你好，世界！浏览器中的消息。如果我们查看页面源代码，我们将看到我们最终得到了两个HTML元素。我们已经挂载的元素，我们在页面上预先呈现的主元素，以及在组件初始化期间动态创建的div元素。

Vue.js

js被定义为构建用户界面的渐进框架。和ReactJs没什么不同，对吧？在Vue.js网站的实际比较页面上，有一行说这两者有许多相似之处。

vue.js正变得相当流行，这并不奇怪，因为它像ReactJS一样，是一个很好的框架。它还支持组件，当这些组件组合在一起时，就构成了一个交互式UI。在我看来，vue.js比ReactJS更直观一些。

让我们看看Vue.js是如何做一个你好世界 .

我们的HTML标记如下所示：

<main id="greeting">
    <hello-world v-text="message"></hello-world>
</main>
我们的剧本是这样的：

Vue.component('hello-world', {
    props: ['message'],
    template: '<div>{{ message }}</div>'
});
new Vue({
    el: '#greeting',
    data: {
        message: 'Hello World!'
    }
});
对于Vue.js示例，我们只需要包含一个脚本标记，即Vue本身。与前面的示例一样，你好世界消息将显示在浏览器中，如果我们再次查看页面源，我们将看到我们最终得到了两个HTML元素。不同之处在于，我们通过使用自定义标记来呈现组件，该标记在呈现过程中被框架识别。自定义标记名映射到组件名称。

新事物，即柏拉图

感谢那些一直和我在一起的人，谢谢你！是时候谈谈我在标题中提到的新东西了。

这一新事物被称为柏拉图JS，这是一个多功能的框架，旨在丰富开发人员在应用程序开发的简单性和速度方面的经验。它是面向对象的，可以很容易地用于创建大型的单页应用程序，也可以集成到需要动态工作流的网页的一部分中。

这里的关键字是简约，重点是优秀的老三重奏、HTML、CSS和JavaScript。它是基于组件的框架，就像这篇文章开头的段落中描述的两个巨人一样。

现在，让我们看看柏拉图的一种做事方式，并创建一个你好世界举个例子。正如我们在前两个示例中所做的那样，我们需要为组件添加一个HTML标记：

接下来，我们需要定义和加载组件：

plz.define('hello-world', {
    ownerType: 'component',
    renderTo: 'main#greeting',
    template: '<div>{message}</div>',
    viewModel: {
        message: 'Hello World!'
    }
}).create().load();
对于plzarJS示例，就像我们使用Vue.js时的例子一样，我们只需要包含一个脚本标记，这是框架本身的脚本标记。

注意，如果我们设置自拍将组件配置为千真万确，调用负载功能不是必需的。该组件将在创建时自动加载。此外，我们还调用了一个静态方法创造因为我们希望在定义组件之后立即创建它。

我们只能定义组件，然后在我们的应用程序中动态地使用定义的类型。

在上面的示例中，我们得到了两个HTML元素，就像我们在前两个例子中所做的那样，但是在这里，我们可以设置配置取代到千真万确这将导致用组件模板替换原始元素。

查看这些和更多的plzarjs特性(混合、类、继承、绑定…等等)文献资料现场。

源代码可以找到这里 .

这是基于简单HelloWorld示例对这三个框架的快速比较。

谢谢你的阅读，祝你好运！

在这里插入图片描述

反应还是Vue什么的？

猜你喜欢