【vue核心技术实战精讲】1.9 Vue指令之v-model双向数据绑定

文章目录

• • 前言
• 本节内容
• • 1、`v-model`
  • • [v-model 双向的数据绑定](#v-model 双向的数据绑定)
    • • 双向数据流（绑定）
    • [v-bind 和 v-model 的区别?](#v-bind 和 v-model 的区别?)
    • • [input v-model="name"](#input v-model="name")
      • [input :value="name"](#input :value="name")
      • [v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他](#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 失效