Vue学习之Vue组件的核心概念
组件是什么
vue组件就是一个个独立的小型的ui模块,整个大型的系统就是由一个个小型的UI模块拼接而成的
vue组件就是vue实例,通过new Vue函数来创建的一个vue实例,不同的组件只不过是options的不同,我们基本百分之90的开发工作都是围绕options的配置来进行的
三大核心概念
属性、事件、插槽
属性
属性例子:
export default {name: "PropsDemo",// 不推荐使用这种做法,不利于维护// props: ['name', 'type', 'list', 'isVisible'],// 建议使用下面的做法来声明属性(使用对象的形式声明)props: {name: String,type: {validator: function(type) {// 这个值必须匹配以下字符串中的一个return ['success', 'warning', 'danger'].includes(value);}},list: {type: Array,// 对象或数组默认值必须从一个工厂获取default: () => []},isVisible: {type: boolean,default: false},// 不建议使用onChange来命名,会和语法冲突onChange: {type: Function,default: () => {}}}
}
属性使用方法
Props.vue文件内容如下:
<template><div>name: {{ name }}<br>type: {{ type }}<br>list: {{ list }}<br>isVisible: {{ isVisible }}<br><button @click="handleClick">change type</button></div>
</template><script>
export default {name: 'PropsDemo',// 自动挂载属性inheritAttrs: false,props: {name: String,type: {validator: function(value) {return ["success", "warning", "danger"].includes(value);}},list: {type: Array,default: () => []},isVisible: {type: Boolean,default: false},onChild: {type: Function,default: () => {} }},methods: {handleClick() {// 不可以这么做,会报错, 因为我们的属性是单向数据流的,不允许在子组件内更改父组件传递过来的值// this.type = "warning";console.log("触发")console.log("子组件的type是:")console.log(this.type)this.onChild(123)}}
}
</script>
App.vue文件使用如下:
<div><Propsname="Hello Vue!":type="type":is-visible="false":on-child="handlePropChange"title="属性Demo"class="test1":class="['test2']":style="{ marginTop: '20px' }"style="margin-top: 10px;"/></div><script>
import Props from './components/Props.vue';export default {name: 'App',components: {TodoItem,Props,// Event},data() {return {msg: "hello geek!",info: '',list: [],type: "success",name: "事件名"}},methods: {handleClick() {if (this.info != '') {this.list.push(this.info)this.info = ''}},handlePropChange(param) {console.log(param)console.log("父组件")if (this.type === "success") {this.type = "warning"} else {this.type = "success"}console.log("父组件的type")console.log(this.type)},handleEventChange() {}}
}
</script>
子组件中对属性进行了封装,全部在Props
中,当父组件使用时,通过:属性名称
的方式进行引用和赋值
子组件定义了一个函数的属性:onChild
,在父组件使用这个属性时,也是和使用普通组件一样的方式,对onChild
进行赋值,只不过赋的是函数,是的,函数也是作为参数来存在
此函数可以接收参数,是否接收参数,接收什么参数,取决于子组件对此函数的定义,可以看到子组件中有一个 handleClick
方法,方法内部对onChild进行了调用,并传递参数123
,当父组件的handlePropChange
方法在接收函数时,也定义了一个参数用来接收(param
):
handlePropChange(param) {console.log(param)console.log("父组件")if (this.type === "success") {this.type = "warning"} else {this.type = "success"}console.log("父组件的type")console.log(this.type)}
事件
定义 Even.vue
文件
<template><div>name: {{ name || '--' }}<br><input :value="name" @change="handleChange"><br/><br/><div @click="handleDivClick"><button @click="handleClick">重制成功</button><button @click.stop="handleClick">重制失败</button></div></div>
</template><script>
export default {name: 'EventDemo',props: {name: {type: String}},methods: {handleChange(e) {console.log("改变1")this.$emit('change', e.target.value)console.log("改变2")console.log(e.target.value)},handleDivClick() {console.log("清空")this.$emit('change', '')},handleClick() {// 无论做什么都会失败!// e.stopPropagation();}}
}
</script>
父组件引用方法:
<Event :name="eventName" @change="handleEventChange"/>// 导入
import Event from './components/Event.vue';// 方法定义
handleEventChange(param) {console.log("父组件接收到change事件")if (param?.target?.value) {this.eventName = param?.target?.valueconsole.log(param?.target?.value)} else {this.eventName = ""}
}
子组件定义方法: handleChange
,通过this.$emit('change', e.target.value)
,调用change方法,传递当前输入框的值作为参数
父组件通过handleEventChange
函数进行接收,并声明一个参数:param
,通过param
中的param?.target?.value
来获取传递的参数值
插槽
组件文件夹内新建文件:Slot.vue
<template><div><slot /><slot name="title" /><slot name="item" v-bind="{ value: 'vue' }" /></div>
</template>
<script>
export default {name: "SlotDemo"
}
</script>
父组件引用部分:
<SlotDemo><template v-slot:title><p>title slot1</p><p>title slot2</p></template><template v-slot:item="props"><p>item slot-scope {{ props }}</p></template>
</SlotDemo>// js引用
import SlotDemo from './components/Slot.vue';
子组件通过定义name="title"
的插槽、name="item"
的插槽,父组件通过v-slot:title
和v-slot:item="props"
来引用子组件定义的插槽
总结
相关文章:
Vue学习之Vue组件的核心概念
组件是什么 vue组件就是一个个独立的小型的ui模块,整个大型的系统就是由一个个小型的UI模块拼接而成的 vue组件就是vue实例,通过new Vue函数来创建的一个vue实例,不同的组件只不过是options的不同,我们基本百分之90的开发工作都…...
Web自动化测试-Selenium语法入门到精通
前言 说到自动化测试,就不得不提大名鼎鼎的Selenium。Selenium 是如今最常用的自动化测试工具之一,支持快速开发自动化测试框架,且支持在多种浏览器上执行测试。 Selenium学习难度小,开发周期短。对测试人员来说,如果…...
封装axios及简单应用举例
第一步:具体封装工具: 在项目根目录下创建utils目录,然后在其中创建文件http.js: // 二次封装axios import axios from axios// 全局配置 // 根据环境变量区分接口默认地址(前缀) switch (process.env.NO…...
Django(3)-创建第一个数据模型-ORM映射
数据库配置 根目录下settings.py 。这是个包含了 Django 项目设置的 Python 模块。 通常,这个配置文件使用 SQLite 作为默认数据库。如果你不熟悉数据库,或者只是想尝试下 Django,这是最简单的选择。Python 内置 SQLite,所以你无…...
C++ vector
前言: vector的部分源码: (做过删除,留下关键信息) vector的使用 构造函数: 1 无参构造 vector<int> v1; 2 构造并初始化n个val vector<int> v2(5,1);3 拷贝构造 vector<int> v3…...
Spring+redis集成redis缓存
1、引入maven依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.7.0</version></dependency><dependency><groupId>org.springframework.data</groupId><art…...
聊聊springboot的启动事件
序 本文主要研究一下springboot的启动事件 SpringApplicationEvent org/springframework/boot/context/event/SpringApplicationEvent.java public abstract class SpringApplicationEvent extends ApplicationEvent {private final String[] args;public SpringApplicatio…...
jmeter HTTP请求默认值
首先,打开JMeter并创建一个新的测试计划。 右键单击测试计划,选择"添加" > “配置元件” > “HTTP请求默认值”。 在HTTP请求默认值中,您可以设置全局的HTTP请求属性,例如: 服务器地址:…...
CSS选择器-CSS3属性
CSS选择器-CSS3属性 持续更新… 1、CSS3的概念和优势 css3概念:是css的升级版本,新增加了一些模块 css3优点:完全向后兼容,可使用新的选择器和属性,能实现新的设计效果CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞…...
线性代数的学习和整理8:行列式相关
目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢?有:比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义:返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…...
java+springboot+mysql农业园区管理系统
项目介绍: 使用javaspringbootmysql开发的农业园区管理系统,系统包含超级管理员、管理员、用户角色,功能如下: 超级管理员:管理员管理;用户管理;土地管理(租赁)&#x…...
IDEA远程开发
IDEA远程开发 前期准备 IDEA的远程开发是在本地去操昨远程服务器上的代码,所以我们先需要准备一台服务器,在此我使用vmware虚拟出ubuntu-20.04.6的Server版本,以便后面演示。 Ubuntu的Java环境配置 JDK8 sudo apt install openjdk-8-jdkmaven sudo apt instal…...
Redis 工作总结
1.Redis是什么 Redis是互联网技术领域使用最为广泛的存储中间件,它是Remote Dictionary Service的首字母缩写,也就是远程字典服务。 2.Redis的用途? 2.1 计数器 2.2 缓存 2.3 分布式锁 2.4 消息中间件 3.Redis的数据类型 3.1 string&am…...
GO学习之 数据库(Redis)
GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…...
谈一谈浏览器与Node.js中的JavaScript事件循环,宏任务与微任务机制
JavaScript中的异步代码 JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作,例如AJAX,setTimeout等等;也有很多事件,例如用户触发的点击事件,鼠标…...
User Java bean的命名规范
Java Bean 是一种用于表示简单的、可重用的组件的规范。它是一个符合特定命名和约定的 Java 类,通常用于封装数据和提供访问方法。以下是关于 Java Bean 命名规范的一些准则: 类名: 类名应该使用驼峰命名法(Camel Case)…...
ajax和fetch的区别
ajax 和 fetch的相同点和区别是什么? 以前我们都用ajax去做请求, 但是原生的ajax不好用,我们会用$.ajax或者axios插件去请求,他们都是ajax的封装 最近出来个fetch是什么? 问到这里的时候,你就已经入坑了&am…...
java+springboot+mysql村务档案管理系统
项目介绍: 使用javaspringbootmysql开发的村务档案管理系统,系统包含超级管理员、工作人员角色,功能如下: 超级管理员:系统用户管理(工作人员管理);公开资料;会议记录&…...
windows查看/删除DNS缓存
一、查看DNS缓存 打开CMD,输入ipconfig/displaydns 二、删除DNS缓存 打开CMD,输入ipconfig/flushdns...
自动化测试之Junit
Junit引入注解参数化单参数多参数方法传参 测试用例执行顺序断言测试套件 Junit引入 Junit来编写和组织自动化测试用例,使用Selenium来实际模拟用户与Web应用程序的交互。也就是使用JUnit的测试功能来管理和运行Selenium测试。常见的做法是,使用JUnit作…...
Spring Boot 整合MyBatis-Plus
😀前言 本篇博文是关于Spring Boot 整合MyBatis-Plus的,希望你能够喜欢😊 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的…...
CC++ 常用技巧
C 中的C C 是面向过程的是把整个大程序分为一个个的子函数;C 是面向对象的是把整个程序划分为一个个的类。C 是完全兼容C 的,C 是C 的子集,C 是C 的超集。C 又对C 做了很多补充和提升,因此使用C 会比使用纯C 更方便。混用C和C&am…...
【AndroidStudio】屏蔽小米打印
使用小米手机调试时,会一直有notifyQueue load error的打印 在过滤器重添加过滤条件即可 -message:notifyQueue...
Tomcat的安装与介绍
首先我们先了解一下什么是服务器?什么是服务器软件? 什么是服务器?安装了服务器软件的计算机。 什么是服务器软件? 服务器软件是一种运行在服务器操作系统上,用于接收和处理客户端请求,并提供相应服务和资…...
说点大实话丨知名技术博主 Kirito 测评云原生网关
作者:徐靖峰 关注了阿里云云原生公众号,经常能看到 MSE-Higress 相关的推文,恰逢这次阿里云产品举办了一个 MSE-Higress 云原生网关的测评活动,借此机会体验了一把云原生网关的功能。 购买流程体验 购买网关时,页面明…...
时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测
时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | MATLAB实现SO-CNN-BiL…...
简述docker的网络模式
Docker 提供了多种网络模式,用于控制容器之间以及容器与主机之间的网络通信。以下是 Docker 的一些常见网络模式 briage模式: docker容器启动时默认就是该模式,在该模式下,docker容器会连接到一个名为docker0的虚拟以太网桥上,通…...
MySql-8.0.34 CentOS 安装命令记录
1、执行以下命令获取 glibc 版本,根据版本下载相应的MySQL安装包。 ldd --version 2、下载MySQL。 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.34-linux-glibc2.17-x86_64.tar.gz 3、解压 tar -xzvf mysql-8.0.34-linux-glibc2.17-x86_64.t…...
开发电子木鱼功德+1需要多少钱
冥想木鱼小程序是一种结合了冥想和科技的应用形式,为用户提供了随时随地进行冥想的便捷方式。开发一款高质量的冥想木鱼小程序需要综合考虑技术实现、冥想专业性和用户体验等多个方面。本文将详细介绍冥想木鱼小程序的开发过程,并探讨其中的专业性与思考…...
批处理中扩展解释%~的相关知识和用法,并给出示例和实际运行结果展示
批处理中扩展解释%~的相关知识和用法,并给出示例和实际运行结果展示 在批处理脚本中,%~是一个特殊的前缀,用于对参数和变量进行字符串处理。这个前缀后面可以跟着不同的字符,用于执行不同的操作。下面是一些常见的用法:…...
LA@向量组间的表示关系
文章目录 2个向量组间的表示关系向量组的相互表出向量组用另一个向量组表示👺线性表示的系数矩阵矩阵乘法与线性表出列向量组线性表示行向量组线性表示 向量组等价👺向量组等价的性质推论 等价矩阵与向量组等价的关系行等价矩阵的行向量组等价列等价矩阵…...
Mybatis与Spring集成
目录 一.Spring整合Mybatis 1.什么是Spring整合Mybatis 新建一个ssm 编辑 导入pom依赖 导入generatorConfig.xml 导入Spring-context.xml文件 导入Spring-mybatis.xml文件 自动生成Bookmapper.xml和Bookmapper文件 编写接口类:Bookbiz 编写接口实现类 …...
AMBA总线协议(0)——目录与传送门
一、AMBA总线协议 Arm高级微控制器总线架构(Advanced Microcontroller Bus Architecture,AMBA)是一种开放式标准片上互联规范,用于连接和管理片上系统(System on Chip,Soc)中的功能块。 AMBA是一种广泛用于…...
R语言快速生成三线表(1)
R语言的优势在于批量处理,常使用到循环和函数,三线表是科研文章中必备的内容。利用函数实现自动判断数据类型和计算。使用R包(table1)。 # 创建连续性变量 continuous_var1 <- c(1.2, 2.5, 3.7, 4.8, 5.9) continuous_var2 &l…...
【动手学深度学习】--20.目标检测和边界框
文章目录 目标检测和边界框1.目标检测2.边界框 目标检测和边界框 学习视频:物体检测和数据集【动手学深度学习v2】 官方笔记:目标检测和边界框 在图像分类任务中,我们假设图像中只有一个主要物体对象,我们只关注如何识别其类别…...
实验八 网卡驱动移植
【实验目的】 掌握 Linux 内核配置的基本方法,完成对网卡驱动、NFS 等相关功能的配置 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台交叉编译工具:arm-none-linux-gnueabi- 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&…...
Linux的Man Page知识记录
Man(short for manual) Page是Unix和Linux操作系统中的一个重要文档,提供命令、函数、系统调用等的详细介绍和使用说明。它是以纯文本的形式出现,通常在终端(terminal)中使用man命令访问。Man Page按照章节…...
RTSP/Onvif视频服务器EasyNVR安防视频云服务调用接口录像会被自动删除的问题解决方案
EasyNVR安防视频云服务是基于RTSP/Onvif协议接入的视频平台,可支持将接入的视频流进行全平台、全终端的分发,分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等。平台丰富灵活的视频能力,可应用在智慧校园、智慧工厂、智慧水利等…...
几个nlp的小项目(文本分类)
几个nlp的小项目(文本分类) 导入加载数据类、评测类查看数据集精确展示数据测评方法设置参数tokenizer,token化的解释对数据集进行预处理加载预训练模型进行训练设置训练模型的参数一个根据任务名获取,测评方法的函数创建预训练模型开始训练本项目的工作完成了什么任务?导…...
MFC——base编码和json数据
目录 1. JSON是什么 2. base64是什么 Base64是一种编解码算法 1. JSON是什么 JSON 是一种数据格式。采用完全独立于语言的文本格式, 因为易读, 易写, 易解析的特性成为理想的数据交换语言。主要有三种类型的值:简单值(字符串, 数字, 布尔, null), 对象, 数组。 长这样的数…...
SQL Server、MySQL和Oracle数据库分页查询的区别与联系
摘要:本文将通过一个现实例子,详细解释SQL Server、MySQL和Oracle这三种常见关系型数据库在分页查询方面的区别与联系。我们将提供具体场景下的SQL语句示例,并解释每个数据库的分页查询用法以及优化方法,帮助读者更好地选择适合自…...
Qt跨平台无边框窗口探索记录
一、前言 实现的效果为:通过黑色矩形框预操作,鼠标释放时更新窗口。效果图如下: 1.功能 1.1 已实现功能 8个方向的缩放标题栏拖动标题栏双击最大化/正常窗口窗口最小尺寸预操作框颜色与背景色互补多屏幕默认标题栏 1.2 待开发功能 拖动到…...
概念解析 | 电磁计算的新篇章:智能电磁计算
注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:智能电磁计算。 电磁计算的新篇章:智能电磁计算 随着人工智能的飞速发展,我们正处在一个信息爆炸的时代。各个领域&a…...
SpringBoot-1-Spring Boot实战:快速搭建你的第一个应用,以及了解原理
SpringBoot-1-Spring Boot实战:快速搭建你的第一个应用,以及了解原理 今日内容 SpringBootWeb入门 前言 我们在之前介绍Spring的时候,已经说过Spring官方(Spring官方)提供很多开源项目,点击projects,看到spring家族…...
Web服务器基础 http协议
文章目录 1.Web基础1.1MIME1.2 URI 和 URL1.2.1定义1.2.2两者的区别 2.静态资源和动态资源2.1 静态资源2.2 动态资源 3.HTTP协议3.1HTTP协议简介3.2HTTP协议的版本及区别3.2.1http协议版本3.2.2http1.0和1.1的区别 3.3HTTP请求报文3.4HTTP请求访问的过程1、建立连接:…...
采用 SVG 实现 web 绘图软件的技术分享
背景 前端技术 使用 svg.js 及全家桶的组件实现 svg 绘图的 web 软件。 MySql8 词语定义 图纸:在页面上绘制的内容整体整体叫做图纸,业务上图纸是具有重要业务意义的概念。 对象:图纸上的业务元素的最小概念。 难点-技术背景 当时遇到…...
Qt --- QTimer
在Qt开发界面的时候,非常多的时候都得使用定时器,定时器具体可以干什么呢?比如:控制时钟、定时改变样式、改变进度等。。。说到这里,经常使用QQ,而不同的时段都会显示不同的背景,我认为如果用Qt…...
计算机终端核心安全配置规范
声明 本文是学习 政务计算机终端核心配置规范. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 范围 本标准提出了政务计算机终端核心配置的基本概念和要求,规定了核心配置的自动化实现方法,规范了核心配置实施流程。 本标准适…...
【Spring Boot】什么是深度优先遍历与广度优先遍历?用Spring Boot项目举例说明。
深度优先遍历(Depth First Search,DFS)和广度优先遍历(Breadth First Search,BFS)是图的遍历算法。其中,深度优先遍历从某个起始点开始,先访问一个节点,然后跳到它的一个…...
MetaMask Mobile +Chrome DevTools 调试Web3应用教程
注:本教程来源网络,有兴趣的可以直接到这里查看。 写好了WEB3应用,在本地调试用得好好的,但是用钱包软件访问就报莫名的错,但是又不知道是什么原因,排查的过程非常浪费时间 。 因此在本地同一局域网进行调试…...