前言

在開始開發例項前，應首先了解一下vue-cli的專案結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個例項讓大家熟悉使用vue-cli開發專案的一些操作，加深對vue-cli專案結構的印象。

例項功能簡述

建立專案

接著安裝依賴包，進入專案，輸入npm install

接著輸入npm run dev 執行專案，可以看到瀏覽器自動開啟，顯示如下

專案開發

1.建立首頁

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

1.1 新建目錄

在views資料夾下新建index資料夾，再在index資料夾下新建index.vue作為專案的首頁。

1.2 編輯首頁index.vue

接著在路由配置中引入我們剛建立的首頁，並更改一下路由配置

開啟瀏覽器，看到更改的內容已經自動渲染

2. 新增底部導航元件

div的fixed樣式寫在了公共樣式public.css裡面，並在App.vue中引入，作用域設為全域性

對這個頁面主要講兩點：

（1）<router-link>

可以看到footer.vue使用了<router-link>標籤，該標籤主要實現跳轉連結功能，屬性to='/'即是跳轉到path為'/'的路徑（即我們在路由配置中定義的Index路由）

（2）scoped

在<style>標籤上新增scoped，宣告作用域，樣式效果只在該頁面內生效，不汙染全域性。

3. 在首頁中引入底部導航元件

使用元件步驟：

（1）引入元件     import FooterNav from '../../components/footer.vue'

（2）區域性註冊     注意寫在export default內部，components:{FooterNav}

（3）使用元件    <footer-nav></footer-nav> 注意命名，駝峰法定義的元件FooterNav需在使用時用短橫線連線<footer-nav>

再回到瀏覽器，可以看到首頁已經有底部導航了

4.建立人員管理頁面

4.1 建立頁面

<template>
  <div class="manage tc">
    <button class="add_btn">新增</button>
    <div class="input-area">
      <input type="text" placeholder="請輸入人員姓名">
      <button>確定</button>
    </div>
    <table>
      <tr>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>張三</td>
        <td><span>編輯</span><span>刪除</span></td>
      </tr>
    </table>
    <footer-nav></footer-nav>
  </div>

</template>

<script>
  import FooterNav from '../../components/footer.vue'
  export default{
    components: {
      FooterNav
    }
  }
</script>

<style scoped>
...
</style>同樣的，也在管理頁面manage.vue

data(){
      return{
        isNowPage: true,
        peoples: [{'name':'Jack'},{'name':'Joe'}]
      }
    }

同樣在管理頁面引入了底部導航元件footer.vue

現在管理頁面建立完成，但還需在路由配置中引入才可以通過路由/manage去訪問

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '../views/index/index'
import Manage from '../views/manage/index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
name: 'Index',
component: Index
    },
{
      path: '/manage',
name: 'Manage',
component: Manage
    }
  ]
})

4.2 為底部導航繫結class

在首頁使用<foot-nav>時繫結class類名isIndex

<template>
  <div>
    歡迎來到人員管理系統
    <footer-nav v-bind:class="{'isIndex': isNowPage}"></footer-nav>
  </div>

</template>

<script>
  import FooterNav from '../../components/footer.vue'
  export default{
    components: {
      FooterNav
    },
    data(){
      return{
        isNowPage: true
      }
    }
  }
</script>

同樣的，也在管理頁面manage.vue為底部導航繫結class isManage。

另外還需注意一點，data在元件內部得寫為一個函式，通過return返回資料值，這是因為元件之間是共享的，但是要保證它們各自的資料是私有，互不影響的，所以要給每個元件返回新的data物件。

返回瀏覽器檢視，繫結的class已經生效

4.3 編寫功能

定義資料

（1）在data函式下新增peoples陣列

data(){
      return{
        isNowPage: true,
        peoples: [{'name':'Jack'},{'name':'Joe'}]
      }
    }

（2）列表渲染

<tr v-for="item in peoples">
  <td>{{item.name}}</td>
  <td><span>編輯</span><span>刪除</span></td>
</tr>

4.3.1 新增功能

我們先將新增人員輸入框隱藏，當點選“新增”按鈕時再顯示，要實現這個功能我們需要用到條件渲染。

<button class="add_btn" v-on:click="add">新增</button>
<div class="input-area" v-show="showAdd">
  <input type="text" placeholder="請輸入人員姓名">
  <button>確定</button>
</div>

data(){
      return{
        isNowPage: true,
        showAdd: false,
        peoples: [{'name':'Jack'},{'name':'Joe'}]
      }
 },
 methods: {
  add(){
    this.showAdd = true;
  }
 }

首先用到了v-show指令，showAdd是一個布林值，為true則渲染，為false則隱藏

v-show指令與v-if指令的區別就在於，前者一開始就載入，更適用於頻繁的切換，後者需首先判斷布林值，為true才載入渲染

同時我們給按鈕增加一個點選事件（v-on是繫結事件指令），用於控制showAdd的值從而控制輸入框div的隱藏與顯示

vue中方法用methods:{}包裹，裡面的add(){}也等同於add:function(){}

新增事件

給輸入框雙向繫結其輸入的資料，給輸入區域的“確定”按鈕繫結一個事件去獲取輸入框輸入的資料並儲存進陣列。

<div class="input-area" v-show="showAdd">
  <input type="text" placeholder="請輸入人員姓名" v-model="nameValue">
  <button v-on:click="addName">確定</button>
</div>

data(){
      return{
        isNowPage: true,
        showAdd: false,
        peoples: [{'name':'Jack'},{'name':'Joe'}],
        nameValue: ''
      }
 },
 methods: {
  add(){
    this.showAdd = true;
  },
  addName(){
    var v = this.nameValue;
    if(v.trim() == ""){
      alert("請輸入新增人員姓名");
    }else{
       var data ={};
       data.name = v;
       this.peoples.push(data);
    }
  }
 }

4.3.2 刪除功能

更改一下列表迴圈，加入索引，並將索引值繫結到td標籤上，通過event點選事件去獲取td標籤上的id，從而去刪除索引值為id的值

<tr v-for="(item,index) in peoples">
  <td>{{item.name}}</td>
  <td v-bind:id="index"><span>編輯</span><span v-on:click="del">刪除</span></td>
</tr>

del(e){
  var id = e.target.offsetParent.id;
  this.peoples.splice(id,1);
}

4.3.3 編輯功能

當點選“編輯”字樣時，觸發edit事件，edit事件主要控制showEdit為true，讓編輯輸入區域渲染出來，同時還獲取td標籤上

的id值，儲存到一個變數editId中。

同樣也給編輯輸入框雙向繫結一個值newName。

當點選“確定”按鈕時，觸發editName事件，editName事件首先獲取editId的值以及input繫結的newName值，再更改索引值為

editId的name屬性

檢視效果

到這裡，我們也就實現了一個具有增刪改功能的小demo。

再把本例中用到的重要的知識點簡單梳理一遍

1.每一個單檔案元件.vue通常都是由三部分構成template、style、script（為什麼說通常，因為也可以只有模板template，不寫任何樣式和功能，但大多陣列件都會有自己的樣式和功能）。其中style有2個點，第一，可以引用外部樣式，第二，作用域scoped。

2.單檔案元件的引用，需要先在script中用import引用（同時命名）格式為

import [命名] from [相對路徑]

再用components:{ [命名] }區域性註冊

最後在模板中使用，注意命名格式。如果是駝峰HeadNav或headNav，使用時就是<head-nav>

原文連結http://www.jianshu.com/p/5d9b341d650f