前端页面全新的写法(第七课)Vue中的组件

news2025/7/18 5:47:48

VueCli框架的实操内容(第七课)Vue中的组件

组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

个人观点:Vue组件等价于模块思想

文档内容解释

(6条消息) VueCLi的安装步骤(第四课)_星辰镜的博客-CSDN博客

VueCli项目的创建结构图

控制器操作自己的页面信息

 组件注册 | Vue.js (vuejs.org)

  1. 前面我们是将所有的逻辑放到一个App.vue中：

  2. 在之前的案例中，我们只是创建了一个组件App；

  3. 如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃 肿和难以维护；

  4. 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；

  5. 再将这些组件组合嵌套在一起，最终形成我们的应用程序；

  6. 我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue组件 中：

  7. 我们会发现，将所有的代码逻辑全部放到一个组件中，代码是非常的臃肿和难以维护的。

  8. 并且在真实开发中，我们会有更多的内容和代码逻辑，对于扩展性和可维护性来说都是非 常差的。

  9. 所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。

 组件又是上面三张图的意思 将整个页面分开实现功能 在用组件思想 组合在一起 便于后期期维护

App.vue

  <div class="app">
    <!--!主模块的内容信息 -->
    <h1>主版块的内容信息</h1>
    <!-- 头部 -->
    <header-item  attribute="接收子组件转来的信息" name="张三" age="20" height="111"></header-item>
    <header-item  attribute="接收子组件转来的信息" name="李四" age="ASDF" height="111"></header-item>
    <header-item  attribute="接收子组件转来的信息" name="王五" age="202" height="111"></header-item>
    <header-item attribute="接收子组件转来的信息"  name="张璐" age="203" height="111"></header-item>
    <!-- 中部 -->
    <banner :info="obj"></banner>
    <!-- 脚步 -->
   <footers class="product" name="我叫张上偶" age="20" id="1001002"></footers>
   <footers :class="$attrs.class " name="我叫张上偶" age="20" id="1001002"></footers>
   <footers class="product" name="我是谁" age="20" id="1001002"></footers>
   <footers class="product" name="我来自哪里" age="20" id="1001002"></footers>
   <mysolt></mysolt>
   <four></four>
   <div></div>
   <vue-sum-egg-five></vue-sum-egg-five>
  
  </div>

<template>
  <div class="app">
    <!--!主模块的内容信息 -->
    <h1>主版块的内容信息</h1>
    <!-- 头部 -->
    <header-item  attribute="接收子组件转来的信息" name="张三" age="20" height="111"></header-item>
    <header-item  attribute="接收子组件转来的信息" name="李四" age="ASDF" height="111"></header-item>
    <header-item  attribute="接收子组件转来的信息" name="王五" age="202" height="111"></header-item>
    <header-item attribute="接收子组件转来的信息"  name="张璐" age="203" height="111"></header-item>
    <!-- 中部 -->
    <banner :info="obj"></banner>
    <!-- 脚步 -->
   <footers class="product" name="我叫张上偶" age="20" id="1001002"></footers>
   <footers :class="$attrs.class " name="我叫张上偶" age="20" id="1001002"></footers>
   <footers class="product" name="我是谁" age="20" id="1001002"></footers>
   <footers class="product" name="我来自哪里" age="20" id="1001002"></footers>
   <mysolt></mysolt>
   <four></four>
   <div></div>
   <vue-sum-egg-five></vue-sum-egg-five>
  
  </div>

</template>


<script>
import banner from "../src/components/banner.vue";
import footers from '../src/components/footer.vue';
import mysolt from '../src/components/mySoltOne.vue'
import four from '../src/components/four.vue'
import VueSumEggFive from "../src/components/V-X.vue"
// import footer_item from "./footers.vue"
export default { 
  // eslint-disa le-next-line vue/multi-word-component-names
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
      // 在父模块中定义对象
      obj:{
        id:"1001001",
        name:"我是李四上",
        age:"78",
        height:"178",
        weight:"78",
        color:"red",
        sex:'男'
      }
    };
  },
