介绍
在使用Vue.js时，Vue.js组件非常重要。在本教程中，我们将深入研究Vue.js组件，理解基础知识并将其应用于应用程序。让我们开始吧。
什么是组件？
组件使我们能够将 复杂的 应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。
Vue.js允许我们将每个部分分解成单独的模块化代码，称为组件。这些组件可以扩展，然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代码的好方法。
假设 你 有一个博客应用程序，并且 你 想要显示 一列 博客 帖子 。使用Vue组件，你可以做：
<blog-post></blog-post>
Vue处理剩下的事情。
创建一个将Vue实例挂载到DOM元素的简单HTML页面。 你 将使用它来了解组件。以下是HTML页面 样例 ：
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div id="app"></div>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your div element
new Vue({
el: '#app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>
在上面，你创建了一个简单的Vue实例，在代码中没有组件因素。 现在，如果 你 希望欢迎消息出现两次，那么 你 怎么做？
你的猜测可能是 让 div 在 Vue实例挂载的地方出现两次。 这是行不通的。 尝试改变它从 id 到 class ， 你会得到 ：
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div class="app"></div>
<div class="app"></div>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your div element
new Vue({
el: '.app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>
它仍然不会工作！
解决这个问题的唯一方法是创建一个组件。 你如何创建一个组件？
组件是使用Vue.component（）构造函数创建的。 这个构造函数有两个参数：你的组件的名字（也可以叫做标签名）和一个包含组件选项（options）的对象。