1. 程式人生 > >vue-cli——人員管理實例

vue-cli——人員管理實例

了解 一個點 ges public 文件組 標簽 雙向綁定 依賴包 origin

前言

在開始開發實例前,應首先了解一下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通常都是由三部分構成templatestylescript(為什麽說通常,因為也可以只有模板template,不寫任何樣式和功能,但大多數組件都會有自己的樣式和功能)。其中style有2個點,第一,可以引用外部樣式,第二,作用域scoped。

2.單文件組件的引用,需要先在script中用import引用(同時命名)格式為

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

再用components:{ [命名] }局部註冊

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



作者:一岑不冉
鏈接:http://www.jianshu.com/p/5d9b341d650f
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。

vue-cli——人員管理實例