//   局部注册
  components: {
    banner,
    footers,
    mysolt,
    four,
    // eslint-disable-next-line vue/no-unused-components
    VueSumEggFive

  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>



<style scoped>
*{
    /* background-color: rgb(0, 100, 0); */
    background-color: rgb(151, 219, 178);
    border-top: 4px solid rgb(244, 8, 86) ;
}
h2 {
  background-color: azure;
}
h1 {
  color: rgb(20, 87, 116);
  background-color: rgb(159, 248, 251);
  text-align: center;
}

h3 {
  background-color: antiquewhite;
  color: cyan;
}
</style>

One.vue

​​​​​​​

import banner from "../src/components/banner.vue";
import footers from '../src/components/footer.vue';
import mysolt from '../src/components/mySoltOne.vue'
import four from '../src/components/four.vue'
import VueSumEggFive from "../src/components/V-X.vue"
// import footer_item from "./footers.vue"
export default { 
  // eslint-disa le-next-line vue/multi-word-component-names
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
      // 在父模块中定义对象
      obj:{
        id:"1001001",
        name:"我是李四上",
        age:"78",
        height:"178",
        weight:"78",
        color:"red",
        sex:'男'
      }
    };
  },
//   局部注册
  components: {
    banner,
    footers,
    mysolt,
    four,
    // eslint-disable-next-line vue/no-unused-components
    VueSumEggFive

  },

<template>
  <div class="header">
    <div>
      <h1>我是第一模块</h1>
      <h1>我是头部提示信息{{ age }}</h1>
      <h1>{{ message }}{{ name }}___{{ age }}___{{ height }}</h1>
      <h2>我是头部信息</h2>
      <h3>
        <nav><span>11111</span>&nbsp;&nbsp;<span>22222</span></nav>
      </h3>
    </div>
  </div>
</template>


<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "header",
  // 
  props: {
    age: {
      type: Number,
      required: true,
      default: 18,
    },
  },

  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {},
};
</script>



<style scoped>
* {
  font-size: 23px;
  background-color: rgb(17, 96, 123);
  color: white;
}
</style>

Banner.vue

<template>
  <div class="banner">
    <div>
      <h1>Two</h1>
      <h2>我是身体的一部分</h2>
      <ul>
        <!-- 用户转入的对象信息 -->
        <!-- 子模块 -->
        <h4>{{info}}</h4>
        <li>&nbsp;&nbsp;我是学生&nbsp;&nbsp;{{info.id}}</li>
        <li>&nbsp;&nbsp;我是学生&nbsp;&nbsp;{{info.name}}</li>
        <li>&nbsp;&nbsp;我是学生&nbsp;&nbsp;{{info.sex}}</li>
        <li>&nbsp;&nbsp;我是学生&nbsp;&nbsp;{{info.height}}cm</li>
        <li>&nbsp;&nbsp;我是学生&nbsp;&nbsp;{{info.weight}}kg</li>
      </ul>
      <product class="product"></product>
      <h1>{{count}}</h1>
      <product @sonCom="getSon"  class="product"></product>
    </div>
  </div>
</template>


<script>

import Product from './product.vue';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "banner",
  props:["info"],
  emits:{
    getSon:function(e){
      return e
    }
  },
  components:{
    Product 
  },
  data() {
    return {
      message: "Hello world vue cli",
      count:0
    };
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
    getSon(e){
      if(e){
        this.count--
      }else{
        this.count++
      }
      // console.log(e)
    }
  },
};
</script>



<style scoped>

*{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 20px;
  background-color: rgb(4, 117, 77);
  color: rgb(255, 255, 255);
}
</style>

产品组件

<template>
    <div>
    <h1 >学生信息表格</h1>
    <table @click="emits">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>1001</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10012</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10012</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10014</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10015</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10016</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10017</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10018</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10019</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
      <tr>
        <td>10010</td>
        <td>李四光</td>
        <td>女</td>
        <td>34</td>
        <td>王者荣耀</td>
      </tr>
    </table>

    <button @click="emitse(false)"> -1</button>
    <button @click="emitse(true)"> +1</button>
  </div>
  
