Vue.js组件

目录

概述：组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

通过在学习最基础的组件中我们首先了解一下组件的页面功能：

大体上认识完上面的每个文件功能后，下面就举列一个简单例子

1.先打开编辑器代码终端页面

2.运行之前下载好的node.js搭建好脚手架并在打开已经创建好在文件夹的项目，在终端输入以下命令获取地址并去网页打开此页面

​编辑 ​编辑 3.获取完以上页面后，来到代码编辑器，在components文件下创建了以下这几个子组件，在子组件写入以下内容(一般都有这三部分的标签)

一般基本格式如下 ​编辑 4.写完子组件内容再去到父组件上调用它，如下图：

5.去网页刷新看下效果图如下  ​编辑

6.接下来建立一个自己的简单页面父组件（由父组件向子组件传递）

1.在views文件下创建一个页面

2. 去router文件下导入该页面路由

3.在App.vue写入路由 ​编辑

---

概述：组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

通过在学习最基础的组件中我们首先了解一下组件的页面功能：

大体上认识完上面的每个文件功能后，下面就举列一个简单例子

1.先打开编辑器代码终端页面

2.运行之前下载好的node.js搭建好脚手架并在打开已经创建好在文件夹的项目，在终端输入以下命令获取地址并去网页打开此页面

npm run serve

  3.获取完以上页面后，来到代码编辑器，在components文件下创建了以下这几个子组件，在子组件写入以下内容(一般都有这三部分的标签)

//第一部分

1 <template>

<div>

</div>

  </template>

//第二部分

2 <script>

</script>

//第三部分

3 <style scoped>

   </style>

一般基本格式如下  4.写完子组件内容再去到父组件上调用它，如下图：

5.去网页刷新看下效果图如下  

6.接下来建立一个自己的简单页面父组件（由父组件向子组件传递）

1.在views文件下创建一个页面

2. 去router文件下导入该页面路由

3.在App.vue写入路由 

 

上图代码分析：props:['type','text']这里通过props接收父组件传进来的数据

                       <button :class="type">{{text}}</button> //使用父组件传进来的数据   

2.为刚创建新页面（父组件）添加路径  

3.写入 

4.效果图如下 

 此外如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。