vue-cli——人員管理實例

前言

在開始開發實例前，應首先了解一下vue-cli的項目結構。接着咱們一塊兒來實現一個小demo——人員管理，功能簡單，經過這個實例讓你們熟悉使用vue-cli開發項目的一些操做，加深對vue-cli項目結構的印象。

實例功能簡述

人員管理項目，有兩個頁面，首頁和管理頁，管理頁主要實現一個簡單的增刪改功能，各個功能以下所示（附github地址）

路由

新增操做

修改操做

刪除操做

建立項目

首先第一步，就是建立咱們的項目，打開cmd，進入到想要建立項目的目錄下，我這裏是到d盤的根目錄下，而後輸入vue init webpack manage，敲回車。

建立項目（1）

建立項目（2）

接着安裝依賴包，進入項目，輸入npm install

安裝依賴包

接着輸入npm run dev 運行項目，能夠看到瀏覽器自動打開，顯示以下

項目初始顯示

項目開發

1.建立首頁

由於我作的人員管理項目是wap端的，因此咱們首先在主頁index.html中加上meta標籤

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

1.1 新建目錄

爲方便管理，咱們在src文件夾下新建一個views文件夾，用於存放全部的模塊組件。

在views文件夾下新建index文件夾，再在index文件夾下新建index.vue做爲項目的首頁。

新建首頁index.vue

1.2 編輯首頁index.vue

首頁模板

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

更改路由

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

 

2. 添加底部導航組件

由於底部導航組件是公共組件，在兩個頁面都有引用，因此咱們把它建在components文件夾下，命名爲footer.vue。

底部導航組件頁面內容

div的fixed樣式寫在了公共樣式public.css裏面，並在App.vue中引入，做用域設爲全局

公共樣式public.css

引入外部css

對這個頁面主要講兩點：

（1）<router-link>

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

（2）scoped

在<style>標籤上添加scoped，聲明做用域，樣式效果只在該頁面內生效，不污染全局。

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

咱們剛剛建立了footer.vue，但還未引入，在首頁模塊views/index/index.vue中引入該組件

在首頁中引入底部導航組件

使用組件步驟：

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

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

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

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

 

4.建立人員管理頁面

4.1 建立頁面

一樣的，由於人員管理能夠算另一個模塊，因此咱們在src/views/新建一個文件夾manage，再在manage文件夾下新建index.vue

管理頁面

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

如今管理頁面建立完成，但還需在路由配置中引入才能夠經過路由/manage去訪問

增長/manage路由

接下來就去瀏覽器檢驗，咱們定義的兩個路由之間的跳轉

 

4.2 爲底部導航綁定class

能夠看到因爲沒有給底部導航設置active狀態的樣式，切換起來不是很明顯，因此咱們能夠給底部導航綁定class值

在首頁使用<foot-nav>時綁定class類名isIndex

 

這裏使用v-bind指令來綁定class，第一個屬性爲class名字，第二個屬性爲布爾值，爲true，則表示該組件有這個class，爲false則沒有。因此，當訪問首頁模塊時，底部導航有一個類名isIndex，咱們能夠在底部導航內部爲isIndex設置樣式。

一樣的，也在管理頁面manage.vue爲底部導航綁定class isManage。

另外還需注意一點，data在組件內部得寫爲一個函數，經過return返回數據值，這是由於組件之間是共享的，可是要保證它們各自的數據是私有，互不影響的，因此要給每一個組件返回新的data對象。這一點官網也有說明vuejs官網——data必須是函數。

返回瀏覽器查看，綁定的class已經生效

 

4.3 編寫功能

前面管理頁面把姓名列表寫死了，爲方便實現增刪改功能，接下來咱們得經過數據模擬來實現列表渲染。

定義數據

（1）在data函數下新增peoples數組

 

（2）列表渲染

 

列表渲染用v-for指令，item爲自定義的名字，指向數組中的每個個體，peoples爲咱們在data函數中定義的數組名字，模板渲染採用{{ }}

返回瀏覽器查看效果

 

4.3.1 新增功能

控制輸入框顯示與隱藏

咱們先將新增人員輸入框隱藏，當點擊「新增」按鈕時再顯示，要實現這個功能咱們須要用到條件渲染。

 

 

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

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

同時咱們給按鈕增長一個點擊事件（v-on是綁定事件指令），用於控制showAdd的值從而控制輸入框div的隱藏與顯示

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

查看效果

 

新增事件

給輸入框雙向綁定其輸入的數據，給輸入區域的「肯定」按鈕綁定一個事件去獲取輸入框輸入的數據並保存進數組。

 

 

v-model指令是雙向綁定，通常用於表單組件

當輸入框的值改變，其綁定的nameValue跟着改變

同理，當綁定的nameValue值改變，輸入框的值也跟着改變

咱們這裏還作了判斷，若是什麼都不輸，或輸入空格就彈出提示，只有當輸入的值不爲空時再保存

查看效果

 

4.3.2 刪除功能

刪除功能有一個重點，咱們得獲取列表的index索引值，來判斷到底刪除哪個值

更改一下列表循環，加入索引，並將索引值綁定到td標籤上，經過event點擊事件去獲取td標籤上的id，從而去刪除索引值爲id的值

 

 

查看效果

 

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來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。