精华内容
下载资源
问答
  • [vue] 什么双向绑定?原理是什么

    千次阅读 多人点赞 2021-02-28 18:51:37
    [vue] 什么双向绑定?原理是什么? 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get...

    [vue] 什么是双向绑定?原理是什么?

    双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值,获取触发get方法取值,并通过数据劫持发布信息.
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 . 在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值 . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中...

    小程序中的数据双向绑定    . 首先通过 bindinput 绑定文本框的输入事件    . 在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值    . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值    . 通过 this.setData 将文本框最新的  value 值 赋值给 动态绑定的value值 content  即可实现数据的双向绑定

    vue中的数据双向绑定    . 首先为文本框绑定 @input 监听文本框的输入事件    . 为文本框动态绑定 value 属性,其值是在data中定义的变量    . 在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值    . 将其重新获取到的 value 赋值给 value值动态绑定的那个变量

    区别:大体上区别不大,绑定事件不同,以及获取value值的具体方式不同,以及在小程序中设置data中的数据,需要调用 this.setData方法进行设置

    在vue中进行数据绑定后,当数据修改了会直接更新到视图上,但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法

    例:

    data:{
     arr:[{name:"小李"},{name:"小王"}],
     list:[{name:"小明"},{name:"小红"}]
    },
    setMsg(){  //该方法可以绑定到事件上也可以在onLoad里面调用  
      this.data.arr = this.data.list
       this.setData({
        arr:this.data.arr, // 简单粗暴直接修改
        ["list[0].name"]:"小张"  //也可以只修改里面的一项,
       })
    }
    展开全文
  • 双向绑定

    2021-07-10 04:36:55
    有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果...

    单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

    有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。

    什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定:

    70fa711be236fcf7adba0dd923faf77f.png

    在浏览器中,当用户修改了表单的内容时,我们绑定的Model会自动更新:

    2147794c992ee633d143ed6999077979.png

    在Vue中,使用双向绑定非常容易,我们仍然先创建一个VM实例:

    $(function () {

    var vm = new Vue({

    el: '#vm',

    data: {

    email: '',

    name: ''

    }

    });

    window.vm = vm;

    });

    然后,编写一个HTML FORM表单,并用v-model指令把某个和Model的某个属性作双向绑定:

    我们可以在表单中输入内容,然后在浏览器console中用window.vm.$data查看Model的内容,也可以用window.vm.name查看Model的name属性,它的值和FORM表单对应的是一致的。

    如果在浏览器console中用JavaScript更新Model,例如,执行window.vm.name='Bob',表单对应的内容就会立刻更新。

    除了可以和字符串类型的属性绑定外,其他类型的也可以和相应数据类型绑定:

    多个checkbox可以和数组绑定:

    Chinese

    English

    French

    对应的Model为:

    language: ['zh', 'en']

    单个checkbox可以和boolean类型变量绑定:

    对应的Model为:

    subscribe: true; // 根据checkbox是否选中为true/false

    下拉框绑定的是字符串,但是要注意,绑定的是value而非用户看到的文本:

    Beijing

    Shanghai

    Guangzhou

    对应的Model为:

    city: 'bj' // 对应option的value

    双向绑定最大的好处是我们不再需要用jQuery去查询表单的状态,而是直接获得了用JavaScript对象表示的Model。

    处理事件

    当用户提交表单时,传统的做法是响应onsubmit事件,用jQuery获取表单内容,检查输入是否有效,最后提交表单,或者用AJAX提交表单。

    现在,获取表单内容已经不需要了,因为双向绑定直接让我们获得了表单内容,并且获得了合适的数据类型。

    响应onsubmit事件也可以放到VM中。我们在

    元素上使用指令:

    其中,v-on:submit="register"指令就会自动监听表单的submit事件,并调用register方法处理该事件。使用.prevent表示阻止事件冒泡,这样,浏览器不再处理

    的submit事件。

    因为我们指定了事件处理函数是register,所以需要在创建VM时添加一个register函数:

    var vm = new Vue({

    el: '#vm',

    data: {

    ...

    },

    methods: {

    register: function () {

    // 显示JSON格式的Model:

    alert(JSON.stringify(this.$data));

    // TODO: AJAX POST...

    }

    }

    });

    在register()函数内部,我们可以用AJAX把JSON格式的Model发送给服务器,就完成了用户注册的功能。

    使用CSS修饰后的页面效果如下:

    ea0740dce035bafa6ae5dc5064d0f02d.png

    参考源码

    展开全文
  • Angular 双向绑定

    2021-01-18 10:25:39
    Angular10教程--2.3 双向绑定双向绑定大致可以分成两种类型:一、普通组件的双向绑定二、表单中的双向绑定[(ngModel)]单独使用表单元素在标签中使用总结: 前面我们了解了属性绑定、事件绑定以及输入和输出的使用,...

    前面我们了解了属性绑定、事件绑定以及输入和输出的使用,是时候了解双向绑定了。本节,我们将利用@Input()@Output()来了解下双向绑定。
    原文阅读…

    定义:双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实,也就是对@Input()@Output()的一种简化)

    双向绑定大致可以分成两种类型:

    一、普通组件的双向绑定

    这个类型的双向绑定可以发生在任何组件任何DOM元素上,下面我们通过一个实例来具体认识一下。

    src/app/components/下面创建一个sizer组件作为子组件:

    // src/app/components/sizer/sizer.component.html
    <div>
      <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
      <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
      <label [style.font-size.px]="size">FontSize: {{size}}px</label>
    </div>
    // src/app/components/sizer/sizer.component.ts
    ...
    export class SizerComponent implements OnInit {
      public size = 14;
      // ...
      dec() {
        this.size++;
      }
      inc() {
        this.size--;
      }
    }
    

    页面将是这样,且按钮功能实现:

    在这里插入图片描述
    但是,这并不是我们想要的结果,我们需要从父组件传入size,从而让sizer组件改变字体大小。并且,通过sizer组件的按钮点击事件,将改变后的size的值回传给父组件。

    接下来我们将使用前面的知识来改造代码(也就是双向绑定的原理介绍):

    // src/app/app.component.html
    // 下面的$event就是子组件传过来的值(必须是$event)
    <app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
    <div [style.font-size.px]="appFontSize">子组件修改后的FontSize: {{appFontSize}}</div>
    
    // src/app/app.component.ts
    ...
    export class AppComponent {
      appFontSize = 14;
    }
    
    // src/app/components/sizer/sizer.component.ts
    ...
    export class SizerComponent implements OnInit {
      // 创建输入属性size,为number或字符串类型
      @Input() size: number | string;
      // 创建自定义事件onSizeChange,需要一个number类型的参数
      @Output() onSizeChange = new EventEmitter<number>();
      ....
      dec() {
        this.resize(-1);
      }
      inc() {
        this.resize(1);
      }
      resize(step: number) {
        // 设置字体大小为12~40之间的值
        this.size = Math.min(40, Math.max(12, +this.size + step));
        // 通过事件传值
        this.onSizeChange.emit(this.size);
      }
    }
    

    同样实现了我们想要的效果:

    在这里插入图片描述
    但是,这样是不是太麻烦了一点呢?下面,我们的双向绑定正式出场:

    Angular 的双向绑定语法是方括号和圆括号的组合 [()][] 进行属性绑定,() 进行事件绑定。修改下面代码:

    // src/app/app.component.html
    <app-sizer [(size)]="appFontSize"></app-sizer>
    <div [style.font-size.px]="appFontSize">子组件修改后的FontSize: {{appFontSize}}</div>
    
    // src/app/components/sizer/sizer.component.ts
    ...
    export class SizerComponent implements OnInit {
      @Input() size: number | string;
      // 修改事件名,********必须是:属性名 + Change 形式*********
      @Output() sizeChange = new EventEmitter<number>();
      ....
      resize(step: number) {
        this.size = Math.min(40, Math.max(12, +this.size + step));
        this.sizeChange.emit(this.size);
      }
    }
    

    会发现,功能没有受影响。

    二、表单中的双向绑定[(ngModel)]

    根据之前基本的双向绑定知识,[(ngModel)]语法可拆解为:

    1.名为ngModel的输入属性

    2.名为ngModelChange的输出属性

    单独使用表单元素

    首先需要引入FormsModule这个内置模块:

    // src/app/app.module.ts 
    import {FormsModule} from '@angular/forms';
    ...
    @NgModule({
      // ...
      imports: [
        // ...
        FormsModule
      ],
      // ...
    })
    

    组件中使用:

    <!-- src/app/app.component.html -->
    <input type="text" [(ngModel)]="iptVal">
    <p>input value is {{iptVal}}</p>
    

    上面这行代码相当于:

    <input [value]="iptVal" (input)="iptVal = $event.target.value" />
    

    这其实很简单的,类似vue里面的写法。

    在标签中使用

    将代码放入<form>标签内:

    <!-- src/app/app.component.html -->
    <form>
      <input type="text" [(ngModel)]="iptVal2">
      <p>form 中input value is {{iptVal2}}</p>
    </form>
    

    但是,我们会发现浏览器会报错:

    在这里插入图片描述
    报错意思说,在form表单中使用ngModel的话,我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"

    修改代码:

    <!-- src/app/app.component.html -->
    <form>
      <input type="text" [(ngModel)]="iptVal2" name="appIput2">
      <p>form 中input value is {{iptVal2}}</p>
    </form>
    

    或者:

    <!-- src/app/app.component.html -->
    <form>
      <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
      <p>form 中input value is {{iptVal2}}</p>
    </form
    

    或者:

    <!-- src/app/app.component.html -->
    <form>
      <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: 'appIput2'}">
      <p>form 中input value is {{iptVal2}}</p>
    </form
    

    在表单元素 中使用双向绑定就是这么简单了,注意引入FormsModule模块就行。

    总结:

    1、双向绑定的原理其实就是@Input()@Output()结合使用,需要注意语法是[(属性名)]=“父组件中一个属性名”,先绑定输入,再绑定输出;

    2、在form表单中使用双向绑定,应首先引入FormsModule这个内置模块,然后在input元素上添加name

    欢迎关注我的公众号,公众号将第一时间更新angular教程:
    在这里插入图片描述

    展开全文
  • 我们常见的架构模式有 MVC、MVP、MVVM模式,目前前端框架基本上都是采用 MVVM 模式实现双向绑定,Vue 自然也不例外。但是各个框架实现双向绑定的方法略有所不同,目前大概有三种实现方式。 发布订阅模式 Angular 的...
  • iView table 的双向绑定

    2021-11-24 10:01:21
    默认下 table 包含 input 虽然有 v-model 但不是双向绑定的,不会同步到 list 数组的中的数据。需要自己通过事件同步修改。有两种方式实现,基于 render 渲染函数和 template slot 标签。 /** * 列配置内容较多,故...
  • v-model 数据双向绑定

    2021-07-02 00:38:02
    v-model 数据双向绑定v-model只能在表单元素中使用Documentv-bind绑定v-model绑定var vm = new Vue({el: "#app",data: {msg: "123"},method: {}});简易计算器实例Document+-*/var vm = new Vue({el: "#app",data: {...
  • Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进行单向绑定或者双向绑定。 单向绑定 把Model绑定到View,当更新Model时View就会自动更新。因此,我们不需要再通过原声JavaScript代码进行额外的DOM...
  • vue的双向绑定的原理是什么?(2020/01/12) 前台UI数据改变实时反应在ViewModel上,后会通过ajax传到后台model上 后台改变的也会通过ViewModel响应到前台UI上 当data 有变化的时候它通过Object.defineProperty...
  • 因此接下去我们执行以下3个步骤,实现数据的双向绑定: 实现步骤: (1)第一个就是首先我们需要对数据进行劫持监听,所以我们需要先设置实现一个监听器Observer,用来劫持并监听所有的属性,一旦属性发生变化,就...
  • 单向绑定当我们改view的时候,model是不会改变的。
  • vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。 var vm = new Vue({ data:...
  • 自从前端大火了以后,UI数据双向绑定的ui框架愈发流行。作为前菜鸡安卓开发,我也是最近才知道谷歌还有推 Jetpack Compose 作为UI框架;其最大的亮点就是 数据双向绑定 和 声明式UI。而作为现Qt开发,看到声明式UI的...
  • vue双向绑定原理

    2021-06-10 16:34:20
    当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需要,viewModel 会通过ajax等方法将改变的数据 传递给后台model同时从后台model获取过来的数据,通过vm将值响应到前台UI上双向绑定原理v...
  • 我的方法是使用Handles延迟notifyPropertyChanged方法调用.以这种方式,当用户键入时,代码不运行,然后在用户停止键入最后一个字符后2.5秒,将调用notificationPropertyChanged.视觉效果很酷,用户可以随意编写数字....
  • input双向绑定详解

    2021-04-21 14:13:28
    script> body> html> 2.vue 2.0利用object.defineProperty来实现双向数据绑定原理 简单介绍一下Object.definePropety 在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,...
  • 问题描述包含EditText的自定义View需要实现双向绑定,即在用户输入时,对应的Observable变量能够实时获取最新值。实现方案适用BindingAdapter实现EditText文本的set方法。在赋值前需要判断是否与原值相等,如果相等...
  • 我只是试图绑定一个Integer和一个String属性.经过一些谷歌搜索后,应该可以使用以下两种方法之一:> public static void bindBidirectional(Property stringProperty,属性otherProperty,StringConverter转换器)>...
  • 文档: ...简易双向绑定 <input model:value="{{value}}" /> 注意:只能绑定一个单一字段 自定义双向绑定 // custom-component.js Component({ properties: { myValue: String }, methods: {
  • Vue 是如何实现数据双向绑定的? Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据 Vue 主要通过以下 4 个步骤来实现数据双向绑定的: 实现⼀个数据监听器 Observer: 对数据对象进⾏遍历,能够对数据...
  • content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />(function (hasTitle, psdWidth) {psdWidth = psdWidth || 640;...
  • 双向绑定则是,数据(model)变化主动触发ui(view)变化,同时ui(view)变化主动触发数据(model)变化,当然这里的ui变化指定表单中的用户输入,可通俗的理解为:在单向绑定的基础上给可输入元素(input、textarea等)...
  • Databinding的双向绑定

    2021-03-19 14:49:00
    什么双向绑定呢? 下面是Data Binding的基本使用: <layout ...> <data> <variable type="com.example.myapp.User" name="user"/> </data> <RelativeLayout ...> <...
  • vue数据双向绑定原理

    2021-02-03 14:11:00
    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 结果 我们可以看到属性a有两...
  • 双向绑定的原理

    2021-07-05 19:33:56
    VUE数据的双向绑定是通过数据劫持和观察者模式(订阅者模式)的方式来实现的。 (1)、数据劫持:vue2.x使用Object.defineProperty(); Vue3使用的是proxy 当你把一个普通的 JavaScript 对象(json)传入 Vue 实例...
  • ionic4 双向绑定

    2021-08-30 10:03:58
    1、input双向绑定 <inputclass='margin-left-xs'placeholder="发表想法"type="text"[value]="content"(input)="content=$event.target.value"/> content='1111'; submit(){ console.log(this.c...
  • 但Vue中, props 是单向数据绑定,虽然在Vue 1.0版本中,通过 .sync 能实现双向数据绑定。但 .sync 在几个版本中被移除,尽管在2.3版本重新引入 .sync 修饰符,可这次引入只是作为一个编译时的语法糖存...
  • 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化。这也算是vue的精髓之处了。单项数据绑定是使用状态管理工具(如redux...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 134,323
精华内容 53,729
关键字:

双向绑定是什么意思