我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
双向绑定和单向数据流
双向绑定和单向数据流
什么是双向绑定?
双向绑定指的是:数据model的更新会触发可视层的更新,而可视层的更新会触发数据model的更新。
这就是v-model绑定input元素所做的事情。
单向数据流
单向数据流:数据model的更新触发可视层的更新,而可视层的更新和model不会有任何关系。
vue的几个概念
- vue是单向数据流,不是双向绑定
- vue的双向绑定不过是语法糖
- Object.defineProperty是用来做响应式更新的,和双向绑定没有关系。
v-model做了什么
v-model默认限制只能用在:input、select、textarea、components
也就是除了表单元素,还有可以用在组件上。
v-model实际上做了两件事:
- 默认绑定value属性
- 创建一个input事件,用于更新value
<input v-model="value" />
可以看成是
<input :value="value" @input="val=> (value=val)" />
vue会自动创建一个事件通过事件回调的方式更新数据,这就是所谓的双向绑定。
组件中的v-model
组件A
<template>
<div>
<select :value="phoneInfo" placeholder="区号"
@change="handleAreaCodeChange">
<option value="+86">+86</option>
<option value="+60">+60</option>
</select>
</div>
</template>
<script>
export default {
model: {
prop: "phoneInfo", // 默认 value
event: "change" // 默认 input
},
props:{
phoneInfo: String,
},
methods:{
handleAreaCodeChange(e){
this.$emit("change",e.target.value)
}
}
}
</script>
调用组件
<template>
<a v-model="value" />
</template>
可以看到组件上有一个model属性,他是一个对象,有两个属性:
- prop:表示要v-model默认要绑定的属性名,属性是props设置的,但是因为用了v-model,所以不用显式写出来
- event:表示v-model默认生成什么自定义事件来触发更新,比如我设置一个
event:"aabbccc"
,那么如果我要更新这个v-model绑定的数据,必须要emit触发这个指定的事件this.$emit("aabbcc",参数)
这样的话我们可以在自定义的任何函数里进行更新了,不必局限于元素给定的事件方法。
sync修饰符
v-model很好用,因为他缩减了我们书写的代码量,如果让你手动写一个事件更新的函数,那肯定头大,但是一个组件往往只能拥有一个v-model,所以,出现了sync修饰符。
sync就不多说了,本博客搜索sync就可以找到对应的文章。
sync实际上就是v-model的一个另一种存在形式,他的原理和v-model完全是相同的。
0
评论(0)