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. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  2. EF实体模型的更新

    摘要 解决前期数据库优先添加的实体,然后数据库表结构发生变化后,导致代码操作EF插入更新数据失败问题 EF 数据库更新模型 相比大家在使用实体操作数据库的时候,都是采取数据库优先,手动添加实体模型.但 ...

  3. Entity Framework Extended 批量删除

    public static class DbContextExtensions { public static void DeleteBatch<T>(this DbContext con ...

  4. String类的trim() 方法

    用于删除字符串的头尾空白符. 语法:public String trim() 返回值:删除头尾空白符的字符串. public class Test {    public static void ma ...

  5. Python学习day38-并发编程(线程)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  6. linux中断处理-顶半部（top half）和底半部（bottom half） -转

    原文:http://rensanshi.blog.163.com/blog/static/21395510820136282224877/ 设备的中断会打断内核中进程的正常调度和运行,系统对更高吞吐率 ...

  7. Chapter 5 查找

    Chapter 5 查找 1-   顺序查找法 O(n) 2-   折半查找O(logn) :二分查找 要求:关键字有序 过程: 判定树:叶子结点为方框,代表不成功的结点. 3-   分块查找:索引顺 ...

  8. HBase OpenTSDB

  9. Mybatis编写配置文件时，需要注意配置节点的顺序

    mybatis-config.xml配置文件配置时,要注意节点顺序 <properties>...</properties> <settings>...</s ...

  10. Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值

    您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] class Solution { public: vector<i ...