【vue核心技术实战精讲】1.9 Vue指令之v-model双向数据绑定
文章目录
- 前言
- 本节内容
- 1、`v-model`
- v-model 双向的数据绑定
- 双向数据流（绑定）
- v-bind 和 v-model 的区别?
- input v-model="name"
- input :value="name"
- v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
- 示例
- 效果
前言
上节,我们学习了
- Vue指令之
v-on事件处理、事件修饰符、v-for列表渲染 点击进入上一节
本节内容
- Vue指令之v-model双向数据绑定
1、v-model
v-model 双向的数据绑定
双向数据流（绑定）
- 页⾯面改变影响内存(js)
- 内存(js)改变影响⻚页⾯面
v-bind 和 v-model 的区别?
input v-model=“name”
- 双向数据绑定 ⻚页⾯面对于input的value改变，能影响内
存中name变量量 - 内存js改变name的值，会影响⻚页⾯面重新渲染最新值
input :value=“name”
- 单向数据绑定 内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
示例
<div id='app'><h3>{{num}}</h3><button v-on:click.once="handleClick">+1</button><div class='box' :class='{active:isActive}'></div><button @click='changeClick'>切换</button><input v-on:keyup.up="submit"></div>
效果
- webstorm 自带的浏览器
keyCode 失效