前言

這是作為學(xué)習(xí)Vue.JS 2.0的一個(gè)簡單Demo，同時(shí)希望保持一個(gè)簡潔的頁面結(jié)構(gòu)。

開發(fā)環(huán)境

Vue.JS 2.0 官方網(wǎng)站
Vue Resource Github
Vue-Resource 雖然還是官方推薦的AJAX插件，但是看了文章Retiring vue-resource文章，我們決定還是放棄使用Vue-resource，轉(zhuǎn)而使用Axios。
Axios Github
Bootstrap CSS 官方網(wǎng)站 中文網(wǎng)
JSFiddler 在線Web設(shè)計(jì)合作平臺(tái)

一個(gè)簡單的列表

HTML

<!-- navigation bar -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-brand">Vue 2.0 聯(lián)系人單頁應(yīng)用</div>
  </div>
</nav>
<div class="container" id="content">
  <div>
    <h4><b>聯(lián)系人</b></h4>
  </div>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <td>姓名</td>
        <td>出生年月</td>
        <td>電話號(hào)碼</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

效果圖

Vue 應(yīng)用代碼

// app.js

new Vue({
  // 在ID為"demo"的DIV標(biāo)簽內(nèi)部運(yùn)行
  el: '#demo',

  // 數(shù)據(jù)集合
  data: {
    list: [
        {
        name: '深圳有事Q我',
        birthday: '2000-09-10',
        phone: '2345678'
      }, 
      {
        name: '上海沒事別煩我',
        birthday: '1980-01-22',
        phone: '1293587023'
      }, 
      {
        name: '北京藍(lán)色醫(yī)生',
        birthday: '1990-02-01',
        phone: '1332345876'
      }]
  },

// 此處聲明函數(shù)方法
  methods: {
  }
})

1. 數(shù)據(jù)定義及初始化
   聲明一個(gè)變量，類型為Array，名字為list（此處你可以自由修改），為演示效果，我們預(yù)先初始化三行數(shù)據(jù)。
2. 修改前面寫的HTML，進(jìn)行數(shù)據(jù)渲染

<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 **
列表渲染，中文說明文檔請(qǐng)看 這兒
** "item in list" **
** "list"是上面javascript中定義的數(shù)組變量，剛剛?cè)绻阈薷牧薺s代碼中的list，那么此處也必須跟著修改一下。
** "item", 你也可以隨意修改，同步修改下方的item即可。

3. 運(yùn)行
   點(diǎn)擊JSFiddler左上角的Run，可以看到運(yùn)行效果。

   
   
4. 在線演示
   Jsfiddle
   簡書好像不支持插入JSFiddle的在線運(yùn)行效果？

下集預(yù)告

聯(lián)系人的新增、讀取、修改、刪除功能

系列文章目錄

1. 列表顯示
2. 表單顯示
3. 表單CRUD
4. Vue組件化
5. 從前端到后端