美文网首页
Vue渐进式,自底向上逐层应用、MVVM、声明式渲染的理解

Vue渐进式,自底向上逐层应用、MVVM、声明式渲染的理解

作者: Autumn_2460 | 来源:发表于2019-05-02 16:24 被阅读0次

    Vue是什么

    官方解释:Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    渐进式框架的理解

    提供足够的选择,并且没有很多强制性的要求

    渐进也可以理解为一步一步的意思,大概意思就是使用Vue的时候,并不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分。如下图:


    14.png

    声明式渲染和组建系统是Vue的核心库所包含内容,而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立,你可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。
    Vue的使用没有很多强制性的要求,不像Angular那样,要使用Angular,还必须得使用它的模块机制、必须使用它的依赖注入、 必须使用它的特殊形式定义组件(这一点每个视图框架都有,Vue也难以避免)。

    自底向上逐层应用

    由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

    什么是MVVM

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 Model 的双向数据绑定,这使得Model 的状态改变可以自动传递给 View,即所谓的数据双向绑定
    Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性。Vue会通过DOM Listeners来监听并改变Model层的数据。反之,当Model层的数据发生改变时,也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。

    声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.

    直接上代码:

    ==代码1:==

    <div id="app">
      {{ message }}
    </div>
    
    var vm = new Vue({
      el: '#app',//el:Vue需要操作的元素节点
      data: {
        message: 'Hello Vue!'
      }
    })
    

    运行页面:

    1556417700797.png

    通过‘el’绑定id为“app”的元素,实际上是将这个元素挂载在名为vm这个Vue实例上,实现数据和DOM的双向绑定,也就是说数据和DOM都是响应的了,想要验证是否是响应的并不难,打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新,

    例如:


    1556441509865.png

    将app里面的message值改为123,页面也随之改变为123

    1556442354985.png

    看完这一大堆,还是不明白什么是声明式渲染,一头懵~

    那声明式渲染到底是什么呢?其实理解声明式渲染最好的办法是对比命令式渲染,

    命令式:一步一步告诉程序如何去做,能否达成结果取决于开发者的设计。
    声明式:只告诉程序想要什么结果,如何达成由程序保证,开发者不用关心。

    这时候回过来看上面的代码,app.message = "123"的操作只需要改Vue实例里的数据就可以了,页面上是如何根据这个数据渲染为123的我们并不关心。如果使用JQuery的话,我们需要获取到元素的id,然后通过操作dom的方式把数据赋值给app.innerHTML完成渲染,这些一步一步的过程都需要由我们开发人员来想,而声明式则不需要。

    相关文章

      网友评论

          本文标题:Vue渐进式,自底向上逐层应用、MVVM、声明式渲染的理解

          本文链接:https://www.haomeiwen.com/subject/yobnnqtx.html