Vue入门2
v-model
原理:v-model本质上是一个语法糖。例如应用于输入框,就是value属性和input事件的合写。
作用:提供数据的双向绑定
- 数据变,视图跟着变 :value
- 视图变,数据跟着变 @input
注意:$event用于在模板中,获取事件的参数
<template><div class="app"><input v-model="msg" type="text"><br><input :value="msg1" @input="msg1 = $event.target.value" type="text"></div>
</template>
表单类组件封装$v-model简化代码
表单类组件 封装 实现子组件和父组件数据的双向绑定
- 父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据
- 子传夫:监听输入,子传夫值给父组件修改
父元素:
<template><div id="app">
<HelloWorld :citiyId="selectId" @changeId="selectId = $event"></HelloWorld></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {data(){return{selectId: '101'}},components:{HelloWorld}
}
</script><style></style>
子元素:
<template><div class="app"><select :value="citiyId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">深圳</option><option value="105">广州</option></select></div>
</template><script>
export default {props:{citiyId: String},methods:{handleChange(e){this.$emit('changeId',e.target.value)}}
}
</script><style></style>
父组件 v-model简化代码,实现子组件和父组件数据双向绑定
- 子组件中:props通过value接收,事件触发input
- 父组件中:v-model给组件直接绑数据
父组件:
<template><div id="app">
<HelloWorld v-model="selectId">
</HelloWorld></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {data(){return{selectId: '105'}},components:{HelloWorld}
}
</script><style></style>
子组件:
<template><div class="app"><select :value="value" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">深圳</option><option value="105">广州</option></select></div>
</template><script>
export default {props:{value: String},methods:{handleChange(e){this.$emit('input',e.target.value)}}
}
</script><style></style>
表单类基础组件封装思路
- 父传子:父组件动态传递prop数据,拆解v-model,绑定数据
- 子传父:监听输入,子传父值给父组件修改
本质:实现了实现子组件和父组件的双向绑定
v-model简化代码的核心步骤
- 子组件中:props通过value接收,事件触发input
- 父组件中:v-model给组件直接绑数据
.sync修饰符
作用:可以实现子组件与父组件数据的双向绑定,简化代码
特点:prop属性名,可以自定义,非固定为value
ref和$refs
作用:利用ref和$refs可以用于获取dom元素或组件实例
特点:查找范围:当前组件内(更精确稳定)
获取组件:
1.ref:
- 在vue模板中,可以使用ref特性来标识子组件或DOM元素
- 通过ref可以访问子组件实例或DOM元素
- 一般在组件内部使用ref来获取子组件实例或DOM元素,并只能在组件内部使用
<template><child-component ref="myComponent"></child-component>
</template><script>
export default {mounted() {this.$refs.myComponent.doSomething();}
}
</script>
2.$refs
- $refs是vue实例上的一个对象,用来存储所有拥有ref特性的子组件或DOM元素引用。
通过$refs可以直接访问子组件实例或DOM元素
<template><child-component ref="myComponent"></child-component>
</template><script>
export default {mounted() {this.$refs.myComponent.doSomething();}
}
</script>
调用组件内的方法:
<template><div><child-component ref="childRef"></child-component><button @click="callChildMethod">调用子组件方法</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {callChildMethod() {this.$refs.childRef.childMethod(); // 调用子组件的方法}}
}
</script>
vue异步更新,$nextTick
<template><div><p>{{ message }}</p><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {data() {return {message: '初始消息'};},methods: {updateMessage() {this.message = '更新后的消息';this.$nextTick(() => {// 在 DOM 更新完成后执行的操作console.log('DOM 更新完成');});}}
}
</script>
相关文章:
Vue入门2
v-model 原理:v-model本质上是一个语法糖。例如应用于输入框,就是value属性和input事件的合写。 作用:提供数据的双向绑定 数据变,视图跟着变 :value视图变,数据跟着变 input 注意:$event用于在模板中&…...
简介:CMMI软件能力成熟度集成模型
前言 CMMI是英文Capability Maturity Model Integration的缩写。 CMMI认证简称软件能力成熟度集成模型,是鉴定企业在开发流程化和质量管理上的国际通行标准,全球软件生产标准大都以此为基点,并都努力争取成为CMMI认证队伍中的一分子。 对一个…...
mysql的其他问题
1.MySQL数据库作发布系统的存储,一天五万条以上的增量,预计运维三年,怎么优化? a. 设计良好的数据库结构,允许部分数据冗余,尽量避免join查询,提高效率。 b. 选择合适的表字段数据类型和存储引擎…...
数据结构---复杂度(2)
1.斐波那契数列的时间复杂度问题 每一行分别是2^0---2^1---2^2-----2^3-------------------------------------------2^(n-2) 利用错位相减法,可以得到结果是,2^(n-1)-1,其实还是要减去右下角的灰色部分,我们可以拿简单的数字进行举例子&…...
【设计模式】设计原则和常见的23种经典设计模式
设计模式 1. 设计原则(记忆口诀:SOLID)【记忆口诀:单开里依接迪合(单开礼仪接地和)】 (1)单一职责原则(Single Responsibility Principle, SRP) ÿ…...
Spring Cloud Gateway自定义断言
问题:Spring Cloud Gateway自带的断言(Predicate)不满足业务怎么办?可以自定义断言! 先看Spring Cloud Gateway是如何实现断言的 Gateway中断言的整体架构如下: public abstract class AbstractRoutePred…...
智能测径仪在胶管行业的应用
关键字:胶管外径尺寸测量,胶管检测仪器,胶管外径检测,高温胶管外径检测,软硬胶管检测, 智能测径仪在家胶管行业中的应用主要体现在对胶管外径的精确测量和控制上。在胶管生产过程中,外径的大小直…...
vue自定义主题皮肤方案
方案一:CSS变量换肤(推荐) 利用css定义变量的方法,用var在全局定义颜色变量(需将变量提升到全局即伪类选择器 :root)然后利用js操作css变量,document.getElementsByTagName(‘body’)[0].style…...
iOS中使用schema协议调用APP和使用iframe打开APP的例子
大家好我是咕噜美乐蒂,很高兴又和大家见面了! 当调用自定义 URL scheme 或使用 iframe 打开应用程序时,可以采取以下详细步骤: 使用自定义 URL scheme 协议调用应用程序 1.首先,确认目标应用程序已经注册了自定义 U…...
2024.3.11
提示并输入一个字符串,统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 #include <iostream> #include<string> using namespace std;int main() {cout << "please input a string:" << endl;string str;g…...
Web服务器需要警惕的一些安全隐患
Web服务器需要警惕的一些安全隐患有哪些,今天德迅云安全就带您来了解下。熟悉了解了就知道怎么规避风险。不过无论是什么漏洞,都体现着安全是一个整体的真理,考虑Web服务器的安全性,必须要考虑到与之相配合的操作系统。 1.物理路径…...
MinGW-w64的下载与安装
文章目录 1 下载2 安装3 配置环境变量4 验证 1 下载 官网地址:https://www.mingw-w64.org/github地址:https://github.com/niXman/mingw-builds-binaries/releases windows下载 跳转github下载 版本号选择:13.2.0是GCC的版本号;…...
docker使用笔记
查看本机上所有镜像 docker images打包项目(打包完成后自动载入镜像) The command docker build -t search-server . you provided is a standard way to build a Docker image. The -t flag tags the resulting image, and search-server is the tag …...
新规正式发布 | 百度深度参编《生成式人工智能服务安全基本要求》
2024年2月29日,全国网络安全标准化技术委员会( TC260 )正式发布《生成式人工智能服务安全基本要求》(以下简称《基本要求》)。《基本要求》规定了生成式人工智能服务在安全方面的基本要求,包括语料安全、模…...
2024年AI辅助研发的趋势和影响
摘要:随着人工智能技术的迅猛发展,2024年AI辅助研发正成为科技界和工业界的瞩目焦点。本文将探讨AI辅助研发在各个领域的应用和影响,并展望2024年AI辅助研发的趋势。 引言 随着人工智能技术的不断进步,AI辅助研发正逐渐渗透到各…...
2k_Day1:今天是设计模式的大白话1
大白话: 原则有一点很难做到,就是定义好的类,只能加不能改(开放-关闭原则) 1.工厂模式就是,比如你定了一个汽车接口,然后小车、中车、大车都继承这个接口,这时,定一个汽…...
面试官:说说你对事件循环的理解
一、事件循环是什么 首先,JavaScript是一门单线程的语言,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环 在JavaScript中,所有的任务都可以分为 同步任务&#…...
【SpringCloud微服务实战03】Nacos 注册中心
一、Nacos安装 官方文档安装Nacos教程:Nacos 快速开始 这里安装的是1.4.7版本,安装之后访问http://127.0.0.1:8848/nacos 管理界面如下:(用户名:nacos,密码:nacos) 二、Nacos服务注册和发现 1、在父工程中配置文件pom.xml 中添加spring-cloud-alilbaba的管理依赖:…...
FLatten Transformer_ Vision Transformer using Focused Linear Attention
paper: https://arxiv.org/abs/2308.00442 code: https://github.com/LeapLabTHU/FLatten-Transformer 摘要 当将transformer模型应用于视觉任务时,自注意的二次计算复杂度( n 2 n^2 n2)一直是一个持续存在的挑战。另一方面,线性注意通过精心设计的映射…...
STM32CubeMX学习笔记17--- FSMC
1.1 TFTLCD简介 TFT-LCD(thin film transistor-liquid crystal display)即薄膜晶体管液晶显示器。液晶显示屏的每一个像素上都设置有一个薄膜晶体管(TFT),每个像素都可以通过点脉冲直接控制,因而每个节点都…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
