美文网首页
双向绑定和单向绑定

双向绑定和单向绑定

作者: 放风筝的小小马 | 来源:发表于2017-09-17 22:53 被阅读307次

假设现在页面(View层)上有一个input 标签,如果我们要获取到input中的value,那么必须使用JS(Model层)为input绑定事件来监听它,从而获取input中输入的数据;当要设置input的值时,也是通过JS来设置,这就是单向绑定

双向绑定

双向绑定就是我不需要为input绑定事件,对它进行监听,input的变化会实时反应到我这儿;

用Vue.js中的v-model来添加双向绑定:
<input v-model="xxx">
其实上面的代码等价于下面的:
<input :value="xxx" @input="xxx = $event.target.value">
也就是说:

双向绑定 = 单向绑定 + UI事件监听

JSbin演示

参考:vue.js中的v-model

双向绑定与单向绑定有优缺点

单向绑定:使得数据流也是单向的,对于复杂应用来说这是实施统一的状态管理(如redux)的前提。

双向绑定:在一些需要实时反应用户输入的场合会非常方便(比如多级联动菜单)。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为我们不知道状态什么时候发生改变,是造成的改变,数据变更也不会通知我们

注意,Vue 虽然通过 v-model 支持双向绑定,但是如果引入了类似redux的vuex,就无法同时使用 v-model

相关文章

  • 单项数据流与双向数据绑定

    单向绑定 vs 双向绑定 单双向绑定,指的是View层和Model层之间的映射关系。 react采取单向绑定,如图...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • Vue和React数据绑定对比

    在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全...

  • vue中事件绑定的原理

    vue中事件的绑定机制分为两种:单向数据绑定和双向数据绑定1.单向数据绑定用v-bind,可以缩写为“:”2.双向...

  • SAPUI5 (38) - OData Model 的单向绑定和

    单向绑定和双向绑定概述 所谓的单向绑定 (one-way binding),是指 OData model 与 UI...

  • VUE的数据绑定

    数据绑定分为单向绑定、双向绑定。 单向绑定 model绑定到view,声明式绑定. 1. 用两个大括号{{}}...

  • vue 之 input 的value绑定

    vue双向绑定值 vue单向绑定值

  • 双向绑定和单向绑定

    Vue 的双向绑定(也是 Angular 的双向绑定)有这些功能: 只要 JS 改变了 view.number 或...

  • 双向绑定和单向绑定

    假设现在页面(View层)上有一个input 标签,如果我们要获取到input中的value,那么必须使用JS(M...

  • [转] DataBinding 数据绑定

    数据绑定分为单项绑定和双向绑定两种。单向绑定上,数据的流向是单方面的,只能从代码流向 UI;双向绑定的数据是双向的...

网友评论

      本文标题:双向绑定和单向绑定

      本文链接:https://www.haomeiwen.com/subject/podfdxtx.html