Vue.js 2 —组件(Component)化编程

news2024/12/25 23:46:46

一、模块与组件

模块
1. 理解 :  向外提供特定功能的 js 程序, 一般就是一个 js 文件
2. 为什么 :  js 文件很多,很复杂
3. 作用 :  复用 js, 简化 js 的编写, 提高 js 运行效率
组件
        组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树 :
1. 理解 : 用来实现局部(特定)功能效果的代码集合(html /css /js /image …..)
2. 为什么 :  一个界面的功能很复杂
3. 作用 :  复用编码, 简化项目编码, 提高运行效率

二、模块化与组件化

模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

三、组件组成和引用

非单文件组件
1. 模板编写没有提示
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS
4. 真正开发中几乎不用
单文件组件
      组件最大的优势就是可复用性,当使用构建步骤时,我们一般会将Vue组件定义在一个单独的 .vue文件中,这被叫做单文件组件(简称SFC)

一个.vue 文件的组成(3 个部分)

1. 模板页面
<template>
页面模板
</template>2. JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3. 样式
<style>
样式定义
</style>
2.3.2. 基本使用
1. 引入组件
2. 映射成标签
3. 使用组件标签

组件引用 

四、组件嵌套关系

五、组件注册方式

       一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式 : 全局注册 和 局部注册 

 

六、组件传输数据(props)

        组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的
传递数据的解决方案就是  props

组件动态数据传递

组件传递多种数据类型

       通过props传递数据,不仅可以传递字符串类型的数据,还可以是其他类型,例如:数字、对象、数组等但实际上任何类型的值都可以作为props的值被传递

通过props传递函数实现子传父

组件传递Props效验

 Vue组件可以更细致地声明对传入的props的校验要求

<template>
    <h3>prop传递数据</h3>
    <p>{{ title }}</p>
    <p>age={{ age }}</p>
    <ul>
        <li v-for="(item,index) in names" :key="index">{{item}}</li>
    </ul>
</template>

<script>
export default {
    name:"MyComponent",
    props:{
        title:{
            type:String,
            default:""
        },
        age:{
            type:Number,
            default:0
        },
        names:{
            type:Array,
            // 数组和对象必须使用函数进行返回
            default:function(){
                return []
            }
        }
    }
}
</script>
<style scoped>
</style>

 

  props校验是在Vue.js中用于验证和约束组件接收的数据类型和默认值的机制。在上述代码中,props对象定义了三个属性:titleagenames,每个属性都有指定的数据类型和默认值。

  • title 属性的类型为字符串 (String),默认值为空字符串 ("")。
  • age 属性的类型为数字 (Number),默认值为0。
  • names 属性的类型为数组 (Array),默认值为一个空数组 ([])。

        这样做的目的是为了确保父组件传递给子组件的数据满足特定的类型要求,并提供合适的默认值以防止意外错误。对于 names 属性,default 使用的是一个函数来返回默认的数组,这是因为在Vue中,如果使用对象或数组作为默认值,需要使用一个函数来返回新的对象或数组实例,以避免数据共享。

组件事件实现子给父传递数据

        在组件的模板表达式中,可以直接使用 $emit方法触发自定义事件触发自定义事件的目的是组件之间传递数据。(子给父传数据)

<template>
    <h3>自定义事件传递数据</h3>
    <button @click="sendClickHandle">点击传递</button>
</template>

<script>
export default {
    name:"MyComponent",
    data(){
        return{
            message:"我是MyComponent数据"
        }
    },
    methods:{
        sendClickHandle(){
            // 参数1:字符串:理论上是随便的,但是需要具有意义
            // 参数2:传递的数据
            this.$emit("onEvent",this.message)
        }
    }
}
</script>

<style scoped>
</style>

组件事件配合使用v-model

透传属性 (attribute)

        “透传attribute”指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id
当一个组件以单个元素为根作渲染时,透传的attribute会自动被添加到根元素上

七、组件生命周期

        每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会(不用调用)在特定阶段运行自己的代码 。

<template>
    <h3>生命周期函数</h3>
    <p>{{ message }}</p>
    <button @click="message='数据'">点击</button>
</template>
<script>

