zoukankan      html  css  js  c++  java
  • 通过例子分析MVVM

    通过一个简单的计数器例子分析MVVM。

    代码

    demo2.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h3>当前数值大小:{{cnt}}</h3>
        <button @click="addCnt" >+</button>
        <button @click="subCnt" >-</button>
    </div>
    </body>
    <!--导入vue.js-->
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:"#app"
            // Model 数据
            ,data:{
                cnt :0
            }
            ,methods:{
              addCnt(){
                this.cnt++;
              },
              subCnt(){
                this.cnt--;
              }
            }
        });
    </script>
    </html>
    

    分析

    View是HTML

    Model是抽离出来的data

    ViewModel是创建的Vue对象实例

    它们之间是如何工作呢?

    首先VM通过数据绑定让data中的数据实时的在HTML中显示。

    其次VM通过监听HTML中的事件,并且通过methods中的操作,来改变data中的数据。

    Data中的数据被改变了之后,立即响应回HTML中。

    有了vue帮助我们完成ViewModel层的任务,在后续的开发中,我们就可以专注于数据的处理,以及HTML、CSS的编写工作了,而不去关注DOM的操作

  • 相关阅读:
    关于冥想
    Read Later
    你追求的跟我相反
    UML for Java Programmers之dx实战
    20140525
    面试基础-语言基础篇
    面试基础-linux操作系统篇
    面试基础-数据库篇
    面试基础-计算机网络篇
    Eclipse同时编译多个cpp文件
  • 原文地址:https://www.cnblogs.com/10134dz/p/14395618.html
Copyright © 2011-2022 走看看