我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定
vue中绑定一个属性使用的是v-bind:
指令,简写形式为:
;使用该指令可以绑定data中的key,从而获取它对于的value值,但是这个绑定它是单向的,如果你元素本身修改了内容,并不会影响到data中对于的值。
在与表单的交互中只有单向绑定是不实用的,于是有了双向绑定,我们可以给一个input表单元素通过v-model双向绑定一个key,并且当我们修改input中的内容时,绑定的值也会跟着发生变化。
其原理也非常简单。
v-model绑定:
<input type="text" v-model="name" />
v-mode原理
<input type="text" :value="name" @input="name=$event.target.value" />
v-model实际上就做了两件事:
- 默认绑定value属性
- 添加input事件
当input的内容发生改变就会触发input事件,input事件再将绑定的值进行更新。
知道这两个步骤,我们就可以管中窥豹,了解到很多组件用v-model绑定数据是为什么?
组件使用v-model绑定数据
假设我们有一个子组件,名为<app-input>
;它是一个用户账号的表单控件,利用v-model绑定一个name属性。
<app-input v-model="name"></app-input>
data: {
name: ''
}
组件内部
<input type="text" :value="value" @input="setName">
props:['value'],
methods: {
setName(e){
this.$emit('input',e.target.value);
}
}
组件通过props设置value接受v-model默认绑定的value属性传来的值,然后通过input事件触发setName方法,这个方法触发v-model默认绑定的input事件,并将修改的值传给它,v-model的input事件再去修改name的值。
这样就可以少些一些代码,不用每次在调用组件的html元素上写一个props,再写一个自定义事件。
以上就是关于v-model的解析。
0
评论(0)