export default {
    data(){
        return{
            message:""
        }
    },
    beforeCreate(){
        console.log("beforeCreate:组件创建之前");
    },
    created(){
        console.log("created:组件创建完成");
    },
    beforeMount(){
        console.log("beforeMount:渲染之前");
    },
    mounted(){
        console.log("mounted:组件渲染完成");
        // 把网络请求放到这里
    },
    beforeUpdate(){
        console.log("beforeUpdate:组件更新之前");
    },
    updated(){
        console.log("updated:组件更新之后");
    },
    beforeUnmount(){
        console.log("beforeUnmount:组件卸载之前");
        // 卸载之前,把消耗性能的处理都干掉
        // 定时器
    },
    unmounted(){
        console.log("unmounted:组件卸载之后");
    }
}


</script>

 

 

 

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

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

相关文章

在呼叫中心领域,人工智能目前处在什么阶段

在呼叫中心这个行业&#xff0c;人工智能已经逐渐走向实用化阶段。目前&#xff0c;很多企业已经开始采用人工智能技术来改善其呼叫中心的效率和服务质量。 具体来说&#xff0c;人工智能已经被用于呼叫中心自动语音应答、自然语言处理、智能路由、智能客服机器人等方面。通过这…

机器学习中的分类问题:如何选择和理解性能衡量标准

文章目录 &#x1f34b;引言&#x1f34b;为什么需要分类问题的性能衡量标准&#xff1f;&#x1f34b;常用的分类问题衡量标准&#x1f34b;混淆矩阵-精确率-召回率&#x1f34b;PR曲线和ROC曲线&#x1f34b;PR曲线&#x1f34b;ROC曲线&#x1f34b;PR vs. ROC &#x1f34b…

外汇天眼:外汇新手开展交易需要做哪些准备,你都知道么?

外汇交易&#xff0c;如同任何一项专业工作&#xff0c;需要不断积累知识和经验&#xff0c;以及稳定的心态。正如古语所说&#xff1a;“工欲善其事&#xff0c;必先利其器。” 在外汇市场&#xff0c;这句话同样适用。在踏上外汇交易之旅之前&#xff0c;我们迫切需要做好外汇…

Windows清除激活标志的方法

大家在购买电脑或笔记本的时候&#xff0c;有的商家给出的7天无理由退货&#xff0c;并不是真正的无理由&#xff0c;往往附件条件windows是不能激活的&#xff0c;如果激活了就只能换不能退了。 卖家提出的条件也特别滑稽可笑&#xff0c;你想不联网怎么体验啊&#xff1f;不…

一百八十五、大数据离线数仓完整流程——步骤四、在Hive的DWD层建动态分区表并动态加载数据

一、目的 经过6个月的奋斗&#xff0c;项目的离线数仓部分终于可以上线了&#xff0c;因此整理一下离线数仓的整个流程&#xff0c;既是大家提供一个案例经验&#xff0c;也是对自己近半年的工作进行一个总结。 二、数仓实施步骤 &#xff08;四&#xff09;步骤四、在Hive的…

最新Python大数据之Excel进阶

文章目录 Excel图表类型了解有哪些图表类型 Excel图表使用图表的创建方式利用固定数据区域创建图表编辑数据系列添加数据标签格式化图表 Excel数据透视表数据透视表对原始数据的要求创建数据透视表数据透视表字段布局将数据透视图变成普通图表 Excel图表类型 为了揭示数据规律…

入门级制作电子期刊的网站推荐

随着数字化时代的到来&#xff0c;越来越多的人开始尝试制作自己的电子期刊。如果你也是其中的一员&#xff0c;那么这篇文章可以帮助你制作电子期刊。无论是初学者还是有一定经验的制作者&#xff0c;都能快速完成高质量的电子期刊制作 小编经常使用的工具是-----FLBOOK在线制…

Python爬虫在Web应用自动化测试中的应用

在Web应用开发过程中&#xff0c;自动化测试是确保应用质量和稳定性的重要环节。本文将介绍如何使用Python爬虫与自动化测试技术相结合&#xff0c;实现对Web应用进行自动化测试的方法和步骤。通过这种结合&#xff0c;我们可以提高测试效率、减少人力成本&#xff0c;并确保应…

RocketMQ 消息重试机制

文章目录 消息发送重试重试触发条件重试流程重试间隔重试常见问题消息流控机制流控触发条件 生产者控制消息发送重试次数gRPC 客户端remoting 客户端 消费重试重试触发条件PushConsumer 消费重试策略PushConsumer 重试间隔时间修改 PushConsumer 最大重试次数gRPC 协议端口Remo…

