5-Vue指令之双向数据绑定 V-model

喂你吃一口 v-model 的语法糖

1. 什么是双向绑定?

Vue框架很核心的功能就是双向的数据绑定。
双向是指:HTML 标签数据绑定到 Vue对象,另外反方向数据也是绑定的。

通俗点说就是,Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化。

这样以来,就彻底变革了之前 Dom 的开发方式,之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代,都是 dom 变化后,触发 js 事件,然后在事件中通过 js 代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新 HTML 标签,异常的繁琐。

有了 Vue 这种双向绑定,让开发人员只需要关心 json 数据的变化即可,Vue 自动映射到 HTML 上,而且HTML 的变化也会映射回 js 对象上,开发方式直接变革成了前端由数据驱动的 开发时代,远远抛弃了Dom开发主导的时代了。

5-Vue指令之双向数据绑定 V-model_第1张图片

  • v-model 指令用来在 ) 并实现效果,用 v-model 绑定一下,就实现了数据绑定

    你应该已经发现了,我们一般通过 javascript 在组件中的 data 选项中声明初始值

    v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例中的数据来作为具体的值

    下面我们用 v-model 来做一个表单

     
    'app'> type="text" v-model = 'data.name'> 姓名: {{ data.name }}
    type="radio" id='man' value = '男' v-model = 'data.gender'> type="radio" id='male' value = '女' v-model = 'data.gender'> 性别: {{ data.gender }}
    type="checkbox" id='book' value = '阅读' v-model = 'data.interest'> type="checkbox" id='swim' value = '游泳' v-model = 'data.interset'> type="checkbox" id='song' value = '唱歌' v-model = 'data.interset' > type="checkbox" id = 'game' value = '玩游戏' v-model = 'data.interset'>
    身份:{{ data.identity }}

你可能感兴趣的:(Vue)