web-数据双向绑定的一点疑惑

问题描述

数据双向绑定的一点疑惑

web的双据双向绑定到底是什么意思?我感觉只要dom正常,无论是接受用户数据,还是反馈用户显示,都能正常进行啊,这与数据双向绑定有什么关系?求解释!!

解决方案

双向绑定只是一种简化编程的风格。很多单页应用框架,比如angularjs或者knockoutjs之类,通过mvvm模式把数据和界面呈现分开。
一言以蔽之,这不是必须的概念,但是它可以简化你编程的思维。

解决方案二:

双向数据绑定其实就是将dom对象和JS对象绑定,两者双向互相影响。你可以不使用双向数据绑定,DOM肯定是没问题的。dom对象只要语法没问题,
都能正常工作。数据双向绑定无非是为了编辑方便,能快速开发,有空可以研究angular.js.这是近几年很火的一个框架,它的功能不只是双向数据绑定那么
简单。用起来很有意思。

时间: 2024-10-31 11:05:18

web-数据双向绑定的一点疑惑的相关文章

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

理解Angular数据双向绑定_AngularJS

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="c

JavaScript进阶之深入理解数据双向绑定

前言 谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js 源码,也在写源码解读的系列文章.和多数源码解读的文章不同的是,我会尝试从一个初级前端的角度入手,由浅入深去讲解源码实现思路和基本的语法知识,通过一些基础事例一步步去实现一些小功能. 本场 Chat 是系列 Chat 的开篇,我会首先讲解一下数据双向绑定的基本原理,介绍对比一下三大框架的不同实现方式

轻松实现javascript数据双向绑定_javascript技巧

双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传.这并不意味着从头开始实现它很难,

深入ASP.NET数据绑定(中)——数据双向绑定机理

在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理. 简单说来就是ASP.NET在运行时为我们完成了页面的动态编译,并解析页面的各种服务器端代码,包括数 据绑定语法.而数据绑定的语法虽是一些<%# %>代码块,在生成的代码中,仍然使用了服务器端控 件以及在DataBinding事件调用DataBinder.Eval方法来完成数据的绑定工作.所有的数据绑定模板控件都 使用了这样的机制来进行数据的单向绑定,在.NET 2.0中新增了双向的

AngularJS学习笔记(三)数据双向绑定的简单实例_AngularJS

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb

Vue.js每天必学之数据双向绑定_javascript技巧

Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

实例剖析AngularJS框架中数据的双向绑定运用_AngularJS

数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立起了文本输入框跟页面的双向绑定. 在这个语境里"双向"意味着如果view改变了属性值,model就会"看到"这个改变,而如果model改变了属性值,view也同样会"看到"这个改变.Angular.js 为你自动搭建好了这个机制.如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作. 要建立

使用Object.defineProperty实现简单的js双向绑定_javascript技巧

缘起 前几天在看一些流行的迷你mvvm框架(比如avalon.js. vue.js 这种较轻的框架,而非Angularjs.Emberjs这种较重的框架)的实现.现代流行的mvvm框架一般都会将数据双向绑定(two-ways data binding)做掉,作为框架自身的一个卖点( Ember.js 貌似是不支持数据双向绑定的.),而且每种框架双向数据绑定的实现方式都不太一致,比如Anguarjs内部使用的是 脏检查 ,而avalon.js内部实现方式的本质是设置 属性访问器 . 这里不打算具体