zoukankan      html  css  js  c++  java
  • mvp例子与MVVM例子

    VMP例子

    <!-- 从百度CDN上面找个jquery的链接 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
       <script src="./jquery.js"></script>
    </head>
    <body>
        <div>
            <input type="text" id="input">
            <button id="btn">提交</button>
            <ul id="list"></ul>
        </div>
        <script>
            // MVP
            // dom v层=>视图
            // p 控制器 调用模型层
           function Page(){
    
           }
           $.extend(Page.prototype,{
               init:function(){
                   this.bindEvents()
               },
               bindEvents:function(){
                   var btn = $('#btn');
                   btn.on('click',$.proxy(this.handleClick,this))
               },
               handleClick:function(){
                   var inputElem = $("#input")
                   var inputValue = inputElem.val();
                   var ulElem = $('#list')
                   ulElem.append('<li>'+inputValue+'</li>')
                   inputElem.val('')
               }
           })
           var page = new Page()
           page.init()
        </script>
    </body>
    </html>
    

    对比看MVVM

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue">
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list ">{{item}}</li>
            </ul>
        </div>
      
       <script>
        //    把注意力放在数据上面
        // 重点就是在数据上面
        //原理 defindeproperty
            var app = new Vue({
                el:'#app',
                data:{
                    list:[],
                    inputValue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputValue)
                        this.inputValue=''
                    }
                }
            })
       </script>
        
    </body>
    </html>
    
  • 相关阅读:
    springboot实现redis的分布式锁
    剑指offer--二维数组中查找
    剑指offer--二维数组中查找
    对JDK动态代理的模拟实现
    Spring(4)AOP
    设计模式之单例模式(Java)
    【Java并发系列】--Java内存模型
    maven 解决jar包冲突及简单使用
    基于注解的SpringAOP源码解析(三)
    Java代码中可以优化性能的小细节
  • 原文地址:https://www.cnblogs.com/smart-girl/p/11105011.html
Copyright © 2011-2022 走看看