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>

mvp例子与MVVM例子的更多相关文章

  1. 通过例子分析MVVM

    通过一个简单的计数器例子分析MVVM. 代码 demo2.html <!DOCTYPE html> <html lang="en"> <head> ...

  2. 【C#/WPF】ListView的MVVM例子，及禁止拖动ListView的头部Header

    一个ListView的MVVM简单例子: <ListView ItemsSource="{Binding GoodsList}" Margin="0,10,0,10 ...

  3. 撸一个简单的MVVM例子

    我个人以为mvvm框架里面最重要的一点就是VM这部分,它要与Model层建立联系,将Model层转换成可以被View层识别的数据结构:其次也要同View建立联系,将数据及时更新到View层上,并且响应 ...

  4. MVP模式和MVVM模式

    MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...

  5. Android mvp模式、mvvm模式

    MVC和MVP的区别2007年08月08日 星期三 上午 09:23 MVC和MVP到底有什么区别呢? 从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会 ...

  6. MVP模式与MVVM模式

    1.mvp模式(Model层 Presenter层 View 层) Model层 :数据层(ajax请求) Presenter层:呈现层,view逻辑相关的控制层,控制层可以去调Model去发ajax ...

  7. oracle 定时任务例子【项目例子】

    说明:请在plsql工具的命令窗口中,依次按步骤执行如下脚本   (1)建立备份表 my_test_log2create table my_test_log2 as select * from my_ ...

  8. [转载]Android MVC,MVP和MVVM 思想&例子

    在Android开发中,常采用 MVC(Model-View-Controller)或者MVP(Model-View-Presenter) 等框架模式.设计如图   mvc mvp 可以看出,在 MV ...

  9. MVC、MVP、MVVM模型

    在学习vue.react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下. 与MVVM相似的,还有MVC.MVP,先从MVC.MVP这两个入手,方面 ...

随机推荐

  1. CF402D 【Upgrading Array】

    题目链接: CF402D 题目分析: 首先考虑一下怎么求每个数的分数.把每个数分解到最后会发现它的坏质因子对它分数的贡献是\(-1\),好质因子对它分数的贡献是\(1\),那么最后的分数就是好质因数- ...

  2. Python（三）基础篇之「模块&面向对象编程」

    [笔记]Python(三)基础篇之「模块&面向对象编程」 2016-12-07 ZOE    编程之魅  Python Notes: ★ 如果你是第一次阅读,推荐先浏览:[重要公告]文章更新. ...

  3. Glassfish安装、基本使用、在idea中配置Glassfish

    Glassfish安装.基本使用. 一.glassfish简介 glassfish是一款web应用服务器,和tomcat一样,也是一款优秀的Servlet容器. 二.glassfish知识点 1.do ...

  4. 解决MySQL登录ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor)问题

    问题描述 今天在MAC上安装完MySQL后,MYSQL默认给分配了一个默认密码,但当自己在终端上使用默认密码登录的时候,总会提示一个授权失败的错误:Access denied for user ‘ro ...

  5. Struts2转换器

    为什么进行类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容都以文本编码方式传输到服务器端 服务器端的编程语言却有着丰富的数据类型 继承StrutsTypeConverter抽象类 继承 ...

  6. kafka数据祸福和failover

    k CAP帽子理论. consistency:一致性 Availability:可用性 partition tolerance:分区容忍型 CA :mysql oracle(抛弃了网络分区) CP:h ...

  7. 全栈之路-杂篇-前端Http请求封装优化

    在项目开发过程中,代码的封装是很有必要的,我觉得这是程序员进阶的一个重要的技能,不会封装代码,你的代码看起来乱的一批,基本上不能维护,像一次性塑料袋一样,用完一次就失去了价值,这同时也会无缘无故的增加 ...

  8. 子类A继承父类B, A a = new A(); 则父类B构造函数、父类B静态代码块、父类B非静态代码块、子类A构造函数、子类A静态代码块、子类A非静态代码块 执行的先后顺序是

    按照先后顺序: 1,静态先于非静态代码库执行(静态代码块随着类的加载而加载,初始化只执行一次) 2,父类先于子类 3,非静态代码块优于构造函数执行 所以执行顺序如下: 父类B静态代码块->子类A ...

  9. Ubuntu连不上网一直提示连接已断开的解决方案

    win10搜索:服务 把VMware DHCP Service启动即可

  10. Java虚拟机系列（三）---内存溢出情况及解决方法

    因为Java虚拟机内存有堆内存.方法区.虚拟机栈.本地方法栈和程序计数器五部分组成,其中程序计数器是唯一一块不会发生内存溢出异常的内存区,所以只有四类内存区可能发生内存溢出异常,其中虚拟机栈和本地方法 ...