vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

25、v-model详解

(1)v-model原理

1)原理:

v-model本质上是一个语法糖,比如:在应用于输入框时,就是value属性与input事件的合写。

2)作用
①数据变,视图变
②视图变,数据变

注:在模版中,$event用于获取时间的形参

3)示例:

(2)表单类组件封装与v-model简化代码

1)父传子:数据应该是父组件props传过来的,v-model拆解绑定数据
2)子传父:监听输入,子传父传值给父组件修改

简言之:利用父子通信实现v-model的效果(子组件不能使用v-model,因为数据是父组件的)

3)示例

初始:

①父传子

效果:

②子传父

初始(续上):

结果:

(3)父组件使用v-model简化代码,实现父组件和子组件数据的双向绑定

1)子组件中:props通过value进行接收,事件触发input
2)父组件中:v-model给组件直接绑数据(:value+@input)

原来:

用v-model:

3)效果(和原来一样,代码用v-model进行简化):

26、sync修饰符

(1)作用:可以实现子组件与父组件数据的双向绑定,简化代码

(2)特点:prop属性名,可以自定义,非固定值value

(3)适用场景:封装弹框类的基础组件,visible属性,true显示,false隐藏

(4)本质::属性名+@update:属性名的合写

(5)示例:

1)父传子

父组件:

2)子传父

子组件:

父组件:

③效果:

27、ref和$refs获取dom组件

(1)作用:利用ref和$refs可以用于获取dom元素,或组件实例

(2)特点:查找范围,当前组件内(更精确稳定)

(3)语法:

1)获取dom:
①给目标标签添加ref属性
②恰当时机,通过this.$refs.属性名,获取目标标签
2)获取组件
①给目标标签添加ref属性
②恰当时机,通过this.$refs.属性名,获取目标组件,就可以调用组件里的方法
③示例:

父组件通过ref属性获取子组件的值,并重置其值

代码:

结果:

获取:

28、Vue异步更新和$nextTick

(1)要点:通过$nextTick解决Vue异步更新问题

(2)示例:

点击之后,改变为输入框,并获取焦点

------>

源代码:

1)直接使用this.&refs.ipt添加焦点,发现不仅未获取焦点,并报错(Vue异步更新,dom更新未完成)

2)使用setTimeout,可以解决问题,但时间估计不一定准确

3)使用 this.$nextTick,发现几乎没有延迟

相关推荐
定栓4 分钟前
Webpack迁到Vite第二节:JSX 到 Render 函数
vue.js·webpack·vite
小羊没烦恼!20 分钟前
T-SQL查询高级—SQL Server索引中的碎片和填充因子
开发语言·前端·javascript·数据库·后端·python·web安全
Liu.77439 分钟前
Vue3 中如何使用 GET 请求传递复杂参数
vue.js·vue3
定栓1 小时前
Webpack迁到Vite第一节:模块系统迁移:require → import
运维·前端·webpack
小熊在忙fpga1 小时前
N32G430芯片的flash表示
前端·javascript·html
Data analyse4561 小时前
App埋点版本兼容的字段迁移校验
大数据·运维·服务器·前端·数据库·数据分析
NC 王炸1 小时前
AI 做的便签,换个浏览器就没了?加一个导出按钮,把数据带走
javascript·ai编程·数据备份·localstorage·txt导出
todoitbo1 小时前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
会灭火的程序员1 小时前
SuperMap AgentX Server智能体接入WEB应用技术文档
前端·supermap·agentx·agentx server
CRMEB1 小时前
商品 SKU 设计,从简单规格到多规格踩过什么
java·前端·数据库·开源