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

前言

这是作为学习Vue.JS 2.0的一个简单Demo，同时希望保持一个简洁的页面结构。

开发环境

一个简单的列表

HTML

<!-- navigation bar -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-brand">Vue 2.0 联系人单页应用</div>
  </div>
</nav>
<div class="container" id="content">
  <div>
    <h4><b>联系人</b></h4>
  </div>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <td>姓名</td>
        <td>出生年月</td>
        <td>电话号码</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

效果图

Vue 应用代码

// app.js

new Vue({
  // 在ID为"demo"的DIV标签内部运行
  el: '#demo',

  // 数据集合
  data: {
    list: [
        {
        name: '深圳有事Q我',
        birthday: '2000-09-10',
        phone: '2345678'
      }, 
      {
        name: '上海没事别烦我',
        birthday: '1980-01-22',
        phone: '1293587023'
      }, 
      {
        name: '北京蓝色医生',
        birthday: '1990-02-01',
        phone: '1332345876'
      }]
  },

// 此处声明函数方法
  methods: {
  }
})

1. 数据定义及初始化
   声明一个变量，类型为Array，名字为list（此处你可以自由修改），为演示效果，我们预先初始化三行数据。
2. 修改前面写的HTML，进行数据渲染

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

3. 运行
   点击JSFiddler左上角的Run，可以看到运行效果。

   
   
4. 在线演示
   
   简书好像不支持插入JSFiddle的在线运行效果？

下集预告

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

系列文章目录