华为数字能源,开启超充新纪元

编辑&#xff1a;阿冒 设计&#xff1a;沐由 在过去很长的一段时间里&#xff0c;国内某著名品牌火锅是从来不担心获客的。顶峰时期&#xff0c;该品牌每年服务超过1.6亿人次的顾客&#xff0c;翻台率达到了5次/天&#xff0c;几乎创下了餐饮界的最高翻台率。 翻台率是餐饮企业…

调用CFCA金信反欺诈服务相关接口,很详细

调用CFCA金信反欺诈服务相关接口&#xff0c;很详细 一、准备二、调用接口1、查询接口文档2、查看代码示例3、测试调用接口 三、工具类1、CFCA金信反欺诈服务接口码枚举类2、CFCA金信反欺诈服务的公共参数配置3、加密解密工具类4、请求参数dto5、调用接口工具类&#xff08;关键…

【N年测试总结】证券行业的测试特点

每个行业由于其业务形式&#xff0c;产品形态&#xff0c;行业要求等等的不同&#xff0c;都有其不同于其他行业的测试特点&#xff0c;对测试人员的重点能力要求也不同。 一、证券行业业务系统简介 证券行业的业务系统这里按照C端系统和B端业务系统两大类进行介绍。 C端系统…

tensorrt C++推理

char* trtModelStream{ nullptr }; //char* trtModelStreamnullptr; 开辟空指针后 要和new配合使用&#xff0c;比如89行 trtModelStream new char[size]size_t size{ 0 };//与int固定四个字节不同有所不同,size_t的取值range是目标平台下最大可能的数组尺寸,一些平台下size_…

通讯网关软件012——利用CommGate X2OPC实现MS SQL数据写入OPC Server

本文推荐利用CommGate X2OPC实现从MS SQL服务器获取数据并写入OPC Server。CommGate X2OPC是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现从MS SQL数据库获取数据并写入OPC Server。 【…

(Vue2)智慧商城项目

新增两个目录api、utils api接口模块&#xff1a;发送ajax请求的接口模块 utils工具模块&#xff1a;自己封装的一些工具方法模块 第三方组件库vant-ui PC端&#xff1a;element-ui&#xff08;element-plus&#xff09; ant-design-vue 移动端&#xff1a;vant-ui Mint UI…

Vue3最佳实践 第五章 Vue 组件应用 3( Slots )

5.4 Slots 我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;但组件要如何接收模板内容呢&#xff1f;在某些场景中&#xff0c;我们可能想要为子组件传递一些模板片段&#xff0c;让子组件在它们的组件中渲染这些片段。Slots 可用于将Html内容从父组…

怎么样深入学习一门技术(Python)

进入官网 Python官网文档 https://docs.python.org/zh-cn/ 边敲代码边理解 多看教学视频 狠狠的花时间

Android 使用kotlin+注解+反射+泛型实现MVP架构

一&#xff0c;MVP模式的定义 ①Model&#xff1a;用于存储数据。它负责处理领域逻辑以及与数据库或网络层的通信。 ②View&#xff1a;UI层&#xff0c;提供数据可视化界面&#xff0c;并跟踪用户的操作&#xff0c;以便通知presenter。 ③Presenter&#xff1a;从Model层获…

Securing TEEs With Verifiable Execution Contracts【TDSC`23】

目录 摘要引言贡献 背景Intel SGX侧信道攻击Intel处理器的硬件扩展 概述威胁模型SGX已存的安全威胁侧信道泄露操作系统相关的威胁现有防御的限制 可验证的执行合同作为防御 摘要 最近的研究表明&#xff0c;可信执行环境&#xff0c;如Intel Software Guard Extensions&#x…

Nginx 背锅解析漏洞

Nginx 背锅解析漏洞 文章目录 Nginx 背锅解析漏洞1 在线漏洞解读:2 环境搭建3 影响版本&#xff1a;4 漏洞复现4.1 访问页面4.2 上传文件 4.3 上传失败4.4 使用bp进行分析包4.5 对返回图片位置进行访问4.6 执行php代码技巧-图片后缀加./php4.7 分析原因 --》cgi.fix_pathinfo--…