一旦你掌握了JavaScript的基本知识,选择前端JavaScript框架可能是困难的,令人困惑的过程。你可能听说过的金沙棋牌链接——现在这个新事物Vue吗?吗?

你没有时间学习这三个。所以,你怎么选择?吗?

无论你做什么,不深思。

你可以与任何这些框架的成功,和学习一个框架更容易学习。选择一个框架是很重要的,但它是更重要的是关注学习这些共享的概念。这点有助于你无论你遭遇发生在您的开发。

当你学习所有你需要知道的关于一个给定的框架,你不会仅仅了解那个特定的框架,您还将了解这些概念这三个分享:

当决定使用,考虑你的情况或需求。

如果你想土地作为开发人员的工作,雇主在你的区域寻找什么?你想创业或工作更成熟的企业?做一个调查的地方吗职位空缺或者跟招聘人员。

哪个框架最活跃的当地社区吗?金沙棋牌麻将走出去,参加一个当地meetup关注反应,金沙棋牌链接角或Vue和满足其他热衷于这些框架的开发人员。

如果您正在为团队的下一个项目选择框架,你的团队的集体技能是什么?你有很多通用JavaScript知识吗?将您的团队受益于选择一个框架和一个优雅的学习曲线?什么功能是最重要的您正在构建的应用程序吗?吗?

轻松的学习

在其核心,金沙棋牌链接反应和Vue专注于建筑用户界面而角是专注于构建应用程序。由于这个原因,角较大,更复杂的和有一个陡峭的学习曲线。虽然他们最初较小和较复杂,你延长反应和Vue越多,它们的大小和复杂性。金沙棋牌链接

工具支持

这三个框架提供综合领先指标,或命令行接口。这些可以很容易地创建新项目,支持当地发展和准备部署你的应用程序。所有三个也有伟大的支持代码编辑器如Visual Studio代码和原子。为了获得最好的经验和最大化你的结果,你需要安装适当的编辑器扩展。

性能

而绩效基准(即。如何快速完成特定的任务,如呈现的项目列表)变化对一些用例,这些框架提供了类似的性能,所以这不是一个重要的区分因素对于大多数开发人员或团队。

裁决

金沙棋牌链接

  • 优点
    • 容易,轻量级组件创建
    • 优雅的API,鼓励组成
    • 大支持社区金沙棋牌麻将
    • 受欢迎的与创业
    • 许多开源扩展

金沙棋牌链接提供了简单的反应,轻量级组件创建——功能无状态的组件是一样简单的事情。此外,金沙棋牌链接反应的优雅API鼓励你接受使用组件组成。

金沙棋牌链接反应是非常受欢迎的,可以通过其庞大的支持社区。金沙棋牌麻将金沙棋牌链接反应的人气有助于驱动采用创业。各种开源的可用性,金沙棋牌麻将社区开发的扩展为反应提供了很多选项用于构建完整的解决方案。金沙棋牌链接

  • 欺骗
    • 适应JSX
    • 完整的解决方案需要第三方库
    • 可用的选项可以压倒或混淆

组件模板使用JSX,不是本机HTML,所以你应该期望一个适应期。因为它专注于构建ui,你可能需要延长反应与第三方库。金沙棋牌链接例如,如果你需要在你的应用程序,支持客户端路由你可能会使用流行的第三方库金沙棋牌链接反应的路由器。幸运的是,有很多伟大的选择满足几乎任何要求。但是,有更多的选择可能是压倒性的或令人困惑的-特别是对于初学者。

  • 优点
    • 全包框架
    • 指导如何构建完整的解决方案
    • 受企业的欢迎
    • CLI能力
    • 打印稿
    • 支持本地HTML和CSS

角是一个广泛的框架,提供了更多的“开箱即用”的比或Vue金沙棋牌链接反应。作为一个结果,它提供了更多的指导如何构建完整的解决方案。它专注于应用程序开发的特性,证明了这一点像路由和表单验证,使其受企业的欢迎。

角最能干的CLI的三个框架。它是使用在您的应用程序创建新组件的发展,安装包和迁移和运行安装脚本。打印稿-静态类型和惊人的编辑器的改进提供熟练的开发人员没有很多JavaScript友好过渡到客户端开发经验。虽然其绑定语法可以适应,能够利用本地HTML和CSS组件模板和风格尤佳。

  • 欺骗
    • 大的API
    • 陡峭的学习曲线
    • 代码可以详细和复杂的感觉

角的大型API以及整体的方法来开发应用程序导致最陡峭的学习曲线的三个框架。角码,使用静态类型,修饰符和基于配置的方法,有时会觉得有详细和复杂的反应相比,Vue。金沙棋牌链接

Vue

  • 优点
    • 简单斜坡弯道为开发人员
    • 与你成长
    • 更包容的反应金沙棋牌链接
    • 支持本地HTML和CSS
    • 好了写文档

Vue的缩小经验为开发人员提供了一个简单的斜坡弯道更新客户端开发,同时还能够足够的增长随着你的技能的发展。虽然它不是包容角,Vue提供更多”开箱即用”的比的反应。金沙棋牌链接这对于初学者来说是一个受欢迎的选择。

像角,Vue还允许您利用您的本机HTML和CSS技巧需要学习新的模板语言,而是当你与反应。金沙棋牌链接而且它以写得很好而闻名文档

  • 欺骗
    • 新反应和角金沙棋牌链接
    • 较小的社区(现在金沙棋牌麻将)

介绍了2014年,Vue比React(2013)和Ang.(20金沙棋牌链接10.1)都新,V.2 2014)。所以,虽然它的社区正在增长金沙棋牌麻将,它不是目前建立或和其他人一样大。

基本组件开发

前端框架是什么?吗?

