FrankFang commented 7 years ago

首先新建项目目录

cp -r step-2 step-3

这样我们就可以基于之前的代码做新任务，同时不改动之前的代码。

学会一个框架的最好办法

学会一个框架的最好办法那就是——做毁一个项目。

接下来我们就要用 Vue.js 做一个待办事项小应用。简单起见，我们就不写 CSS 了，只用 HTML 和 JS 搞定。

我们的目标只有一个，就是搞清楚怎样用 Vue.js 进行开发。

需求

这个项目的英文名就暂定为 Todo，它有以下功能：

用户可以新建一个待办事项
用户可以删除一个待办事项
用户可以将一个待办事项标记为已完成
用户刷新页面之后，待办事项还在

Getting Started

由于我们现在对 Vue.js 还一无所知，所以就走一步算一步先。

首先我们用 HTML 描绘一下我们的界面

page.html

<html>
  <head>
    <meta charset=utf-8>
  </head>
  <body>
    <div id="app">
      <div class="newTask">
        <input type="text">
      </div>
      <ol class="todos">
      </ol>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

charset 要加上，不然出现中文就乱码了
加一个 div#app，用于给 Vue 初始化
div.newTask > input 用于让用户输入待办的内容
ol.todos 用于容纳所有待办，每个待办就是一个 <li>

添加待办

接下来我们做第一个需求，添加待办。

做之前你要想好流程：

用户输入待办内容
用户按下回车
新的待办出现在 ol.todos 里

好的，开始做了。

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todoList: []
  }
})

我们用 todoList 数组作为所有待办事项的容器，newTask 作为 input 的值。

为什么要有 data？

这里出现了第一个令我们费解的地方——「为什么我们需要将 DOM 与 JS 变量（data）对应起来」。

如果我们用 jQuery 来写，直接在 input 的键盘事件中取出 input.value，构造一个 <li>，插入到 ol.todos 就完了嘛。对不对？

这就是框架和库的区别了。jQuery 作为一个库，你想怎么用就怎么用，但是你在使用一个框架的时候，有很多「指导思想」是你要遵循的。Vue 的指导思想之一就是「尽量不要操作 DOM」，因为这个框架会帮你操作 DOM。

绑定数据

      <div class="newTask">
        <input type="text" v-model="newTodo">
      </div>

这一句将 input.value 与 data.newTodo 绑定起来了，而且是双向的：

只要 input.value 被用户改了，data.newTodo 就会变成一样的值；
只要 data.newTodo 被 JS 改了，input.value 就会变成一样的值。

怎么验证呢？

首先我们来验证在 JS 里改变 newTodo，input.value 就会变：

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todoList: []
  },
  created: function(){
    let i = 0
    setInterval(()=>{
      this.newTodo = i // this.newTodo 就是 data.newTodo，实际上 this.newTodo 是 data.newTodo 的代理
      i+= 1
    },1000)
  }
})

运行 webpack，打开 page.html，可以看到 input 的值自己变化着。

Tips：如果你不想每次都运行 webpack，那么你可以新开一个命令行窗口，运行 webpack --watch，那么 webpack 就会在每次 JS 文件变化时自动重新运行。

接下来验证 input.value 改变会导致 data.newTodo 变化：

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todoList: []
  },
  created: function(){
    setInterval(()=>{
      console.log(this.newTodo)
    },1000)
  }
})

F12 打开 console，然后在 input 里输入一些字符试试。

以上，就是双向绑定。

细节请自行查看 https://cn.vuejs.org/v2/guide/forms.html

绑定事件

我们需要在用户敲击 回车 的时候，在 data.todoList 里新建一个对象。

如何监听用户的键盘事件呢？请查看 https://cn.vuejs.org/v2/guide/events.html

看完这一节，你就能写出以下代码了：

app.js

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todoList: []
  },
  methods: {
    addTodo: function(){
      this.todoList.push({
        title: this.newTodo,
        createdAt: new Date()
      })
      console.log(this.todoList)
    }
  }
})

page.html

      <div class="newTask">
        <input type="text" v-model="newTodo" @keypress.enter="addTodo">
      </div>

这时你刷新 page.html，在 input 里面输入 回车，就会在控制台看到 todoList 不是空字符串了：

