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. iOS之CATextLayer属性简介

    1.CATextLayer简介 CATextLayer快速高效简单地来渲染纯文本.NSAttributedString /* The text layer provides simple text l ...

  2. 为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字)

    为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字) 在PyData Seattle 2017中,Jake Vanderplas介绍了Python的发展历程以及最新动态.在这里我们把 ...

  3. R语言：表格的线图转化

    R语言:表格的线图转化 最先选取的是北京各区普通住宅成交十年(2016年及2006年)涨幅对比.这张图比较plain,主要拿来练习: 1.数据表格的基本整理及计算 2. 数据的初步分析 3.线图的基本 ...

  4. 关于获取webview(窗口间关系)的方法

    1.获取指定页面ID的webview plus.webview.getWebviewById('为页面设置的id值'): 该方法主要用于首页底部导航切换到子页面时不执行子页面的函数,因为在设置导航的时 ...

  5. C++ 变量、常量、符号常量

    变量: int i = 0;  // i 是变量 i=5;         //i 可以修改 变量就是程序内一个内存位置的符号名,在该内存位置可以保存数据,并可以通过符号名对该内存地址存放的数据进行访 ...

  6. C++ const修饰不同类型的用法

    const取自constant的缩写,本意是不变的,不易改变的意思 一.修饰普通变量 const int a = 7; int b = a;         //正确 a = 8;           ...

  7. day 40 MySQL之视图、触发器、事务、存储过程、函数

    MySQL之视图.触发器.事务.存储过程.函数   阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 MySQL这个软件想将数据处理的所有事情,能够在mysql这个层面上 ...

  8. SpringBoot 05_集成SpringDataJpa

    你还在为项目的集成头疼吗?你还在为管理大量的配置文件烦恼吗?如果是,用SpringBoot吧!今天主要介绍如果在SpringBoot的基础上创建一个集成了SpringDataJpa的项目,至于Spri ...

  9. Mysql千万级数据性能调优配置

    背景: 笔者的源数据一张表大概7000多万条,数据大小36G,索引6G,加起来表空间有40G+,类似的表有4张,总计2亿多条 数据库mysql,引擎为innodb,版本5.7,服务器内存256G,物理 ...

  10. 最新二进制安装部署kubernetes1.15.6集群---超详细教程

    00.组件版本和配置策略 00-01.组件版本 Kubernetes 1.15.6 Docker docker-ce-18.06.1.ce-3.el7 Etcd v3.3.13 Flanneld v0 ...