VUE 开发——Vue学习(二)

一、watch侦听器

作用:监视数据变化,执行一些业务逻辑或异步操作

简单写法

 <div id="app"><textarea v-model="words"></textarea></div><script>const app = new Vue({el:'#app',data: {words: ''},watch: {//该方法会在数据变化时调用执行//newvalue 新值 oldvalue 老值(一般不用)words (newValue, oldValue){console.log("变化了",newValue,oldValue)}}})</script>

完整写法

添加额外配置项

1.deep:true 对复杂类型深度监视

2.immediate:true 初始化立刻执行一次handler方法

data: {obj: {'words':'','lang':'italy'},result:'',},watch: {obj: {deep:true,handler (newValue) {console.log("修改了")}}}

二、Vue生命周期

生命周期四个阶段:创建、挂载、更新、销毁

生命周期函数(钩子函数)

Vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子

1.创建阶段(响应式数据)————beforeCreate、created

2.挂载(渲染模板)————beforeMount、mounted

3.更新阶段(修改数据,更新视图) ————beforeUpdate、updated

4.销毁阶段(销毁实例)————beforeDestory、destroyed

三、工程化开发

四、普通组件的注册使用

组件注册的两种方式:

1.局部注册:只能在注册的组件内使用

        1.创建.vue文件

        2.在使用的组件内导入并注册

2.全局注册:所有组件内都能使用

        1.创建.vue文件

        2.main.js中进行全局注册

使用:作为html标签使用 <组件名></组件名> 

局部注册

app.vue

<template><div class="App"><!-- 头部组件 --><Header></Header><!-- 主体组件 --><!-- 底部组件 --></div>
</template><script setup>
import Header from './components/Header.vue';
export default {components: {//‘组件名’:组件对象Header:Header}
}
</script><style scoped>
.app {background-color: aqua;
}
</style>

 组件使用

<template><div class="header">header</div>
</template><script setup>
</script><style scoped>
.header {font-size: 30px;background-color: rosybrown;height: 200px;
}
</style>

五、组件的三大组成部分

结构template 、样式style 、逻辑script

组件样式冲突scoped

默认情况下:写在组件中的样式会全局生效 --> 因此很容易造成多个组件之间的样式冲突问题

1.全局样式:默认组件中的样式会作用到全局

2.局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

六、组件通信

组件与组件之间的数据传递

组件关系分类:父子关系、非父子关系

父子关系:props和$emit

父子通信:

1.父组件通过props将数据传递给子组件

2.子组件利用$emit通知父组件修改更新

非父子关系:provide&inject 、eventbus

七、ref和$refs

作用:用于获取dom元素或组件实例

特点:查找范围 -> 当前组件内

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai论文写作软件哪个好?分享5款ai论文题目生成器

在当前的学术研究和写作领域&#xff0c;AI论文写作软件已经成为提高效率和质量的重要工具。根据多个来源的评测和推荐&#xff0c;以下是五款值得推荐的AI论文写作软件&#xff0c;其中特别推荐千笔-AIPassPaper。 1. 千笔-AIPassPaper 千笔-AIPassPaper是一款基于深度学习和…

扭蛋机深受年轻人欢迎,线上扭蛋机小程序发展优势

近几年&#xff0c;扭蛋机一直处于高速发展阶段&#xff0c;市场发展前景逐渐扩大。扭蛋机的玩法可以激发年轻人追求刺激的心理&#xff0c;从而提高扭蛋机的吸引力。在扭蛋中带来的不确定性和刺激性&#xff0c;能够提高消费者的体验感&#xff0c;满足消费者的娱乐休闲需求&a…

Qt开发环境的搭建

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Qt开发环境的搭建 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. Qt开发工具概述 Qt…

【分立元件】案例:电感焊盘部分发黑原因有什么?

大家都知道正常的一体成型电感的PIN脚外观如下图所示: 其中要求对电极的验收要求可能有几个关注点,如:电极偏位、划痕、凸起、生锈、孔洞等。 但是在工作过程中,前段时间,有同事咨询电感来料焊盘存在发黑现象的原因是什么。 对于这方面其实我也不懂,但通…

通信工程学习:什么是RIP路由信息协议

RIP&#xff1a;路由信息协议 RIP&#xff08;Routing Information Protocol&#xff09;路由信息协议是一种基于距离矢量算法的内部网关协议&#xff08;IGP&#xff09;&#xff0c;主要用于在自治系统&#xff08;AS&#xff09;内部进行路由信息的交换和传播。以下是关于RI…

Base64字符串转图片在线工具

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 基本原理 Base64编码&#xff0c;作为一种将二进制数据转换为文本格式的方法&#xff0c;其核心在于利用64个可打印字符来表征任意的二进制信息。这一编码方式的出现&#…

一些零散的和编译相关的语法/flash-attn涉及语法扫盲

#pragma once&#xff1a;一个编译指令&#xff0c;用于防止头文件被多次包含。当编译器遇到#pragma once时&#xff0c;它会确保该头文件在一个编译单元&#xff08;一个.cpp文件及其包含的所有文件&#xff09;中只会被包含一次。即使该文件被间接包含多次&#xff0c;编译器…

用于图像识别的判别图正则化技术

本文所涉及所有资源均在 传知代码平台 可获取。 目录 论文概述 图正则化技术及其优点 算法流程 在标准BLS中嵌入判别图正则化的方法 模型整体架构 代码复现 图拉普拉斯矩阵的构建——generateLmatrix.py文件 复现模型整体架构——bls2deep_graph.py文件 顶层文件——GBLS.py文件…

Error_code: 1032; handler error HA_ERR_KEY_NOT_FOUND

Case1 : 表没有主键 show create table xxx desc table Case2 : 表是MEMORY表 show create table xxx desc table https://dev.mysql.com/doc/mysql-replication-excerpt/5.7/en/replication-features-memory.html

KDTS 实现MySQL至KingbaseES迁移实践

此文章以linux环境实践&#xff0c;KingbaseES一下使用KES代替。 KDTS KDTS工具安装KES时会一起安装&#xff0c;一般存在目录为&#xff1a;ClientTools目录下guitools文件夹中 启动 进入KDTS-WEB下bin目录&#xff0c;执行sh文件 cd /opt/Kingbase/ES/V8/ClientTools/guit…

70.【C语言】动态内存管理(重点)(3)

本文为数据结构打下基础 备注:数据结构需要掌握指针,结构体和动态内存管理 承接69.【C语言】动态内存管理(重点)(2)文章 目录 4.calloc函数 cplusplus网的翻译 提炼要点 使用 5.recalloc函数 使用说明 作用 调整内存空间的几种情况 1.原有空间之后有足够大的空间 …

自动猫砂盆是养猫新型智商税吗?测评2024年热门款智能猫砂盆分享

铲屎官们只要一察觉到猫主子拉屎&#xff0c;就要马上去铲掉&#xff0c;这不仅是为了猫砂盆中其他干净的猫砂&#xff0c;更是为了防止猫屎残留发臭&#xff0c;特别是便便这种东西&#xff0c;一旦放久了就很招虫子&#xff0c;家里出现这些虫子又要大扫除消杀&#xff0c;特…

使用Python接口自动化测试post请求和get请求,获取请求返回值

引言 我们在做python接口自动化测试时&#xff0c;接口的请求方法有get,post等&#xff1b;get和post请求传参&#xff0c;和获取接口响应数据的方法&#xff1b; 请求接口为Post时&#xff0c;传参方法 我们在使用python中requests库做接口测试时&#xff0c;在做post接口测试…

论文精读:基于概率教师学习的跨域自适应目标检测(ICML2022)

原文标题&#xff1a;Learning Domain Adaptive Object Detection with Probabilistic Teacher 中文标题&#xff1a;基于概率教师学习的域自适应目标检测 代码地址&#xff1a; GitHub - hikvision-research/ProbabilisticTeacher: An official implementation of ICML 2022 p…

计算机网络——ftp

在网络通信中&#xff0c;控制连接和数据连接是两种不同类型的连接&#xff0c;它们各自具有特定的功能和用途。 一、控制连接 定义与功能&#xff1a; 控制连接主要用于在通信双方之间传输控制信息&#xff0c;以建立、维护和终止数据连接。它负责协调和管理数据传输的过程&am…

图像数据增强库综述:10个强大图像增强工具对比与分析

在深度学习和计算机视觉领域&#xff0c;数据增强已成为提高模型性能和泛化能力的关键技术。本文旨在全面介绍当前广泛使用的图像数据增强库&#xff0c;分析其特点和适用场景&#xff0c;以辅助研究人员和开发者选择最适合其需求的工具。 数据增强的重要性 数据增强在深度学习…

架构设计笔记-7-系统架构设计基础知识

目录 知识要点 单选 案例分析 1.质量属性 / 管道过滤器 / 数据仓库风格 2.面向对象风格 / 控制环路风格 3.软件架构风格 / 架构风格选择 4.体系结构方案对比 5.面向对象风格 / 基于规则风格 6.解释器风格 / 管道过滤器风格 7.面向对象风格 / 解释器风格 8.软件架构复…

直击工博会 | 万物集与四大供应商强强联手,开启战略合作新纪元!

9月24日&#xff0c;第24届中国国际工业博览会在国家会展中心&#xff08;上海&#xff09;开幕。本届工博会设置数控机床与金属加工展、工业自动化展、节能与工业配套展、新一代信息技术与应用展等9大专业主题展&#xff0c;吸引28个国家和地区2600家企业参展。万物集作为参展…

Canal 扩展篇(阿里开源用于数据同步备份,监控表和表字段(日志))

1.Canal介绍 Canal把自己伪装成从数据库&#xff0c;获取mysql主数据库的日志&#xff08;binlog&#xff09;信息&#xff0c;所以要想使用canal就得先开启数据库日志 https://github.com/alibaba/canal Canal 主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量…

影刀RPA在智能客服上的运用

随着人工智能技术的不断发展&#xff0c;智能客服系统逐渐成为企业提升服务效率和质量的重要工具。影刀RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;作为一种模拟人类用户行为的技术&#xff0c;通过自动化执行重复性高、规则明确的任务…