前言
這是作為學習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的在線運行效果？
下集預告
聯系人的新增、讀取、修改、刪除功能
