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

  

    
Vue 2.0 联系人单页应用
  


  

    
联系人
  
  

    

      

        
姓名
        
出生年月
        
电话号码
      
    
    

      

        

        

        

      
    
  

效果图

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，进行数据渲染

     
     
     

-------------------------------- 我是修改隔离线 ---------------------------------

     {{item.name}}
     {{item.birthday}}
     {{item.phone}}

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

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

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

下集预告

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

系列文章目录

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