5分钟了解VueJS

我最近一直在玩VueJS。我印象深刻。它简单、强大、超级有趣，而且非常受欢迎。即使像我这样的白痴也能很快做一些有趣的事情。它正好表明，任何人都可以用它做伟大的事情。你前面还有五分钟吗？

2012年在纽约地区。那时，Evan You正在学习Javascript，过着他最好的生活。他左右为难地做着配对项目，以博得大家的欢笑。其中一个在黑客新闻上大受欢迎！埃文不知道，但他刚刚引起了谷歌的注意。

他很快就被谷歌聘用，他的角色是为创新想法创造“实验项目”。他用了很多香草Javascript。他尝试了AngularJS和其他框架，但他立即对其大发雷霆。他找不到他需要的自由。因此，他有了一个想法：提取这些框架中最好的部分，并根据自己的个人需求制作自己的轻量级和可延展性的框架。

2013年7月，VueJS第一次提交。根据记录，VueJS应该被称为Seed.JS，但它是在NPM上播出的！因为它的框架是以视图部分为中心的，所以Evan想要在英语中看起来像“View”的东西。他去谷歌翻译，把“视图”翻译成几种语言。他偶然看到法语翻译的“Vue”，觉得很酷。几分钟后，VueJS出版了。

2014年，第一个版本的VueJS登陆互联网。这个项目不会马上爆炸。但就像拉威尔的创造者一样，越来越多的人在谈论它。如今，VueJS已跻身大联盟。

VueJS是一个创建用户界面的Javascript前端框架。你要说“再来一次？”答案是肯定的。只是有点不同。

首先，理解VueJS被设计为增量集成是很有趣的。这意味着如果您有一个现有的前端应用程序，您不必重做所有事情。您可以在VueJS中制作一个新部件，并将其与其余部件快速集成。

VueJS也是所有前端框架中最容易拿到的。这就是吸引我成为后端开发人员的首要原因。很快，我做了一些有效的前端工作！我很震惊！在阅读文档和测试材料的几个小时内，我就了解了所有的基础知识。我已经在前台发货了。

VueJS还从竞争对手那里吸收了好主意。它允许数据绑定。数据和DOM是耦合的，并对更改做出反应。我们还用VueJS发现了虚拟dom的概念。DOM不是直接更改的，它通过虚拟DOM。

我们还按组件查找组织。此功能允许您将应用程序划分为几个子组件，每个子组件管理自己的生命周期并可重用。假设您想要创建一个映像列表：您可以创建一个管理映像的组件和一个管理映像组件列表的组件。

这一次，我稍微作弊，提前展示了一些代码，以便更好地了解接下来会发生什么。你好，世界！

