mvp例子与MVVM例子

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>

猜你喜欢