Vue.JS 单页应用 - 联系人管理（二）

2017-01-20 本文已影响305人程序员长春

前言

在上一篇文章 Vue.JS 单页应用 - 联系人管理（一）中我们实现了数据列表显示，在本文中，实现表格数据和表单数据的同步。
在这一部分，我们观察MVVM编程模式下，双向绑定对于程序员生产力的解放。

表单的实现

看一下效果图

HTML

<div id="editform" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">编辑</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
            <input class="form-control" v-model="row.name" id="name" placeholder="输入姓名">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">出生日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" id="birthday">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">电话号码</label>
          <div class="col-sm-10">
            <input class="form-control" id="phone">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit"class="btn btn-primary">新增</button>
            <button type="submit" class="btn btn-default">保存</button>
          </div>
        </div>
      </form>
    </div>
</div>

需要实现如下特性

C 点击“新增”按钮，表单记录清空
R 点击表格行，读取记录到表单中
U 点击“保存”按钮，当前记录修改写回列表
D 点击“删除”按钮，删除表单当前记录。

升级

Javascript 修改

首先，为了实现CRUD，我们需要一个主关键字，修改我们的数据模型，添加id字段。
其次，需要一个方法showrow，当点击表格行时，将相应行数据填入表单中。

data: {
  row: {
    id:0,
    name: '',
    birthday: '',
    phone: ''
  },
  list: [{
    id:1,
    name: '深圳有事Q我',
    birthday: '2000-09-10',
    phone: '2345678'
  }, {
    id:2,
    name: '上海没事别烦我',
    birthday: '1980-01-22',
    phone: '1293587023'
  }, {
    id:3,
    name: '北京蓝色医生',
    birthday: '1990-02-01',
    phone: '1332345876'
  }]
},

  // 此处声明函数方法
methods: {
    showrow: function(value) {
      this.row = value
    }
}

HTML 修改

HTML修改很简单，只需要在表格行加一个点击事件，指向showrow。

<tr v-for="item in list">
  <td>{{item.name}}</td>
  <td>{{item.birthday}}</td>
  <td>{{item.phone}}</td>
</tr>
-------------------------------- 我是修改隔离线 ---------------------------------
<tr v-for="item in list" v-on:click="showrow(item)">
  <td>{{item.name}}</td>
  <td>{{item.birthday}}</td>
  <td>{{item.phone}}</td>
</tr>

运行演示

JSFiddler

总结

点击表格行，数据出现在表单中，可以修改表单中的数据，似乎哪里不对！修改数据的时候，仔细观察，可以发现，表格中的数据同步被修改，也许你会说，很好啊，MVVM，双向同步。
但是，实际的生产应用中，需求一般是，用户点击“保存”才将数据写回列表中或者持久层。部分原因是，大部分的Demo代码只是为了演示一个相对简单的特性，然后观众自行组合不同特性来完成真正的项目。

下集预告

联系人的新增、读取、修改、删除功能