VUE——Key Concepts

VUE——Key Concepts

Vue.js

在过去的两年中，Vue从使用率和受欢迎程度方面从鲜为人知的时髦框架发展到了第二个框架，在GitHub Star数量上超过了React和Angular。与竞争对手相反，Vue并没有背后的大公司，但它的普及速度比Facebook和Google支持的框架快。

Vue受欢迎的主要原因（除了它充满活力和活跃的社区）也是该框架的主要特征。

• Approachable: 如果你已经熟悉HTML，CSS和JavaScript，那么学习Vue对你来说就不是问题。 通过仅了解一些基本概念，你就可以编写满足大多数常见用例的应用程序。
• Versatile:Vue可以很好地扩展并完全适应需求。 你可以使用它来制作一个小的交互式组件，使其与你网站的其余部分很好地配合使用，或者使用功能齐全的巨型Web应用程序。 更重要的是-Vue在处理其他代码方面比其他任何主流框架都更好。
• Performant: Vue的压缩版本只有20 kB，非常适合面向性能的Web应用程序，也可以替代专注于DOM操作的库（如jQuery）。

Vue还是一个专注于以惊人的学习曲线完成工作的框架。 许多人说它拥有业内最好的文档，这使它的加入变得更加容易。

根据JS State的报告，以上所有这些使Vue成为增长最快，满意度最高的框架。

基于组件的架构

Vue是一个可用于在基于组件的体系结构中构建Web应用程序的框架。 这意味着你是从独立的可重用组件构建应用程序的。 理想情况下，所有组件都不应该相互依赖。 这是构建大规模可维护应用程序的好方法。

在Vue中，应用程序的每个部分都是一个组件。 让我们使用下面的图片更好地理解这个概念：

在左侧，我们看到了一个典型的网站，分为几个部分。 每个部分可以是一个单独的组件。 包裹所有其他图形的几乎看不见的浅灰色矩形称为根组件。

根组件只是我们应用程序的容器。 它内部的每个组件都称为子元素，其中的内部元素就是其子元素，依此类推。 我们可以看到我们的根组件有三个子组件：标题（顶部），主要内容（左侧）和侧边栏（右侧）。 他们中的一些人有自己的孩子，就像一个单一的职位。 在右侧，我们可以看到一棵树，代表应用程序内部组件的父子关系。 事实证明，每个Vue应用程序都可以表示为此类树。

单个文件组件（SFC）

通常，无论我们使用哪种框架，每个组件都具有标记（HTML），样式（CSS）和业务逻辑（JavaScript）。 在Angular或React这样的框架中，每个或某些部分通常都位于单独的文件中。

在Vue中，有一个非常简洁的概念，即所谓的单一文件组件（SFC）。 此功能使你可以将与特定组件相关的所有代码放入一个扩展名为.vue的文件中。 让我们看一个非常简单的示例，演示SFC的外观：

<template>
  <div>
    <p class="hello-msg">{{ message }}</p>
    <button v-bind:click="sayBye">
      Bye!
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "Hello World!"
    }
  },
  methods: {
    sayBye () {
      this.message = "Bye bye!"
    }
  }
}
</script>

<style>
.hello-msg {
  font-size: 30px;
  color: red;
}
</style>

每个SFC分为三部分：

• 模板：HTML标记
• 脚本：具有JavaScript逻辑的导出的组件实例
• 样式：在CSS或某些预处理器（如SCSS）中进行样式设置

你可能已经注意到，这是将与特定组件相关的所有代码都放在一个地方的好方法。 而且，这样的组件可以比拆分的组件更容易共享和重用。 这就是为什么即使使用Vue编写的非常复杂的应用程序也非常易于维护的众多原因之一。

这三个部分捆绑在一起，可以相互影响。 样式部分中的样式直接应用于模板，脚本部分中的数据属性和方法也可以在其中使用。

在Vue中，有一个叫做反应系统的东西。 简而言之，它可以跟踪变量的变化并在你使用它的任何地方更改其值，因此通过调用sayBye，我们不仅在data属性中而且还在模板中更改此变量的值。 所做的更改将立即反映在屏幕上。