精华内容
下载资源
问答
  • 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

    展开全文
  • 双向数据绑定 v-model 需求1. 使input框的初始化值是value的值 需求2. 使input框输入的实时在p标签上输出思想: 使用input.value控制input框的值 使用input事件,每次输入触发该事件,使用事件对象e.target.value传入...

    双向数据绑定 v-model

    需求1. 使input框的初始化值是value的值
    需求2. 使input框输入的实时在p标签上输出

    思想:
    使用input.value控制input框的值
    使用input事件,每次输入触发该事件,使用事件对象e.target.value传入输入的值

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>双向数据绑定</title>
    </head>
    <body>
        <div id="app">
    
            <input type="text" v-bind:value = "value" v-on:input = "input">
    
            <p>{{ value }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
     new Vue({
                el : "#app",
                data : {
                    value : "fanghuayong"
                },
                methods : {
     input : function(e) {
     this.value = e.target.value
     console.log(this.value)
                    }
                }
            })
        </script>
    </body>
    </html>

    问题: 单向数据流

    数据可以改变属性,但属性无法改变数据

    v-bind的只是初始化了一下数据,使得数据绑定到了value属性上,但是没有v-on:input事件的话,在input框中输入的value值无法改变数据,所有需要借助v-on:input事件。

    双向数据流: vue中提供一下更快捷的方法,v-model

    <div id="app">
        <input type="text" v-model="value">
        <p>{{ value }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     new Vue({
         el : "#app",
         data : {
             value : "fanghuayong"
         },
     })
    </script>

    v-model可以初始化value的属性, v-model改变value的值,就会改变数据的值,数据的值又可以改变value属性的值,成为双向数据绑定。

    计算属性: computed字段

    <div id="app">
        <button v-on:click = "increase" style="background-color: green; color: #fff;">按钮+1</button>
        <button v-on:click = "de" style="background-color: green; color: #fff;">按钮-1</button>
        <p>{{ count }}{{ result() }}</p>
        <button v-on:click = "count2++" style="background-color: yellow">按钮二+1</button>
        <p>{{ count2 }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     new Vue({
        el : "#app",
        data : {
            count : 0,
            count2 : 0
        },
        methods : {
            result : function() {
                console.log("result")
                return this.count > 5 ? ">5" : "<5"
            },
            increase : function() {
                this.count++
                // this.result = this.count > 5 ? ">5" : "<5"
            },
            de : function() {
                this.count--
                // this.result = this.count > 5 ? ">5" : "<5"
            }
          }
     })
    </script>

    result函数是为了代码复用,因为按钮+1或者按钮-1都要使用到里面的函数,所以直接执行result()函数。

    但是发现按钮2+1点击也会执行该函数,因为它不知道是谁需要它,只要有页面变动,为了最新的数据,它就会执行。

    5699c4e12c2dfee9591d2070d2f6db1d.png

    计算属性: 计算属性和函数属性有两点不同之处,

    1. 写法不同。函数属性: {{ result() }}是执行模式带括号,计算属性{{ output }}不需要带括号;
    2. 刷新作用域不同。函数属性只要页面dom节点有改动就刷新最新数据,适合凡事dom界面发生改变就会执行。计算属性会自动识别与它有关的,它才会刷新。
    <div id="app">
        <button v-on:click = "increase" style="background-color: green; color: #fff;">按钮+1</button>
        <button v-on:click = "de" style="background-color: green; color: #fff;">按钮-1</button>
        <p>{{ count }}{{ result() }}</p>
        <button v-on:click = "count2++" style="background-color: yellow">按钮二+1</button>
        <p>{{ count2 }}</p>
        <p>函数属性:{{ result() }} | 计算属性:{{ output }}</p>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     new Vue({
        el : "#app",
        data : {
             count : 0,
             // result : "",
             count2 : 0
        },
        computed : {
            output : function() {
                console.log("output")
                return this.count > 5 ? ">5" : "<5"
            }
        },
        methods : {
            result : function() {
                console.log("result")
                return this.count > 5 ? ">5" : "<5"
            },
            increase : function() {
                this.count++
                // this.result = this.count > 5 ? ">5" : "<5"
            },
            de : function() {
                this.count--
               // this.result = this.count > 5 ? ">5" : "<5"
           }
        }
     })
     </script>

    1605a0a0d22b3909e8954875e47e7e6a.png

    监听 watch字段

    监听data中的变量,被监听的变量数据改变会触发该事件,并且会自动传入函数中。

    new Vue({
        el : "#app",
        data : {
            count : 0,
            count2 : 0
        },
        watch : {
            count : function(val) {
                console.log(val)
            }
        },
        computed : {
            output : function() {
                console.log("output")
                return this.count > 5 ? ">5" : "<5"
            }
        },
        methods : {
             result : function() {
                 console.log("result")
                  return this.count > 5 ? ">5" : "<5"
             },
             increase : function() {
                 this.count++
                 // this.result = this.count > 5 ? ">5" : "<5"
              },
              de : function() {
                  this.count--
                   // this.result = this.count > 5 ? ">5" : "<5"
              }
         }
     })
    

    cb7cf4e26556e853d3f04c3baaa633e8.png

    计算属性与watch属性(执行也是不需要括号())的区别:

    1. 计算属性需要返回一个值,watch属性不需要返回一个值,可以直接写逻辑操作
    2. 计算属性是同步代码,watch属性可以写异步代码(虽然我的异步写的不好,没有严格写,只是测试了一下)
    // html代码
    <p>函数属性:{{ result() }} | 计算属性:{{ output }}|watch属性: {{ output2 }}</p>
    
    // js代码
    data : {
        count : 0,
        count2 : 0,
        output2 : ""
    },
    watch : {
        count2 : function(val) {
            console.log(val)
            this.output2 = val > 5 ? "大于5" : "小于5";
            var vm = this
            // 设置2s后做什么
            window.setTimeout(function(){
                vm.count2 = 0;
                console.log('被执行!')
            },2000)
        }
    },
    

    简写:

    v-on:click == @click

    v-bind:title == :title

    展开全文
  • vue双向数据绑定原理

    2020-03-18 18:25:58
    vue是一个前端js框架 vue是渐进式javascript框架,渐进式的意思就是,需要用到什么功能的时候,在生态圈里面...vue的双向数据绑定原理 vue在创建vm的时候,会将数据配置在实例中,然后通过Object.defineProperty方...

    vue是一个前端js框架

    vue是渐进式javascript框架,渐进式的意思就是,需要用到什么功能的时候,在生态圈里面下载什么功能模块在这里插入图片描述

    MVVM模式

    M:model
    v:view
    vM:ViewModel

    为什么model曾数据变化的时候,vm就可以知道数据发生变化了呢?

    vue的双向数据绑定原理

    vue在创建vm的时候,会将数据配置在实例中,然后通过Object.defineProperty方法,
    为数据动态添加 get 与 set 方法,当获取数据的时候,会触发对应的get方法,
    当设置数据的时候,触发对应的set方法,然后当set方法触发完成的时候,内部会进一步触发watcher,
    当数据改变了,试图则更新操作完毕。
    也可以解释为:
    vue内部通过数据劫持&发布订阅模式实现数据的双向绑定
    通过Object.defineProperty方法对所有的数据进行数据劫持,就是给这些数据动态的添加了getter与setter方法。
    在数据变化的时候发布消息给订阅者(Watcher),触发响应的监听回调。

    在这里插入图片描述

    展开全文
  • 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是vue的model层的data属性,实现输入值与数据域的双向绑定; 如何使用? 在需要用户输入或者选择值的时候,可使用v-model,其值要与data数据域中的属性值对应,这样就能实现绑定双向绑定的实现: 页面显示...
  • web的双据双向绑定到底是什么意思?我感觉只要dom正常,无论是接受用户数据,还是反馈用户显示,都能正常进行啊,这与数据双向绑定有什么关系?求解释!!
  • 视频面试,面试官问了我一个问题“vue数据双向绑定的原理”,我毫不犹豫地回答到v-model,至于原理我没答出来,自然,这个offter也没能拿到,今天,就来讨论一下vue数据双向绑定的原理到底是什么? 在网上百度这个...
  • vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起: 我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢? 数据:可以理解为state; 驱动:这里应该是一个动词,就是操作...
  • 情景:vue双向绑定,这应该是多数讲vue优势脱口而出的名词,然后你就会接触到一个方法 Object.defineProperty(a,"b",{}) 这个方法该怎么用 ...参数怎么传,分别表示什么意思 第一个参数...
  • 那么vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起: 我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢? 数据:可以理解为state; 驱动:这里应该是一个动词,...
  • 双向绑定意思很简单,就是我从数据源获取数据给到页面,当页面的数据发生改变时,页面的数据会回流到数据源,从而不需要进行什么繁琐的操作就可以实时保存。 具体实现步骤及思路如下: 这是定义好的一个model, ...
  • 谷歌也推出了基于组件的第二代Angular框架,致力于开发全平台应用——Web、移动 Web、移动应用、原生应用和桌面原生应用,其最为核心的特点是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。...
  • 一、Vue是什么Vue是用于构建用户界面的渐进式JS框架,所谓渐进式可以理解为由浅入深的意思,你做简单的项目可以用vue的简单的功能,做复杂的项目也可以用vue的复杂的功能。...双向数据绑定:开发者无需再操作do...
  • vue基础知识(一)

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

    2021-03-13 15:18:18
    双向数据绑定v-model的实现原理 React面试题 React组件如何通讯 JSX本质是什么 context是什么,有何用途? shouldComponentUpdate的用途 面试redux单向数据流 setState是同步还是异步 webpack面试题 前端代码...
  • 框架采用并扩展了传统HTML,通过双向数据绑定来适应动态内容,双向数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。实在不太懂什么意思就去研究了一下,发现...
  • 状态码有哪些?都代表什么意思?  1XX 提示信息 - 表示请求已被成功接收,继续处理  2XX 成功 - 表示请求已被成功接收,理解,接受 ...vue的优势:轻量级框架、简单易学、双向数据绑定、虚拟DOM、组件化、数据与结构
  • 01Vue/webpack面试题

    2020-07-15 21:16:27
    双向数据绑定v-model的实现原理 框架综合应用 基于Vue设计一个购物车(组件结构,vuex state 数据结构) webpack 面试题 前端代码为何要进行构建和打包? module chunk bundle 分别什么意思,有何区别? loader 和...
  • 前言这篇文章早写于 2019年11月份使用Vue技术栈也有2年了,对里边的各种API,属性,内置组件封装可以说是非常熟练了,一直知道双向数据绑定的原理是通过数据劫持,结合发布-订阅的方式来实现的;可理论始终是理论,...
  • Vue的MVVM的理解

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

    2019-01-07 12:32:08
    什么是MVVM? MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器) 1、 M:模型层,主要负责业务数据相关;...MVVM支持双向绑定意思就是当...
  • 一、Vue是什么Vue是用于构建用户界面的渐进式JS框架,所谓渐进式可以理解为由浅入深的意思,你做简单的项目可以用vue的简单的功能,做复杂的项目也可以用vue的复杂的功能。...双向数据绑定:开发者无需再操作do...
  • Vue制作Todo List网页

    2020-11-27 23:42:49
    Vue非常容易上手,运用到了双向绑定机制,即HTML里的DOM元素与JS里的Vue实例进行双向绑定,只要Vue实例中的代理数据改变,HTML中的实际数据就会跟着变,这和原生的Js的命令驱动模式不同,它是数据驱动模式,通过数据...
  • 大家好,我是IT修真院郑州分院第8期学员...AngularJS与JQuery最大的区别表现在数据双向绑定,实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素,再赋予元素的行为; 而AngularJS则是,将指令与DOM绑定在...
  • 都知道vue的v-model是双向绑定的,v-model数据加载和变化是同时的,但当用.lazy修饰的时候,数据变化不同步了,只有移除焦点后才会同步。 代码: 结果对比: 1.正常绑定,输入的同时显示: 2. 加上修饰符....
  • 1. 简述框架和函数库的区别 库是一个封装好的特定的集合,提供给开发者使用; 框架则是为解决一类问题...双向数据绑定 5.单向数据流 6.易于结合其他第三库 7.轻巧、高性能 8.渐进式框架 9.是以数据驱动执行的
  • 前端理论知识(3)

    2021-03-13 17:23:48
    前端理论知识题(3) vue 简述框架和库的区别 库是一个封装好的特定的集合,提供给开发者使用;...4.双向数据绑定 5.单向数据流 6.易于结合其他第三库 7.轻巧、高性能 8.渐进式框架 9.是已数据驱动执行的 缺点
  • Vue的响应式意思就是数据在改变的时候,Dom层,也就是视图也会跟着更新,这也是mvc框架和mvvm框架最大的区别,省去了Controler对视图view,数据model的复杂处理,而替换成了View-Model,让我们写起代码行云流水,...
  • 满足google目前控件支持的databinding双向绑定,并扩展原控件一些不支持的数据绑定。例如将图片的url路径绑定到ImageView控件中,在BindingAdapter方法里面则使用Glide加载图片;View的OnClick事件在BindingAdapter...
  • 通过绑定setter和getter来操作 <code>this._data</code> 中的数据 <p>proxy的实现: <pre><code>javascript Vue.prototype._proxy = function (key) { // isReserved 判断 key 的首字母是否为 $ 或 _ if...

空空如也

空空如也

1 2
收藏数 32
精华内容 12
关键字:

双向数据绑定什么意思