精华内容
下载资源
问答
  • Vue MVVM

    2019-02-18 08:57:03
    说一下 jQuery 使用框架的区别 jQuery 实现 todo-list <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf...

    说一下 jQuery 和 使用框架的区别

    • jQuery 实现 todo-list
    <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
      <meta charset="utf-8">
      <title>todo</title>
    </head>
    <body>
      <input type="text" id="input">
      <button id="btn-submit">提交</button>
      
      <div>
        <ul id="ul-list"></ul>
      </div>
      
      <script>
        let $ipt = $('#input')
        let $sub = $('#btn-submit')
        let $list = $('#ul-list')
    
        $sub.click(() => {
          let title = $ipt.val()
          let $li = $('<li>' + title + '</li>')
          $list.append($li)
          $ipt.val('')
        })
      </script>
    </body>
    </html>
    复制代码
    • vue 实现 todo-list
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://vuejs.org/js/vue.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div id="app">
         <input type="text" v-model="title">
        <button @click="add">提交</button>
    
        <div>
          <ul>
            <li v-for="item in list">{{ item }}</li>
          </ul>
        </div>
      </div>
      <script>
        new Vue({
          el: '#app',
          data: {
            title: '',
            list: []
          },
          methods: {
            add () {
              this.list.push(this.title)
              this.title = ''
            }
          }
        })
      </script>
    </body>
    </html>
    复制代码

    区别 :

    • 数据和视图的分离, 解耦 (开放封闭原则)
    • 以数据驱动视图, 只关心数据变化, DOM操作被封装

    说一下 MVVM 的理解

    • MVC
      • MVVM 不算是一种创新
      • 但其中的 ViewModel 确实是一种创新
      • 真正结合前端场景应用的创建
    M -- Model 模型/数据源
    V -- View 视图
    C -- Controller 控制器 / 控制 view 和 model 的变化
    复制代码
    • MVVM
    // 回顾 Vue todo-list 例子
    
    // 对应 View 视图 模板 (视图和模板是分离的)
    <div id="app">
        <input type="text" v-model="title">
        <button @click="add">提交</button>
    
        <div>
            <ul>
                <li v-for="item in list">{{ item }}</li>
            </ul>
        </div>
    </div>
    
    // 对应 Model
    var data = {
        title: '',
        list: []
    },
    
    // VM ViewModel   Vue实例 事件绑定 数据绑定, 类似于桥梁
    new Vue({
        el: '#app',
        data: {
            title: '',
            list: []
        },
        methods: {
            add () {
                this.list.push(this.title)
                this.title = ''
            }
        }
    })
    复制代码
    • 总结
      • MVVM - Model View ViewModel
      • 三者之间联系, 以及如何对应隔断代码
      • ViewModel 的理解, 联系 ViewModel

    MVVM 框架的三要素

    • 响应式 : vue 如何坚挺到 data 的每个属性变化
    • 模板引擎 : vue的模板如何被解析, 指令如何处理
    • 渲染: vue 的模板如何呗渲染成 html ? 以及渲染过程

    1. vue中如何实现响应式

    • 什么是响应式
      • 修改 data 属性之后, vue 立刻监听到
      当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,
      并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
      这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
      复制代码
      • data 属性被代理到 vm
      var vm = new Vue({
        data:{
          a:1
        }
      })
      // `vm.a` 是响应的
      
      vm.b = 2
      // `vm.b` 是非响应的
      复制代码
      • Object.defineProperty
        • Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
      var obj = {a: 1}
      Object.defineProperty(obj, 'a', {
          get () {
              console.log('get')
              return a
          },
          set (newVal) {
              console.log('set')
              a = newVal
          }
      })
      obj.a = 3
      复制代码
    // 模拟实现
    var vm = {}
    var data = {
        price: 100,
        name: 'yym'
    }
    
    var key, value
    for(key in data) {
        // 闭包, 新建一个函数,保证 key 的独立作用域
        (function (key) {
            Object.defineProperty(vm, key, {
                get () {
                    return data[key]
                },
                set (newval) {
                    data[key] = newVal
                }
            })
        })(key)
    }
    复制代码

    2. vue 中如何解析模板

    • 模板是什么
      • 本质 : 字符串
      • 有逻辑 , 如 v-if v-for
      • html 格式很像, 但又很大区别
      • 最后还要转换为 html 来显示
      • 模板最终必须转换为JS代码, 因为 :
        • 有逻辑, 必须用JS才能实现 (图灵完备)
        • 转换为 html 渲染页面, 必须用 JS 才能实现
        • 因此, 模板最重要转换为一个JS函数 (render 函数)
    <div id="app">
        <input type="text" v-model="title">
        <button @click="add">提交</button>
    
        <div>
            <ul>
                <li v-for="item in list">{{ item }}</li>
            </ul>
        </div>
    </div>
    复制代码

    render 函数

    with 的用法
    var obj = {
        name: 'yym',
        age: 20,
        getAdd () {
            // todo...
        }
    }
    
    不使用with
    function fn1() {
    
        alert(obj.name)
        alert(obj.age)
        obj.getAdd()
    }
    fn1()
    
    使用 with
    function fn1() {
        with(obj) {
            alert(name)
            alert(age)
            getAdd()
        }
    }
    fn1()
    复制代码

    render函数

    <div id="app">
       <p>{{price}}</p>
    </div>
    <script>
       new Vue({
           el: '#app',
           data: {
               price: 100,
           }
       })
    </script>
    
    - 模板中所有信息都包含在render函数中
    - this 即 vm
    - price 即 this.price 即 vm.price, 即 data 中的 price
    
    function render () {
       with(this) {
           return _c(  // createElement
               'div',
               {
                   attrs: {"id": "app"}  // 属性
               },
               [
                   _c('div',[_v(_s(price))])
               ],
           )
       }
    }
    复制代码
    // todo-list 的 render 函数
     
    function render () {
        with(this) {
            return _c('div', {
                    attrs: {"id": "app"}
                },
                [
                    _c('div',[_v(_s(price))])
                ],
                [
                    _c('input',
                        {
                            directives: [{
                                name: 'model',
                                rawName:: 'v-model',
                                value: (title),
                                expression: 'title'
                            }],
                            domProps: {
                                "value": (title)
                            },
                            on: {
                                "input": function($event) {
                                    if ($event.target.composing) return
                                    title = $event.target.value
                                }
                            }
                        }
                    ) , _v(" "), _c('button', {
                        on: {
                            "click": add
                        }
                    })
                    // ...
                ]
            )
        }     
    }
    复制代码

    3. vue 的整个实现流程

    1. 解析模板成 render 函数
      • with 的用法
      • 模板中所有信息被 render 函数包含
      • 模板中用到的 data 中的属性, 变成 js 变量
      • 模板中的 v-model v-for @on 变成 JS 逻辑
      • render 返回 vnode
    2. 响应式开始监听
      • Object.defineProperty
      • data 代理到 vm
    3. 首次渲染, 显示页面, 且绑定依赖
      • 初次渲染, 执行updateComponent, 执行 vm._render()
      • 执行render 函数, 会访问 vm.list 和vm.title
      • 会被响应式 get 方法监听到
      • 执行 updateComponent, 会走到 vdom 的patch 方法
      • patch 将 vnode 渲染成DOM, 初次渲染完成
    4. data 属性变化, 触发 rerender
      • 修改属性, 被 响应式 set 监听到
      • set 执行 updateComponent
      • updateComponent, 重新执行 vm._render()
      • 生成 vnode 和prevVnode ,通过 patch 进行对比
      • 渲染到 html
    展开全文
  • Vue 和MVVM理解

    2018-12-10 14:14:39
    下面是对vue和MVVM的一些理解 1、说明: MVVM 是Model-View-ViewModel 的缩写,,核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,这就是数据双向绑定。 Vue...

    初学vue刚开始语法不是太难。但后面项目上用到的时候、真的是一脸蒙蔽、不知道怎么调用、在哪调、各个组件、入口、router什么用。下面是对vue和MVVM的一些理解

    1、说明:

    MVVM 是Model-View-ViewModel 的缩写,,核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,这就是数据双向绑定

    Vue.js 又提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性。  View 和 Model 之间的同步工作完全是自动的,无需人为干涉。

    2、类比 :

    Model:指的是数据部分,对应到前端相当于javascript对象

    View:指的是视图部分,对应前端相当于dom

    Viewmodel:就是连接视图与数据的中间件通讯

    展开全文
  • Vue和MVVM对应关系

    2018-04-24 15:52:00
    Vue和MVVM的对应关系 Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系? MVVM(Model-view-viewmodel) MVVM还有一种模式model-view-binder,主要用来简化用户界面的事件驱动程序设计 MVVM可以分成四部分 ...

    Vue和MVVM的对应关系

    Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系?

    MVVM(Model-view-viewmodel)

    MVVM还有一种模式model-view-binder,主要用来简化用户界面的事件驱动程序设计

    MVVM可以分成四部分

    • Model:模型
    • View:视图
    • ViewModel:视图模型
    • Binder:绑定器

    主要形式还是Model-ViewModel-View

    模型图

    模型:是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)

    视图:是用户在屏幕上看到的结构、布局和外观(UI)

    视图模型:暴露公共属性和命令的视图抽象。让视图和数据二者进行通信,靠的绑定器

    绑定器:声明性数据和命令绑定

    Vue和这四部分的关系

    对应关系:

    • 视图:对应真实的html和css
    • 视图模型:对应Vue的模板语法
    • 绑定器:对应v-bind v-model @click :prop等绑定数据语法
    • 模型:Vue的实例中的那些属性 $data $methods $computed 等等

    在一个.vue文件中,我们会看到3部分<template /> <script /> <style />

    <template /> 负责视图模型和绑定器

    <style /> 负责视图的CSS

    <script /> 中定义的Vue实例负责模型的数据管理和绑定器的逻辑

    如何用Vue解释Model-ViewModel-View呢?

    ViewModel-View阶段

    视图模型转化为视图,也即Vue中的模板语法转化为实际的HTML和CSS,这个部分主要由Vue自动实现,我们开发者主要处理的是Model-ViewModel阶段。

    Model-ViewModel阶段

    这个阶段就是我们实例化Vue对象,添加data,methods等操作,以及将数据绑定到模板上。

    <template>
      <div class='test' @click='add'>{{count}}</div>
    </template>
    // <script>
    export default {
      data () {
        return {
          count: 0
        }
      },
      methods: {
        add (e) {
          this.count += 1
        }
      }
    }

    Model:定义data函数管理数据count,以及定义add函数控制count数据的变更

    ViewModel:是抽象语法,主要是Vue的模板语法,绑定数据,之后Vue会将其转化为真实的HTML

    由于,ViewModel和Model主要是绑定关系,也即是数据和视图是绑定的,你什么样的数据就决定了什么样的视图,所以我们一般也把Vue称为数据驱动框架。

    所以很多时候,只要知道数据和ViewModel的关系,也就知道UI的样子了,这个时候,我们只需操作数据的结构,也就操作了视图。

    <template>
      <ul class='list'>
        <li class='item' v-for='(v, index) in arr' :key='index'>{{v}}</li>
      </ul>
    </template/>
    export default {
      data () {
        return {
          arr: [1, 2, 3, 4, 5]
        }
      },
      created () {
        // 改变数据arr的数据结构,添加新的数值
        this.arr.push(6)
      }
    }

    Model和ViewModel的关系:

    arr和<li>标签绑定,有多少个arr元素就有多少个<li>

    后面arr添加了一个元素6,这时候arr的长度是6,那应该有6个<li>,这就是数据和视图的绑定,由数据的结构我们就可以推出视图的样子。

    所以我们要多从操作数据的角度思考问题,当然前提是你已经确定了Model和ViewModel的绑定关系是怎样的。这个时候我们只需操作Model就可以了。

    上面的例子采用的数据结构是数组,当然还有很多数据结构。Model和ViewModel绑定后,基本上Model的数据结构就决定了。那么这时,我们只需根据这个Model的数据结构增删修改。

    还有一点就是vue中有多种绑定方式,v-if v-for 等等,一个ViewModel只有一个Model的数据结构,但是相同的View可以有多种ViewModel

    比如这个View<div>hello</div>,有多种ViewModel都可以生成这个,有多种ViewModel也即有多种Model(数据结构)

    <template>
      <div>{{data}}</div>
      <div>{{obj.data}}</div>
      <div>{{arr[0]}}</div>
    </template>
    export default {
      data () {
        return {
          data: 'hello',
          obj: {
            data: 'hello'
          },
          arr: ['hello']
        }
      }
    }

    上面有3种ViewModel和3种Model 但生成的View都是一样的<div>hello</div>

    转载于:https://www.cnblogs.com/lantuoxie/p/8931169.html

    展开全文
  • mvc、mvp、mvvm的特点与区别并且了解vue和mvvm对应的关系加粗样式 最近看了一些vue的文章,了解了一些有关vue最基础的东西,跟大家分享分享。如果有错希望大家能够了解,提出意见。 说起vue就必须先说起mvvm,说起...

    mvc、mvp、mvvm的特点与区别并且了解vue和mvvm对应的关系加粗样式

    最近看了一些vue的文章,了解了一些有关vue最基础的东西,跟大家分享分享。如果有错希望大家能够了解,提出意见。

    说起vue就必须先说起mvvm,说起mvvm就得先说起几种模式的特点和区别了

    MVC

    MVC框架最早出现在Java领域,然后慢慢在前端开发中也被提到,后来又出现了MVP,以及现在最成熟的MVVM。

    MVC
    model 数据模型
    view 视图
    controller 控制器

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写
    用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
    Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
    View(视图)是应用程序中处理数据显示的部分。
    在这里插入图片描述aidjs.github.io/)
    优点:耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理
    缺点:由于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。
    MVC应用:
    在web app 流行之初, MVC 就应用在了java(struts2)和C#(ASP.NET)服务端应用中,后来在客户端应用程序中,基于MVC模式,AngularJS应运而生。

    mvp

    model
    view
    presenter

    MVP是单词Model View Presenter的首字母的缩写,分别表示数据层、视图层、发布层,它是MVC架构的一种演变。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller。
    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
    各部分之间的通信,都是双向的。
    View 与 Model 不发生联系,都通过 Presenter 传递。
    View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。在这里插入图片描述
    优点: 模型与视图完全分离,我们可以修改视图而不影响模型、可以更高效地使用模型
    缺点:视图和Presenter的交互会过于频繁,使得他们的联系过于紧密、view太薄,被动视图

    MVP应用:
    可应用与Android开发。

    MVVM

    model
    view
    viewmodel

    MVVM(Model View ViewModel)是一种基于MVC的设计,开发人员在HTML上写一些Bindings,利用一些指令绑定,就能在Model和ViewModel保持不变的情况下,很方便的将UI设计与业务逻辑分离,从而大大的减少繁琐的DOM操作。
    Model代表我们整个webapp所需要的数据模型,一个典型的例子就是用户信息Model,它应该含有(姓名,年龄等属性)。Model含有大量信息,但它并不具有任何行为逻辑,它只是数据,因而它不会影响浏览器如何展示数据。
    MVVM中View是具有主动性的,因为它包括了一些数据绑定,事件,和行为,这些都会直接影响Model和ViewModel的。它不但负责保持View自身的行为(展示),而还会将自身的变化同步到ViewModel中。
    可以把ViewModel看作一个藏在View后面的好帮手,它把View需要的数据暴露给它,并且赋予View一定的行为能力。
    在这里插入图片描述
    MVVM优点:MVVM模式和MVC模式类似,低耦合、 可重用性,view有一定行为,可以把行为直接影响到viewmodel、可以测试
    ————————————————

    最后总结一下mvvm和vue之间的关系

    MVVM可以分成四部分

    Model:模型
    View:视图
    ViewModel:视图模型
    Binder:绑定器
    

    模型:是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)

    视图:是用户在屏幕上看到的结构、布局和外观(UI)

    视图模型:暴露公共属性和命令的视图抽象。让视图和数据二者进行通信,靠的绑定器

    绑定器:声明性数据和命令绑定

    Vue和这四部分的关系

    对应关系:

    视图:对应真实的html和css
    视图模型:对应Vue的模板语法
    绑定器:对应v-bind v-model @click :prop等绑定数据语法
    模型:Vue的实例中的那些属性 data
    
    methods $computed 等等
    

    在一个.vue文件中,我们会看到3部分

    负责视图模型和绑定器

    展开全文
  • Vue和MVVM的对应关系

    2019-06-21 01:41:47
    Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系?MVVM(Model-view-viewmodel)MVVM还有一种模式model-view-binder,主要用来简化用户界面的事件驱动程序设计MVVM可以分成四部分Model:模型View:视图ViewModel...
  • vue和mvvm的一些小区别

    2019-09-29 05:00:20
    Vue.js MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的...
  • 初识Vue 什么是Vue 以下引自Vue官方文档 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架...​ Vue.js是当下很火的一个 JavaScript MVVM库,它是以数据驱动组件化的思想构建的。 相比于Angula
  • ViewModel是mvvm模式的核心,它是连接viewmodel的桥梁。它有两个方向: 将Model转化成View,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。 将View转化成Model,即将所看到的页面转化成后...
  • VueMVVM和options

    2020-06-17 15:13:49
    VueMVVM和options Vue中的MVVM View层 视图层 在前端中,通常就是DOM层 主要作用是给用户展示各种信息 Model层 数据层 数据就是一个固定的死数据,更多的是来自服务器,网上请求下来的数据 ViewModel层...
  • VueMVVM

    2019-06-02 17:35:56
    VueMVVM 1.MVVM MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改操作的业务逻辑; 在MVVM架构下,View Model 之间并没有直接的联系,而是通过ViewModel进行...
  • VueMVVM

    2021-05-01 08:34:57
    VueMVVM MVVM是Model-View-ViewModel的缩写 View层(视图层):主要作用就是向用户展示各种信息 Model层(数据层):数据可以是我们自己定义的死数据,更多的是来自服务器,从网络上请求下来的数据。 ViewModel(视图...
  • VueMVVM实现方法

    2020-12-11 16:54:12
    本文介绍了VueMVVM实现方法,分享给大家,具体如下: 1. Object.defineProperty() 定义属性 用意:给一个对象定义属性,那个属性原来是不存在的。这是一个初衷,属性是不存在的,需要额外添加。 ①、使用说明 ...
  • 什么是MVVM? view层 视图层,在我们前端的开发中也是就是DOM层,主要作用给用户展示各种信息。 Model层 数据层,数据可能是我们固定的死数据,更多是来自服务器,从网络请求来的数据。 VueModel层 视图模型层。视图...
  • 一、MVVM模式第一个Vue程序 目录:MVVM模式、第一个Vue程序 1.MVVM模式 1)什么是MVVMMVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序...
  • vueMVVM响应式原理介绍——vue源码解析一、vueMVVM是什么?二、使用步骤1.引入库2.读入数据总结 一、vueMVVM是什么? MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。 Model...
  • vuemvvm的个人理解

    2020-06-10 13:51:07
    vuemvvm的个人理解 vuemvvm响应式原理这个问题困扰了我好久; 就在不久之前,我看了一段讲vue源码的视频,终究是对mvvm的...MVVM作为数据绑定的入口,整合Observer、CompileWatcher三者,Observer负责监听自
  • VueMVVM

    2020-07-27 18:35:39
    Vue.js等前端框架,通过MVVM,解放了双手渲染更新DOM。以前的Jq或者原生的JS都是获取DOM操作 本文主要基于掘金的一篇 MVVM模式介绍 加之自己的理解 M-V-MV M (数据模型) 包含业务验证逻辑的数据模型 V (UI...
  • Vue笔记-VueMVVM

    2021-05-13 14:31:22
    Vue中的MVVM View层: 视图层 在我们前端开发中,通常就是DOM层。 主要的作用是给用户展示各种信息。 Model层: 数据层 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。 在我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,342
精华内容 1,736
关键字:

vue和mvvm

vue 订阅