解析Vue.js中的组件

介绍

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/213.html