jQuery 实现 Vue 中 TodoList 功能

最近开始学习Vue，思想和常用的jQuery还是很不一样的，一边学习一边互相对照其实现的差异性。

简单的Vue TodoList代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue TodoList MVVM设计模式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- nav导航 -->
    <div id="nav">
      <input type="text" v-model="inputNav" />
      <button v-on:click="enterNav">继续输入</button>
      <ul>
        <li v-for="menu in menus">{{menu}}</li>
      </ul>
    </div>
    <script>
      var nav = new Vue({
        el: "#nav",
        data: {
          menus: ["home", "page", "blog"],
          inputNav: ""
        },
        methods: {
          enterNav: function() {
            this.menus.push(this.inputNav);
            this.inputNav = "";
          }
        }
      });
    </script>
  </body>
</html>

Vue TodoList MVVM设计模式

{{menu}}

Vue的实现方式是非常简单的。下面使用 jQuery 的MVP模式来实现同样的功能：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery实现Vue TodoList</title>
    <strong><code class="prettyprint" ><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
  </head>
  <body>
    <div>
      <input id="input" type="text" />
      <button id="btn">继续输入</button>
      <ul id="list">
        <li>home</li>
        <li>Page</li>
        <li>Blog</li>
      </ul>
    </div>
    <script>
      //MVP模式实现 Vue TodoList
      function Page() {}
      $.extend(Page.prototype, {
        init: function() {
          this.bindEvents();
        },
        bindEvents: function() {
          var btn = $("#btn");
          btn.on("click", $.proxy(this.handleBtnClick, this));
        },
        handleBtnClick: 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>

jquery实现Vue TodoList

home
Page
Blog

毫无疑问，使用vue进行开发相比可以省掉不少代码量，并且，vue多是对数据层进行操作，而jQuery则较多都是对DOM进行操作的代码。