精华内容
下载资源
问答
  • M model V view MVVM model改变会影响视图view,view视图改变反过来影响 model 转载于:https://www.cnblogs.com/divtab/p/11454807.html
    • M model
    • V view
    • MVVM model改变会影响视图view,view视图改变反过来影响 model

    转载于:https://www.cnblogs.com/divtab/p/11454807.html

    展开全文
  • 文章目录前言一、双向绑定是什么?二、实现双向绑定简易Demo1.编写Demo1.html2.编写Demo2.html 前言 学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定...


    前言

    学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定的理解.


    一、双向绑定是什么?

    要说起双向绑定, 必须先谈一下单向绑定。所谓的单向绑定就是, 把Model绑定到View,就是我们之前MVC实现的方式。当Model更新时,View也会自动更新。 那么双向绑定的意思就是,把Model绑定到View的同时,也将View绑定到Model上,程序员用代码更新Model时,View就会自动更新,反之,浏览器的用户更新了View,Model的数据也自动被更新了。

    这样说起来,可能还不是很理解,看以下这个简易的Demo以及它的运行结果,就可以初步了解什么是双向绑定了。

    二、实现双向绑定简易Demo

    1.编写Demo1.html

    代码如下:

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <div id="lubenwei">
        <!--重要! 这里v-model里面的message, 是绑定了type="text" 和 后面的{{message}}  和 下面script标签里
        的 vm的属性message-->
        输入的文本: <input type="text" v-model="message"> {{message}}
    
    </div>
    
    <script>
        var vm = new Vue({
            el:"#lubenwei",
            data: {
                message: "卢本伟牛比"
            }
        });
    </script>
    </body>
    </html>
    

    看上面的代码。代码构成非常简单,引入Vue.js之后,只有两步。
    一是id为“lubenwei”的<div>标签, 一个是<div>对应的Script标签。
    下图是代码运行后的结果
    在这里插入图片描述

    ① 文本输入一些东西, 后面就跟着显示一些东西。这代表了:
    (浏览器的用户更新了View,Model的数据也自动被更新了, 不信你看一下控制台,输入vm.message, 发现Model的数据确实被更新了)
    ② 同时你在浏览器的控制台改动后面显示的东西, 输入框里面的东西也会变。这代表了:
    (当程序猿用代码更新了Model时,View也会自动更新)
    在这里插入图片描述
    有点感觉了吗,这就是最简单的双向绑定的事例。
    下面再写一个稍微复杂一点的。

    2.编写Demo2.html

    代码如下:

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <!--Demo2 和Demo1 的需求和使用方法差不多, 只不过是变成了下拉框-->
    <div id="lubenwei2">
        <!--重要! 这里v-model里面的selected, 是绑定了option里面的值 和 后面的{{selected}}  和 下面script标签里的 vm的属性selected-->
         下拉框:
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>{{selected}}</span>
    </div>
    <script>
        var vm2 = new Vue({
            el:"#lubenwei2",
            data: {
                selected:'默认值'
            }
        });
    
    </script>
    </body>
    </html>
    

    这个代码和Demo1的实现场景差不多, 只不过是从文本框变成了下拉框。

    看到这里是不是有点蒙 vue是怎么知道应该绑定option里面的值呢 还有上文的type=“text”, vue是怎么判断的呢?
    其实是自动的:

    你可以用v-model 指令在表单<input><textarea><select> 元素上创建双向数据绑
    定。它会根据控件类型自动选取正确的方法来更新元素。((((重点!!!))))
    尽管有些神奇,但v-model本质上不过是语法糖。负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

    注意: v-model 会忽略所有表单元素的value、checked、 selected 特性的初始值而总是将
    Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
    (这里的文字引用自 公众号 狂神说)

    看完了这两个Demo,我们就对Vue中的双向绑定有了一个初步的了解。当然在实际开发中双向绑定的应用远不止于此,本文只是抛砖引玉,希望能帮助大家快速入门。

    展开全文
  • web的双据双向绑定到底是什么意思?我感觉只要dom正常,无论是接受用户数据,还是反馈用户显示,都能正常进行啊,这与数据双向绑定有什么关系?求解释!!
  • 1.mvvm 的意思是model+view+viewModel 即 数据模型model,viewModel连接两个 2.区别? vue数据驱动,通过数据来显示视图层而不是节点操作。仅仅需要专注数据,只要数据改变,所有的视图就会自己跟随着改变 jq...

    :vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

    第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

    第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

    第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
    1、在自身实例化时往属性订阅器(dep)里面添加自己
    2、自身必须有一个update()方法
    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

    第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
    ————————————————
    版权声明:本文为CSDN博主「一晌贪欢i」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_27674439/article/details/99449197

    展开全文
  • v-model是什么? v-model是vue的model层的data属性,实现输入值与数据域的双向绑定; 如何使用? 在需要用户输入或者选择值的时候,可使用v-model,其值要与data数据域中的属性值对应,这样就能实现绑定; 双向绑定...

    v-model是什么?

    v-model是vue的model层的data属性,实现输入值与数据域的双向绑定;

    如何使用?

    在需要用户输入或者选择值的时候,可使用v-model,其值要与data数据域中的属性值对应,这样就能实现绑定;

    双向绑定的实现:

    页面显示的语法糖:<input v-model="msg" type="text" />,(语法糖的意思是仅供显示);

    实际上面等同于:<input v-bind:value="msg" v-on:input="msg = $event.target.value">,简写即<input v-bind:value="msg" v-on:input="msg = arguments[0]">
    故,要让组件的v-model生效,它必须接受一个value属性(用于v-bind绑定响应式数据),且在有新的value时触发input事件并传递数据
    另:vue对v-model实现的一个规则:使用了v-model的组件会自动监听input事件并把这个input事件所携带的值传递给v-model所绑定的属性;

    HTML部分

    <body>
    
        <div id="itany">
    
            <input v-model="msg" type="text">
    
            <p>{{ msg }}</p>
    
            <!--两对大括号{{}}称之为模板,用来进行数据的绑定显示在页面中-->
    
        </div>
    
        
    
    </body>
    

    JavaScript 部分

    <script>
    
            const vm = new Vue({
    
                el: '#itany',//挂载点
    
                data: {
    
                    msg: "hello world" //双向数据绑定的值
    
                }
    
            });
    
    </script>
    

    未完待续…

    展开全文
  • 双向数据绑定 v-model 需求1. 使input框的初始化值value的值 需求2. 使input框输入的实时在p标签上输出思想: 使用input.value控制input框的值 使用input事件,每次输入触发该事件,使用事件对象e.target.value传入...
  • 在对表格进行直接新增或者想直接对表格进行编辑实时保存的时候,双向绑定是一个很好的选择。双向绑定的意思很简单,就是我从数据源获取数据给到页面,当页面的数据发生改变时,页面的数据会回流到数据源,从而不需要...
  • 视频面试,面试官问了我一个问题“vue数据双向绑定的原理”,我毫不犹豫地回答到v-model,至于原理我没答出来,自然,这个offter也没能拿到,今天,就来讨论一下vue数据双向绑定的原理到底是什么? 在网上百度这个...
  • 情景:vue双向绑定,这应该多数讲vue优势脱口而出的名词,然后你就会接触到一个方法 Object.defineProperty(a,"b",{}) 这个方法该怎么用 简单例子敲一下 var a = {} Object.defineProperty(a,"...
  • vue双向数据绑定原理

    2020-03-18 18:25:58
    vue渐进式javascript框架,渐进式的意思就是,需要用到什么功能的时候,在生态圈里面下载什么功能模块 MVVM模式 M:model v:view vM:ViewModel 为什么model曾数据变化的时候,vm就可以知道数据发生变化了呢? vue...
  • vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起: 我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢? 数据:可以理解为state; 驱动:这里应该是一个动词,就是操作...
  • 那么vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起: 我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢? 数据:可以理解为state; 驱动:这里应该是一个动词,...
  • vue的如何实现双向绑定的 ?react 虚拟DOM 是什么? 如何实现? 说一下diff算法 ? 工作中最出色的点, 和你最头疼的问题 如何解决的 ?平时如何学习, 最近接触了解了哪些新的知识 ? 技术一面简单自我介绍, 介绍一下你的...
  • Vue2.x学习笔记:面试题大全,附带答案(干货)1、MVVM1.1 说说对MVVM的理解1.2 有哪些框架支持MVVM1.3 双向绑定是什么意思1.4 双向绑定原理是什么1.5 双向绑定采用了什么设计模式2、vue生命周期2.1 什么是vue生命...
  • 谷歌也推出了基于组件的第二代Angular框架,致力于开发全平台应用——Web、移动 Web、移动应用、原生应用和桌面原生应用,其最为核心的特点:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。...
  • 一、Vue是什么Vue是用于构建用户界面的渐进式JS框架,所谓渐进式可以理解为由浅入深的意思,你做简单的项目可以用vue的简单的功能,做复杂的项目也可以用vue的复杂的功能。Vue的优点:体积小,轻量级框架,压缩后...
  • vue基础知识(一)

    2017-03-16 17:50:03
    1. Vue框架  【Vue是一个核心注重视图开发的渐进式... Vue的双向数据绑定是什么意思?  为什么说Vue的双向数据绑定是[语法糖]?v-model只是模拟双向绑定,是v-bind和v-on的语法糖,通过绑定绑定INPUT事件来更新对应
  • Java面试经历记录

    2020-09-28 14:20:48
    当时没明白双向绑定什么意思,就介绍了下自己使用zookeeper作为注册中心的使用方式,包括注册和调用服务。面试官说这不就是双向绑定吗,先订阅,再通知调用。 2StringBuilder和StringBuffer有什么区别? 面试初级...
  • 关于MVVM和MVC

    2019-01-07 12:32:08
    什么是MVVM? MVVM分为三个部分:分别M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器) 1、 M:模型层,主要负责业务数据相关;...MVVM支持双向绑定意思就是当...
  • Vue的MVVM的理解

    2020-06-11 23:34:25
    Vue的MVVM的理解 什么是MVVM?...MVVM支持双向绑定意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的
  • Vue制作Todo List网页

    2020-11-27 23:42:49
    Vue非常容易上手,运用到了双向绑定机制,即HTML里的DOM元素与JS里的Vue实例进行双向绑定,只要Vue实例中的代理数据改变,HTML中的实际数据就会跟着变,这和原生的Js的命令驱动模式不同,它数据驱动模式,通过数据...
  • Vue 学习“初体验”

    2020-05-31 14:19:50
    ​ 在我看来,单单一个vue就是一个js的对象,可以绑定页面元素,根据自己的生命周期以及属性动态绑定或者双向绑定标签属性,十分强大 真正能够分类整理文件的,***vue-cli脚手架***,快速模块开发 2. vue生命...
  • 分别代表是什么意思?1.背景介绍指令定义?AngularJS与JQuery最大的区别表现在数据双向绑定,实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素,再赋予元素的行为; 而AngularJS则是,将指令与DOM绑定在.....
  • 都知道vue的v-model是双向绑定的,v-model数据加载和变化同时的,但当用.lazy修饰的时候,数据变化不同步了,只有移除焦点后才会同步。 代码: 结果对比: 1.正常绑定,输入的同时显示: 2. 加上修饰符....
  • 项目面试题

    2021-03-13 15:18:18
    双向数据绑定v-model的实现原理 React面试题 React组件如何通讯 JSX本质是什么 context是什么,有何用途? shouldComponentUpdate的用途 面试redux单向数据流 setState是同步还是异步 webpack面试题 前端代码...
  • 首先区分一下响应式布局和Vue的响应式(也叫双向绑定不一样的,虽然都叫响应式。 Vue的响应式意思就是数据在改变的时候,Dom层,也就是视图也会跟着更新,这也mvc框架和mvvm框架最大的区别,省去了Controler对...
  • Angular的哲学AngularJS建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...实在不太懂什么意思就去研究了一下,发现大有学问。以下为...
  • 前言这篇文章早写于 2019年11月份使用Vue技术栈也有2年了,对里边的...概述我们先来看一张图,相信大家在不少的博客,贴吧,论坛等都有看到过这张图例 ,那么它到底是什么意思呢 ?下面听我细细道来 。这张图我先...
  • 一、Vue是什么Vue是用于构建用户界面的渐进式JS框架,所谓渐进式可以理解为由浅入深的意思,你做简单的项目可以用vue的简单的功能,做复杂的项目也可以用vue的复杂的功能。Vue的优点:体积小,轻量级框架,压缩后...
  • 1. 简述框架和函数库的区别 库一个封装好的特定的集合,提供给开发者使用; 框架则为解决一类问题...双向的数据绑定 5.单向数据流 6.易于结合其他第三库 7.轻巧、高性能 8.渐进式框架 9.以数据驱动执行的

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

双向绑定是什么意思