介绍
在使用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)的对象。