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. 组件component

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. Struts2中param的作用

    1.页面传参与配置传参的区别:如果页面Form表单的参数在Action类中有相应的setter方法,则会优先取页面Form表单传过来的值,如果页面没有该属性同名的参数,则会从配置文件中取同名的参数值作 ...

  3. 深入理解JVM（一）类加载器部分、类变量、常量、jvm参数

    类加载概述 在java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的 类型:class.interface(object本身).类型可在运行期间生成,如动态代理.一种runting概念 ...

  4. php面向对象的初认识

    面向对象的基本概念 面向对象的三大特征:继承 封装 多态 类和对象: 类是一个抽象的概念 对象是一个具体的实例 张三是一个对象,李四也是一个对象.王五同样是一个对象..... 他们都隶属于“人”这个“ ...

  5. JSTL（使用if-else实现分页）

    一.认识标签 <c:choose>标签没有任何属性. <c:when>标签具有以下列出的一个属性. <c:otherwise>标签没有任何属性. <c:whe ...

  6. PKU_3624(0-1背包)

    题目:http://poj.org/problem?id=3624 分析:这是一个0-1背包的问题. #include<stdio.h>#include<string.h>in ...

  7. 在VisualSVN创建新的Repository

    1,右键-创建 2,(暂时还没明白这两个选项的区别,暂时先使用第一个) 3, 库名称 4,(也不懂具体含义, 先默认) 5, 权限问题 6, 在需要用到这个库的工作文件夹内点击右键: -SVN检出 7 ...

  8. SpringBoot Controller接收参数的几种方式盘点

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:SpringBoot Controller接收参数的几种方式盘点: SpringBoot Controller接收参数的几种常用方式盘点 ...

  9. Redis多API开发

    目录 Redis API支持 redis-py安装方式 Python 连接redis 直接连接 使用连接池连接 Windows 连接redis数据库 一.下载Redis Desktop Manager ...

  10. 洛谷P3747 [六省联考2017]相逢是问候

    传送门 题解 扩展欧拉定理. 线段树维护,已经全改到底了的节点就不管,不然暴力修改下去. //Achen #include<algorithm> #include<iostream& ...