介绍
在使用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）的对象。
让我们使用上面的内容创建一个组件。
Vue.component('welcome-message', { data: function() { return { domain: 'Tutsplus' } }, template: '<p>Welcome to {{ domain }}</p>' })
新闻热点
疑难解答
图片精选
