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即可。

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


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

下集预告

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

系列文章目录

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

推荐阅读更多精彩内容

  • 已不记得那是哪一年的冬天,飞扬的白雪浩浩荡荡地占据了整个季节,也不记得那是怎样的一条街,谁的肩接纳了谁的疲惫。冰蓝...
    张清醨阅读 109评论 2 3
  • 一句话总结: 小溪:做到每天都写,没有太强求自己。下周开始每天都写,还要在字数方面有要求,或者是多写一篇。 王健行...
    王健行在行走阅读 55评论 0 0
  • 太久没有提笔写够800字了,最近的一次还是写毕业论文。今天定个小目标,来一篇。上午,等待打疫苗的间隙,贝姐窝在我的...
    Echo王姣阅读 335评论 1 2
  • 人生没有彩排,处处留心皆学问。冰心对铁凝说:有些事,你要等。对于生活,对于机会,对于想要改变的决心,等也需要一定的...
    臻静阅读 47评论 5 1