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

前言

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

开发环境

Vue.JS 2.0 官方网站
Vue Resource Github
Vue-Resource 虽然还是官方推荐的AJAX插件，但是看了文章Retiring vue-resource文章，我们决定还是放弃使用Vue-resource，转而使用Axios。
Axios Github
Bootstrap CSS 官方网站 中文网
JSFiddler 在线Web设计合作平台

一个简单的列表

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>

** v-for **
列表渲染，中文说明文档请看 这儿
** "item in list" **
** "list"是上面javascript中定义的数组变量，刚刚如果你修改了js代码中的list，那么此处也必须跟着修改一下。
** "item", 你也可以随意修改，同步修改下方的item即可。

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

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

下集预告

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

系列文章目录

1. 列表显示
2. 表单显示
3. 表单CRUD
4. Vue组件化
5. 从前端到后端