Vue.JS 单页应用 - 联系人管理（一）
2017-01-20 本文已影响1520人
程序员长春
前言
这是作为学习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: {
}
})
- 数据定义及初始化
声明一个变量，类型为Array，名字为list（此处你可以自由修改），为演示效果，我们预先初始化三行数据。 - 修改前面写的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即可。
-
运行
点击JSFiddler左上角的Run，可以看到运行效果。
- 在线演示
Jsfiddle
简书好像不支持插入JSFiddle的在线运行效果？
下集预告
联系人的新增、读取、修改、删除功能
