5分钟了解VueJS

我最近在玩 VueJS，印象非常深刻。它简单、强大、超级有趣，而且非常受欢迎。就连我这种菜鸟也能用它快速做出一些有趣的东西。这证明了任何人都可以用它做出很棒的事情。你有五分钟时间吗？

曾几何时

2012年，在纽约地区。当时尤雨溪正享受着学习JavaScript的快乐时光。他一边忙着做着各种业余项目，一边寻开心。其中一个项目在Hackernews上爆红！尤雨溪当时并不知道，他刚刚引起了谷歌的注意。

他很快就被谷歌录用，负责为创新想法创建“实验项目”。他大量使用原生 JavaScript。他尝试过 AngularJS 和其他框架，但很快就对其感到厌烦。他找不到自己需要的自由。于是，他萌生了一个想法：提取这些框架中最好的部分，打造一个轻量且可塑性强的框架，以满足他个人的需求。

2013 年 7 月，VueJS 首次提交。当时，VueJS 的名字应该是 Seed.JS。但它被 NPM 拿走了！由于 VueJS 的框架以视图部分为中心，Evan 想要一个看起来像英文“View”的东西。他用谷歌翻译，把“View”翻译成了几种语言。他偶然发现了法语翻译“Vue”，觉得很酷。几分钟后，VueJS 就发布了。

2014 年，VueJS 的第一个版本在互联网上发布。这个项目并没有立即引起轰动。但就像Laravel 的创建者一样，越来越多的人开始谈论它。如今，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",
        data: data
      });
    </script>
  </body>
</html>

VueJS 专注于应用程序的视图部分。为此，该框架部分借鉴了MVVM 架构模式。VueJS会将 DOM（视图部分）与视图实例（模型-视图部分）连接起来。这两个部分通过数据绑定系统连接起来。

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

VueJS 应用由一个或多个组件组成。全局应用实例启动时，首先会有一个根实例。该根实例由一个组件树组成，每个组件都有自己的根实例。

但是，当你使用 new Vue() 创建组件时，实例的生命周期会发生什么变化？我本来想照着我惯常的傻乎乎的模式写，但结果发现VueJS 官方文档简直太棒了*。很少有好的文档。所以我就照搬他们的模式吧。

我让你欣赏一下，然后弄清楚发生了什么。唯一可能不清楚的是“created”和“mounted”之间的区别。

创建意味着该元素仅在 View-Model 部分可用。
在 VueJS 中挂载意味着 DOM 元素已经在你的页面中渲染并且你可以对其进行操作。

好的，太好了，现在让我们开始行动吧。

显示代码

我将向你展示一段我根据个人需求编写的代码。这是一个简单的响应式图库，仅包含三个组件。我们从根应用开始。

应用程序.vue

<template>
  <div id="app">
    <action v-bind:message="messageAction"></action>
    <grid v-bind:photos="photos"></grid>
  </div>
</template>

<script>
  import action from './components/action.vue'
  import grid from './components/grid.vue'

  export default {
    name: 'App',
    components: { action, grid },
    data: function () {
      return {
        photos: [
          {
            id: 0,
            url: "https://i.imgur.com/p3IKY9G.jpg"
          }
        ],
        messageAction: "It's working !"
      }
    }
  }
</script>

<style>
  {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial;
  }
</style>

在模板方面，我首先在一个 div 中声明我的根应用。里面还有另外两个组件（action 和 grid）。注意我是如何通过 v-bind 指令传递来自组件实例的数据的。

在脚本方面，我导入了组件，以便在我们导出的应用中使用它们。我们声明了数据、图片和一条对变化做出反应的消息。

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

接下来是动作组件。

action.vue

<template>
  <div class="callToAction">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'callToAction',
    props: {
      message: String
    }
  }
</script>

<style scoped>
  .callToAction {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h1 {
    color: red;
    background:black;
    padding: 10px;
  }
</style>

操作组件只是一段放置在页面中间的文本，用于引导用户采取行动。我使用“message”语法来显示来自应用的消息。

还要注意，样式部分是“作用域”的。这意味着相关的 CSS 仅在此组件中有效。这对于区分每个组件的样式作用域非常有用。

grid.vue

<template>
  <div class="grid">
    <div v-bind:key="grid.id" v-for="grid in grids" class="column">
      <photo
        v-for="photo in grid" 
        v-bind:photo="photo" 
        v-bind:key="photo.id"
      ></photo>
    </div>
  </div>
</template>

<script>
import photo from './photo.vue'

export default {
  name: 'grid',
  components: { photo },
  props: ['photos'],
  computed: {
    grids: function () {
      const grids = []
      const deepClonePhotos = JSON.parse(JSON.stringify(this.photos))
      const gridsToMake = Math.ceil(deepClonePhotos.length / 2) - 1

      for (let index = 0; index <= gridsToMake; index++) {
        const currentGrid = []

        for(let i = 0; i < 2; i++) {
          if(deepClonePhotos.length) {
            currentGrid.push(deepClonePhotos.shift())
          }
        }

        grids.push(currentGrid)
      }

      return grids
    }
  }
}
</script>

<style scoped>
  .grid {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0;
  }

  /* Create four equal columns that sits next to each other */
  .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }
</style>

网格组件负责根据从应用接收到的数据，创建显示图像网格的逻辑。在模板部分，我每两张图片创建一个列。在这些列中，我显示这两张图片。我使用另一个照片组件来实现这一点。您会注意到我使用了 v-for 指令来浏览列表。

在脚本部分，我使用props获取应用程序中 v-bind 传递的数据。然后我使用 computed 函数创建一个新的 grids 变量，其中包含图片的数据。

照片.vue

<template>
  <img :src="photo.url" alt ="" />
</template>

<script>
  export default {
    name: 'photo',
    props: ['photo']
  }
</script>

<style scoped>
  .column img {
    vertical-align: middle;
    width: 100%;
  }
</style>

照片组件只是让我能够将照片的显示隔离在一个角落里。它很简单，但它允许我将来在这一侧进行很多修改，而无需修改上面的逻辑！像往常一样，我放了一些codesandbox 代码，你可以试用一下，看看它的实际效果。

结语

我们已经讨论 VueJS 超过五分钟了。你应该明白，在快速阅读完文档后，我花了几个小时就创建了这个第一个应用程序。这个框架的操作非常流畅，而且非常令人愉快。坦白说，我建议你去测试一下，它真的很有趣！

文章来源：https://dev.to/jesuisundev/understand-vuejs-in-5-minutes-1jab