<；！DOCTYPE html>；<；html&>；<；Head>；<；Script src="；https://cdn.jsdelivr.net/npm/vue"；>；<；/script>；<；/Head>；<；Body>；<；div id="；app"；>；{{Message}}<；/div>；<；script>；const data={Message："；Hello World！"；}；new Vue({el："；#app&34；，data：data})；<；/script>；<；/body>；<；/html>；

VueJS专注于应用程序的视图部分。为此，该框架在一定程度上受到了MVVM体系结构模式的启发。VueJS将把您的DOM(视图部件)与视图实例(Model-View部件)链接起来。这两个部分通过数据绑定系统联系在一起。

最后，视图实例中的数据是模型部件。它将为您的应用程序提供数据。系统化的Hello World代码如下所示。

VueJS应用程序由一个或多个组件组成。当启动全局应用程序的实例时，首先有一个根实例。这是根实例，由具有其自己的根实例的组件树组成。

但是，当您使用new Vue()创建组件时，实例的生命周期会发生什么呢？我想做我惯常的愚蠢模式，但事实证明官方的VueJS文档非常棒。拥有一份好的文档是很少见的。所以我只想给出他们的图式。

我会让你欣赏它，然后弄清楚是怎么回事。唯一不清楚的可能是“创建的”和“挂载的”之间的区别。

装载在VueJS中意味着DOM元素已经呈现在您的页面中，您可以对其进行操作。

我要给你看我为个人需要做的一段代码。一个简单的响应式画廊，只有三个组件。我们从根应用程序开始。

<；Template>；div id="；app&34；>；<；action v-bind:message="；messageAction"；>；<；/action>；<；Grid v-bind:photos="；photos"；>；<；/grid>；<；/div>；<；/Template>；<；script>；从'；./Components/Action.vue'；导入操作。/Components/Action.vue'；从'；./Components/Grid.vue'；导出默认值{Name：'；App&39；，Components：{action，Grid}，Data：Function(){Return{Photos：[{id：0，URL："；https://i.imgur.com/p3IKY9G.jpg"；}]，messageAction："；it'；正在工作！"；}<；/script&>；<；<；Style>；*{BOX-SIZING：BORDER-BOX；}BODY{March：0；font-family：Arial；}<；/style>；

在模板方面，我首先在div中声明我的根应用程序。里面还有另外两个组件(动作和网格)。请注意，我是如何使用v-bind指令传递来自组件中的实例的数据的。

在脚本端，我导入组件以在我们导出的应用程序中使用它们。我们声明数据、图片和消息，这是对更改的反应。

在样式方面，我集成了非常简单的CSS，它对整个项目都是全局的。

<；template>；<；div class="；callToAction&34；>；<；h1>；{{message}}<；/h1>；<；/div>；<；/template>；<；script>；export default{name：'；callToAction&39；，道具：{message：string}}<；/script>；export default：{message：string}}<；/script>；export default{name：'；callToAction'；，道具：{message：string}}<；/script>；填充：0；边距：0；显示：-webkit-box；显示：-moz-box；显示：-ms-flex；显示：-webkit-flex；显示：flex；对齐项目：居中；对齐内容：居中；}h1{颜色：红色；背景：黑色；填充：10px；}<；/style>；

动作组件只是我们放在页面中间的一个文本，它将是用户的行动号召。我使用{{message}}语法来显示来自应用程序的消息。

另请注意，样式部分是“作用域”的。这意味着有问题的CSS仅在此组件中有效。这对于分隔每个组件的样式范围非常有用。

<；template>；div class="；Grid"；>；<；div-bind：key="；grid.id"；v-for="；grid="；column"；>；<；Photo v-for="；>；<；Photo v-for="；v-bind：Photo="；Photo"；v。/PHOTO&><；/div&><；/div>；<；/template>；<；script>；import照片来自'；。/Photo.vue'；导出默认值{名称：'；网格'；，组件：{PHOTO}，道具：['；PHOTES'；]，计算：{GRDS：Function(){Const Grids=[]Const DeepClonePhotos=JSON.parse(JSON.stringify(this.Phots))Const GridsToMake=Math.ceil(Deep ClonePhotos.length/2)-1 for(let index=0；index<；=gridsToMake；index++){const currentGrid=[]for(设i=0；i<；/script>；<；style作用域>；.grid{display：-ms-flex-box；/*IE10*/display：flex；-ms-flex-wire：WRAP；/*IE10*/flex-WRAP：WRAP；PADDING：0；}/*创建彼此相邻的四个相等的列*/.column{-ms-flex：25%；/*IE10*/FLEX：25%；max-width：25%；PADING：0；}/*响应式布局-采用两列布局，而不是四列*/@媒体屏幕和(max-width：800px){.column{-ms-flex：50%；flex：50%；max-width：50%；}}/*响应式布局-使两列堆叠在一起，而不是相邻*/@媒体屏幕和(max-width：600px){.column{-ms-flex：100%；flex：100%；max-。}}<；/style>；

网格组件将生成显示与从应用程序接收的数据相关的图像网格的逻辑。在模板部分中，我每两个图像创建一列。在这些专栏中，我展示了我的两幅图像。我使用另一个照片组件完成此操作。您将注意到使用v-for指令浏览我的列表。

在脚本部分，我使用道具来获取应用程序中通过v-bind传递的数据。然后，我使用计算函数用图片数据创建一个新的网格变量。

<；模板&><；img：src="；Photo.url"；alt="；"；/&>；<；/Template>；<；脚本>；导出默认值{名称：'；照片'；，道具：['；照片'；]}<；/脚本&>；<；样式作用域。列img。

照片组件只允许我在角落中隔离照片的显示。这很简单，但它允许我在未来改变这一边的很多东西，而不需要触及上面的逻辑！像往常一样，我放了一个小的密码盒子，你可以玩它，看看它是如何运作的。

我们已经和VueJS聊了五分钟多了。您必须了解，在快速阅读文档之后，我在几个小时内创建了第一个应用程序。这个框架的处理太疯狂了，太令人愉快了。坦率地说，我建议你试一试，它很有趣！