在这里，我们通过代码看到了 HTML 中声明式渲染的一个重要概念{{count}}。通过声明式渲染，我们指出了模板渲染部分，我们可以在其中使用声明性语法或模板语法直接渲染数据，这也是 Jinja 2 模板引擎中的双括号。这是 Vue 的一个重要属性，可以在快速开发和最小化代码方面派上用场。
第二个属性是反应性，自动对 JavaScript 代码中的更改做出反应。然后，更改会反映在 DOM 中，而无需编写任何额外的代码。然而，这是对反应性的简要概括，需要详细讨论。由于本指南围绕测试 Vue 组件展开，让我们改天再讨论。
Vue.js 基于组件的系统概述
基于组件的系统的基本思想是将较大的事物划分为较小的单元，并孤立地关注每个单元。这有助于分解一个更大的问题，并专注于如果立即采用整个系统可能会遗漏的细节。当我们开发被分成基于组件的树的简单 HTML 页面时，也可以看到这一点： 组件树
在 Vue 中，我们通过将每个组件保存到其文件中并将其逻辑作为扩展来执行类似的操作.vue。
为了理解 Vue.js 中组件的最小示例，让我们创建一个小网页，如下所示：
<div>
<h1> Hi This is Div 1.</h1>
</div>
<div>
<h1> Hi This is Div 2.</h1>
</div>
我们将放下一个简单的模板来替换对象：
Vue.component(‘vcomp’, {
template: “<h2> Hi this is a Vue Component </h2>”
});
在这里，模板部分采用您希望在屏幕上呈现此组件时显示的 HTML 模板。
有了这段小代码，我们的组件就可以在我们一开始编写的 HTML 页面中实现了。由于此组件由名称“ vcomp ”引用，因此让我们将其插入 div 块中，如下所示：
<div>
<h1> Hi This is Div 1.</h1>
<vcomp><vcomp>
</div>
<div>
<h1> Hi This is Div 2.</h1>
<vcomp></vcomp>
</div>
Vue 在这里要做的是用 中描述的组件模板替换 vcomp 标签app.js。结果，我们得到一个小网页如下： 小网页
如果我们检查这个网页，我们可以检查 HTML 代码是否已被 Vue 中提供的模板替换： 模板
一个简单的问题是代码已经变得可重用，但不能根据我们的选择进行定制。在 Web 开发中，您可能有许多具有相同代码的元素。我们上面的例子可以满足的需求。然而，我们可以有更多的代码，它们不相同但相似。例如，“Hi, I am Harish”和“Hi, I am Jack”是两个相似元素，与“Hi, I am”的相似度为 75%。如果我们能找到一种方法将数据放入此模板中，我们就会拥有一个很好的组件。
这是通过附加到 Vue 组件的数据对象来完成的。现在，我们修改后的视图为：
Vue.component(‘vcomp’, {
template: “<h2> Hi I am </h2>”
});
这表示将保持不变的部分。一个数据对象写成：
Vue.component(‘vcomp’, {
template: “<h2> Hi I am </h2>,
data: function(){}”
});
在函数部分，你可以编写你想要执行的函数。对于我们的示例，您需要返回名称以将其作为：
Vue.component(‘vcomp’, {
template: “<h2> Hi I am {{name}}.</h2>,
data: function(){
return {
name: “Harish”
}
}”
});