前端框架启用客户端用户界面的发展或应用程序组件的集合。组件结合数据,逻辑和表示代码到一个单独的容器中。你可以考虑你的应用作为一个离散的集合,独立的部分。

让我们仔细看看基本组件开发使用分别在三个框架。

基本组件开发的反应金沙棋牌链接

金沙棋牌链接反应提供了两种类型的组件,无状态的功能组件和有状态类组件。

无状态函数组件只是一个接受单个“props”参数-a的普通JavaScript函数属性对象,并返回一个元素的反应。金沙棋牌链接

功能产品(道具){返回(

{props.name}

);}

有状态类组件是一个ES2015类扩展组件的基类的反应。金沙棋牌链接它包含一个的渲染()方法,它返回一个元素的反应。金沙棋牌链接如无状态的功能组件,有状态类组件属性通过“道具”属性,顾名思义,他们还通过“状态”属性状态。

类产品扩展组件状态= {{isSelected:假}渲染(){返回(
             

{this.props.name}

被选中?{this.state.isSelected ?“是的”:“不”}

);}}

改变状态,你叫“设置状态()的方法,通过在新状态。金沙棋牌链接反应状态改变时将重新呈现组件。

toggleSelection(){ this.setState((prevState)= > {返回{ isSelected:!isSelected};});}

JSX

金沙棋牌链接组件是由反应反应元素使用JSX编写。JSX看起来像HTML,但这不是标记,这是一个特殊的JavaScript语法,写作时给你的全部威力JS的呈现逻辑组件。

JSX元素可以表示DOM元素,如

,或者它们可以表示用户定义的React组件:金沙棋牌链接

宠物的岩石

可以呈现为动态值元素的内在内容使用JavaScript表达式:

{props.name}

元素属性可以设置使用字符串literals-or JavaScript表达式:


               

注意,属性名称镜子自己的JavaScript属性名,不是他们的HTML属性名称。例如,它的“名字”而不是“类”设置一个CSS类反应元素。金沙棋牌链接

处理一个事件,你只是一个事件处理程序函数或类方法连接到元素事件要处理:

addToCart = () = > {alert('项目添加到购物车!”);}render() {.(返回));}

角的基本组件开发

虽然可以使用香草JavaScript开发角度应用,大多数开发人员使用打印稿。打字稿提供了静态类型,有助于抓住编码错误早在开发过程中。它还通过开发经验与真实的陈述完成,编辑器中的API文档和基于符号的导航和重命名。

组件在角ES2015类装饰着一个“组件”修饰符:

@Component({selector: '.',templateUrl: './....html',styleUrls: [’。/ product.component.css ']})出口类ProductComponent {}

装饰符是TypeScript提供的JavaScript的扩展。他们提供一个声明式开发方法,允许您添加元数据类,方法,属性和参数。在上面的例子中,我们使用decorator宣布角这类是一个组件,设置“选择器”,“templateUrl”,和“styleUrls”配置属性。

组件类可以包含任意数量的属性或方法:

@Component({selector: '.',templateUrl: './....html',styleUrls:[’。/ product.component.css ']})出口类ProductComponent {名称:字符串=“宠物石”;isSelected:布尔= false;}

与反应不同,金沙棋牌链接你改变了国家通过直接设置属性值:

toggleSelection(){this.isSelected=!this.isSelected;}

角检测属性值变化和重新呈现组件。

组件模板使用本地HTML定义,所以任何有效的HTML是一个有效的模板。

宠物的岩石

动态值可以呈现一个模板使用插值:

{{名称}}

元素属性和事件可以绑定到组件类中定义的属性和方法。创建一个属性绑定使用括号:

创建一个事件绑定使用括号:

在Vue基本组件开发

Vue提供了独特的缩放体验,一个复杂的显著低于角和反应;金沙棋牌链接你包括Vue通过使用一个

每个Vue应用程序有一个顶级Vue实例创建的实例化Vue类的一个实例。应用程序通过在一个配置选项对象字面量:

const应用= new Vue ({el:“#应用”,数据:{名称:“宠物石”,isSelected:假} });;

“el”元素的属性选择器,应用程序将被安装和数据的属性是一个对象字面定义应用程序的状态。

也可以添加方法。和角一样,你改变你的应用程序通过直接将数据属性设置:

const应用= new Vue ({el:“#应用”,数据:{名称:“宠物石”,isSelected:假},方法:{toggleSelection(){this.isSelected=!this.isSelected;}}});;

数据对象的属性”金沙棋牌链接反应”——因为他们的价值观改变,Vue DOM更新。

应用程序安装的元素定义了应用程序的模板。像角,Vue模板是使用本机HTML定义任何有效的HTML是一个有效的模板:

              

宠物的岩石

动态值可以呈现一个模板使用插值:

{{名称}}

Vue提供指示,可以用于绑定元素属性和事件属性和方法中定义Vue实例。创建一个属性绑定使用的v-bind指令:

创建一个事件绑定使用“v”指令:

Vue的比例增大的经验利用前端构建过程为了支持一个功能叫做“单一文件组件。”这给了开发商的另一种方法来处理更大,更复杂的应用程序,同时利用他们已经掌握的技能。

单一文件组件组合的选择对象,模板,和作用域的CSS为一个“.vue”文件:

              




结论

在决定哪些前端框架是“最好的”有点像试图决定哪些冰淇淋味道”最好的”——这是一个主观的决定,为每个人,情况会有所不同,和你最喜欢的可能会随着时间而改变。毫无疑问——前端web开发,像所有编程专业,将继续变化和随时间而变化。

兴趣引导JavaScript课程,让你从初学者到找工作的开发者?看看我们全额Techdegree堆栈JavaScript。
免费7天Techdegree试验