vue-cli入門(三)——人員管理實例 前言 實例功能簡述 創建項目 項目開發

前言

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

實例功能簡述

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

創建項目

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

接着安裝依賴包,進入項目,輸入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作爲項目的首頁。

1.2 編輯首頁index.vue

接着在路由配置中引入我們剛創建的首頁,並更改一下路由配置

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

2. 添加底部導航組件

因爲底部導航組件是公共組件,在兩個頁面都有引用,所以我們把它建在components文件夾下,命名爲footer.vue。

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

對這個頁面主要講兩點:

(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去訪問

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

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>

3.多使用vue指令,常用的有v-show,v-if,v-on,v-bind,v-model

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章