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. C++ 函数模板&类模板详解

    在 C++ 中,模板分为函数模板和类模板两种.函数模板是用于生成函数的,类模板则是用于生成类的. 函数模板&模板函数     类模板&模板类  必须区分概念 函数模板是模板,模板函数时 ...

  2. PAT甲级——A1097 Deduplication on a Linked List

    Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplicated ...

  3. 第一周课堂笔记2th

    上课笔记2th https://mubu.com/doc/2gxvIvVLG0(老师笔记网址) 1.     python python运行过程 把源代码转化成字节码(机器不能识别) 也可能不产生py ...

  4. 【bzoj 4671】 异或图

    题目 神仙题啊神仙题 显然这个东西一脸不可求的样子啊,这种东西我们显然需要搞一个容斥什么的 于是设\(g_i\)表示至少存在\(i\)个联通块(联通块内部的边没有要求,联通块和联通块之间不存在边)的方 ...

  5. Ubuntu安装QQ、微信、微信开发者工具、搜狗输入法

    wine 待补充……

  6. tiger-complier 问题记录 类型检查

    1 注意区分 Ty_xxx 和 a_ 的区别 A 开头是对应的是原程序中的一个实体 Ty _ 开头则是类型检查中的一个抽象类 代表了一类实体 比如 A_recordTy 是原程序中的 type per ...

  7. 10-2-点击生成10个div

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js时间比较大小，时间加减

    第一种: //时间类比较 startTime= new Date(Date.parse(starttime)); endTime=new Date(Date.parse(endTime)); //进行 ...

  9. tensorflow+inceptionv3图像分类网络结构的解析与代码实现

    tensorflow+inceptionv3图像分类网络结构的解析与代码实现 论文链接:论文地址 ResNet传送门:Resnet-cifar10 DenseNet传送门:DenseNet SegNe ...

  10. 新增的Java MapReduce API

    http://book.51cto.com/art/201106/269647.htm Hadoop的版本0.20.0包含有一个新的 Java MapReduce API,有时也称为"上下文 ...