展示新待办

虽然 data.todoList 已经含有一个新的项目了，但是页面里却没有展示。

根据 https://cn.vuejs.org/v2/guide/list.html 写出下面代码：

page.html

      <ol class="todos">
        <li v-for="todo in todoList">
          {{ todo.title }}
        </li>
      </ol>

然后重新刷新页面，在 input 输入一些字符，回车。你就会看到新增成功了：

优化

按照正常人的逻辑，添加成功后，input 的值应该清空，于是我们改写 app.js：

app.js

  methods: {
    addTodo: function(){
      this.todoList.push({
        title: this.newTodo,
        createdAt: new Date()
      })
      this.newTodo = ''  // 变成空
    }
  }

刷新试试效果如何吧。

标记为完成

思路：

给每一个 todo 添加一个 done 属性
给每一个 <li> 里面添加一个 checkbox
参考 https://cn.vuejs.org/v2/guide/forms.html#复选框，将 done 和 checkbox 双向绑定。

代码如下：

app.js

  methods: {
    addTodo: function(){
      this.todoList.push({
        title: this.newTodo,
        createdAt: new Date(),
        done: false // 添加一个 done 属性
      })
      this.newTodo = ''
    }
  }

page.html

      <ol class="todos">
        <li v-for="todo in todoList">
          <input type="checkbox" v-model="todo.done"> {{ todo.title }}

          <span v-if="todo.done">已完成</span>
          <span v-else>未完成</span>
        </li>
      </ol>

效果如下：

删除待办

思路：

在每一项后面添加一个删除按钮
点击按钮则从 data.todoList 中删除该项

代码如下：

app.js

  methods: {
    addTodo: function(){
      this.todoList.push({
        title: this.newTodo,
        createdAt: new Date(),
        done: false // 添加一个 done 属性
      })
      this.newTodo = ''
    },
    // 加了👇这个函数
    removeTodo: function(todo){
      let index = this.todoList.indexOf(todo) // Array.prototype.indexOf 是 ES 5 新加的 API
      this.todoList.splice(index,1) // 不懂 splice？赶紧看 MDN 文档！
    }
  }

page.html

      <ol class="todos">
        <li v-for="todo in todoList">
          <input type="checkbox" v-model="todo.done"> {{ todo.title }}

          <span v-if="todo.done">已完成</span>
          <span v-else>未完成</span>

          <button @click="removeTodo(todo)">X</button>  <!-- 👈 加了一个按钮 -->
        </li>
      </ol>

效果如下（GIF有点大，请稍等或开代理）

保存待办事项

我们发现每次刷新页面，待办就没了。

这是因为这些代码都保存在内存里，而内存是无法持久的。所以我们选择保存在 localStorage 中。

思路：

在用户关闭页面前，将数据保存在 localStorage 里
在用户进入页面后，立刻读取 localStorage

代码如下：

app.js

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todoList: []
  },
  created: function(){
    // onbeforeunload文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload
    window.onbeforeunload = ()=>{
      let dataString = JSON.stringify(this.todoList) // JSON 文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON
      window.localStorage.setItem('myTodos', dataString) // 看文档https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
    }

    let oldDataString = window.localStorage.getItem('myTodos')
    let oldData = JSON.parse(oldDataString)
    this.todoList = oldData || []

  },
  methods: { ...

由于我们只涉及数据的变化，所以 page.html 不变。

让我看到你的应用

你可以将这个应用部署到 GitHub Pages 上。

新建一个 GitHub repo，或者使用你现有的 GitHub repo。
在 repo 的 Settings 页面里将 GitHub Pages 功能打开，并选中 master 分支，点 Save，你就会得到一个「部署地址」，比如我的地址是 https://jirengu-inc.github.io/jrg-project-5/：
在这个部署地址后面接上你 repo 里的文件路径，也可以预览 HTML 了。比如我的预览页面是：https://jirengu-inc.github.io/jrg-project-5/step-3/page.html
由于国内访问 GitHub 较慢，所以你预览的时候可能看到 {{ }} 标记，不要紧，等一会就好。如果你不想让用户看见这些，可以看 https://cn.vuejs.org/v2/api/#v-cloak