</template>


<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "product",

  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("我是第一条的数据信息内容");
    },
    // 字组件专递个父组件的对象
    emits(flag){
      this.$emit("sonCom",flag)
      // this.$emit("sonCom", 监听事件
      // this.$emit("sonCom",{
        // name:"我叫对象",
        // age:123,
        // height:190,
        // weight:78,
        // sex:"男",
      // })
    }
  },
};
</script>



<style scoped>
*{
    /* background-color: rgb(0, 100, 0); */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:20px;
    border: 2px solid rgb(125, 193, 232);
    border-bottom: 1px solid rgb(255, 0, 0);
    margin: 2px;
    background-color: rgb(10, 79, 101);
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
  border: 2px solid rgb(0, 0, 0);
  text-align: center;
}
th td {
  border: 1px solid rgb(255, 0, 0);
  
}
td{
  background-color: lightblue;
    border-left: 3px solid rgb(255, 166, 0);
   border-bottom: 2px solid rgb(9, 74, 97); 
}

h1{
  text-align: center;
}
</style>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "product",

  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("我是第一条的数据信息内容");
    },
    // 字组件专递个父组件的对象
    emits(flag){
      this.$emit("sonCom",flag)
      // this.$emit("sonCom", 监听事件
      // this.$emit("sonCom",{
        // name:"我叫对象",
        // age:123,
        // height:190,
        // weight:78,
        // sex:"男",
      // })
    }
  },

footer.vue

<template>
  <div class="footers">
    <div>
      <!--  字模块-->
      <h1>{{attribute}}__{{name}}_{{age}}_{{id}}</h1>
      <h2>我是脚本信息</h2>
      <h3>信息脚本</h3>
      <h2>我是动态的脚本信息内容</h2>
    </div>
  </div>
</template>


<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "footers",
  props:["attribute","name","age","id"],
  data() {
    
    return {
      message: "Hello world vue cli",
    };
    
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>



<style scoped>
*{
    background-color: rgb(173, 227, 229);
    color: rgb(6, 6, 6);
    font-size: 20px;
}
</style>

four.vue

<template>
    <div class="four">
    
    <h1>我是文本的信息内容介绍four</h1>
    

    </div>
</template>


<script>

export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'four',
    data(){
        return{
            message:"Hello world vue cli"
        }
    },
    methods:{
        btnclick(){
            console.log("为难忘")
        }
    }

}
</script>



<style scoped>
*{
    background-color: chartreuse;
}

</style>

mySoltOne.vue

<template>
    <div class="mysolt">
        <h1>开始</h1>
        <slot>
            <h1>我的内容展示</h1>
        </slot>
        <h1>结尾</h1>
    </div>
</template>


<script>

export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'mysolt',
    data(){
        return{
           
        }
    },
    methods:{


    }

}
</script>



<style scoped>
div{
    border-top: 4px solid rgb(13, 71, 96);
    background-color: rgb(255, 140, 0);
    border-radius: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 24px;
}

</style>

这个项目自己理解一下会对你有帮助 后期会有项目实战

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/17526.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

电脑里重要文件用什么备份，电脑如何备份主要数据

电脑里重要文件用什么备份，电脑如何备份主要数据

保护好数据安全是很重要的&#xff0c;能够给我们减少很多麻烦或者说是损失&#xff0c;所以&#xff0c;我们是有必要通过一些手段来保护好重要数据的。电脑里重要文件用什么备份&#xff1f;提前对数据进行备份无疑是最好的方法之一。 一、如何备份数据&#xff1f; 我们可以…
阅读更多...
数据结构-排序算法总结

数据结构-排序算法总结

排序算法总结插入排序直接插入排序&#xff08;稳定&#xff09;希尔排序交换排序冒泡排序&#xff08;稳定&#xff09;快速排序选择排序简单选择排序堆排序归并排序&#xff08;稳定&#xff09;基数排序&#xff08;稳定&#xff09;多路归并排序&#xff08;外排序&#xf…
阅读更多...
Stream之flatMap用法

Stream之flatMap用法

记录一下flatMap的用法 个人理解是将流中的流合并 Data AllArgsConstructor NoArgsConstructor public class WhiteIp {//idprivate Integer id;//域名private String domain;//ip,多个用;分隔private String ipaddress;public static void main(String[] args) {WhiteIp w1 …
阅读更多...
Android未捕获异常监控原理

Android未捕获异常监控原理

背景 本文仅探讨java层的未捕获异常的监控为什么我们自己的异常捕获总是比 Bugly 收到的信息少&#xff1f; Android未捕获异常的监控与收集 Java层未捕获异常监控的基本实现 先看看Java层未捕获异常监控的运行过程&#xff1a; public class MyUncaughtExceptionHandler …
阅读更多...
企业虚拟网络管理

企业虚拟网络管理

随着企业规模的扩大&#xff0c;其网络的规模和复杂性也会成比例地扩展。企业级组织和中小型企业需要大规模网络来满足不断增长的业务需求。然而&#xff0c;大规模网络需要大量的物理组件、定期维护和配置&#xff0c;所有这些都是有代价的。因此&#xff0c;为了规避这些额外…
阅读更多...
Spring Boot面试题

Spring Boot面试题

什么是 Spring Boot&#xff1f; Spring Boot 是 Spring 开源组织下的子项目&#xff0c;其设计目的是专注于Spring应用的开发&#xff0c;开发人员可以把更多的精力放在业务代码上&#xff0c;而无需过多关注XML的配置&#xff0c;从而简化Spring应用开发&#xff0c;提高开发…
阅读更多...
牛客小白月赛61-E

牛客小白月赛61-E

传送门 题意 给你一个长度为n的序列&#xff0c;它有n&#xff01;个排列方法 问在这n&#xff01;个排列方法中 逆序对的总数是多少 首先要知道 逆序对数n&#xff01;/2*&#xff08;不相等的数字对儿数&#xff09; 不相等的数组对儿数cn2c_{n}^{2}cn2​-Zcnum[a[i]2c_{n…
阅读更多...
前端如何写进度条（上传或者下载文件的时候）

前端如何写进度条（上传或者下载文件的时候）

1.需求 在日常开发中&#xff0c;我们经常会遇到上传或者下载文件的需求&#xff0c;以下载为例&#xff1a; 如果后台文件是现成的&#xff0c;浏览器就会在底部出现下载的过程&#xff0c;如果点击下载后&#xff0c;有些业务是需要去打包&#xff0c;然后再下载文件的话&a…
阅读更多...
【C++语法难点】 深拷贝和浅拷贝是什么，拷贝构造，拷贝赋值

【C++语法难点】 深拷贝和浅拷贝是什么，拷贝构造，拷贝赋值

文章目录1.开始&#xff1a;构造函数1.2 在栈区和堆区创建对象1.3 缺省构造函数1.4 类型转换构造函数1.5 拷贝构造函数1.6 缺省拷贝构造函数&#xff08;浅拷贝&#xff09;1.7 深拷贝构造函数 (深拷贝)1.8 拷贝赋值1.开始&#xff1a;构造函数 语法形式 class 类名{类名(形参…
阅读更多...
UE5笔记【三】UE5材质Materials

UE5笔记【三】UE5材质Materials

材质&#xff1a;可以将材质看作是StaticMesh上面的绘画。这副绘画Paint是由图层组成的&#xff0c;这些图层形成了所谓的物理基础渲染&#xff08;Physically Based Rendering OR PBR&#xff09;。这些PBR的特殊之处在于&#xff1a;几乎可以让我们模拟显示世界中的任何材质。…
阅读更多...
「Redis数据结构」QuickList

「Redis数据结构」QuickList

「Redis数据结构」QuickList 文章目录「Redis数据结构」QuickList一、前言二、概述三、结构四、小结一、前言 在前面一章&#xff0c;我们已经学习了ZipList压缩列表&#xff0c;ZipList虽然节省内存&#xff0c;但也引发了不少问题。 问题1&#xff1a;ZipList虽然节省内存&am…
阅读更多...
【Bio】基础生物学 - 细胞 cell

【Bio】基础生物学 - 细胞 cell

文章目录1. 细胞2. 原核细胞 真核细胞3. 细胞器4. 细胞核5. 动物细胞5.1 细胞质5.2 核糖体5.3 内质网6. 植物细胞6.1 液泡6.2 线粒体6.3 叶绿体Ref1. 细胞 生命系统的结构层次依次为&#xff1a; 细胞 (cell)\blue{\text{细胞 (cell)}}细胞 (cell) →\rightarrow→ 组织 (tiss…
阅读更多...
玩转MySQL：程序中的“田氏代齐”，InnoDB为何能替换MyISAM？

玩转MySQL：程序中的“田氏代齐”，InnoDB为何能替换MyISAM？

引言 MySQL是一款支持拔插式引擎的数据库&#xff0c;在开发过程中你可以根据业务特性&#xff0c;从支持的诸多引擎中选择一款适合的&#xff0c;例如MyISAM、InnoDB、Merge、Memory(HEAP)、BDB(BerkeleyDB)、Example、Federated、Archive、CSV、Blackhole..... 不过虽然各款…
阅读更多...
[附源码]java毕业设计全国人口普查管理系统论文

[附源码]java毕业设计全国人口普查管理系统论文

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
LeetCode刷题复盘笔记—一文搞懂746. 使用最小花费爬楼梯（动态规划系列第二篇）

LeetCode刷题复盘笔记—一文搞懂746. 使用最小花费爬楼梯（动态规划系列第二篇）

今日主要总结一下动态规划的一道题目&#xff0c;746. 使用最小花费爬楼梯 题目&#xff1a;746. 使用最小花费爬楼梯 题目描述&#xff1a; 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择…
阅读更多...
Linux之关于Nginx

Linux之关于Nginx

目录 1、什么是Nginx&#xff1f; 1.1、负载均衡&#xff1a;流量分摊​编辑 1. 2、反向代理 &#xff1a;处理外网访问内网问题 1.3、动静分离:判断动态请求还是静态请求&#xff0c;选择性的访问指定服务器 2、Nginx的使用 2.1.Nginx安装 2.1.1 添…
阅读更多...
11月27日PMI认证才聚各考点防疫要求，PMP考生必看

11月27日PMI认证才聚各考点防疫要求，PMP考生必看

11月27日深圳才聚、珠海才聚、东莞才聚、南宁才聚防疫要求及如下&#xff1a; 注意&#xff1a;由于疫情防控影响&#xff0c;以下城市的考试将延期举办&#xff0c;该考点的考生无需做任何操作。 北京、天津、石家庄、廊坊、保定、哈尔滨、大庆、呼和浩特、太原、郑州、兰州…
阅读更多...
【王道计算机网络笔记】计算机网络体系结构-计算机网络概述

【王道计算机网络笔记】计算机网络体系结构-计算机网络概述

文章目录计算机网络的概念计算机网络的功能计算机网络的组成计算机网络的分类标准化工作及相关组织相关组织计算机网络的性能指标速率带宽吞吐量时延时延带宽积往返时延RTT利用率计算机网络的概念 计算机网络&#xff1a;是一个分散的、具有独立功能的计算机系统&#xff0c;通…
阅读更多...
[附源码]java毕业设计汽车租赁系统

[附源码]java毕业设计汽车租赁系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
绿竹生物获上市“大路条”：融资不搞研发去理财，孔健下什么棋？

绿竹生物获上市“大路条”：融资不搞研发去理财，孔健下什么棋？

11月19日&#xff0c;绿竹生物发布消息称&#xff0c;该公司于2022年11月11日获得中国证监会关于首次公开发行境外上市外资股&#xff08;H股&#xff09;及境内未上市股份全流通&#xff08;即“大路条”&#xff09;的批复&#xff0c;下一步将根据香港联交所的聆讯进度安排及…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023