特別聲明一： 本文主要學習並整理自51CTO課程《Vue.js 2.0之全家桶系列視頻課程》，講師湯小洋，跳轉鏈接見文末。
特別聲明二： 本文核心內容全部來自51CTO課程《Vue.js 2.0之全家桶系列視頻課程》，本人只是照着視頻課程敲了一遍代碼，並對其中大部分bootstrap樣式進行了註釋說明；所以本文定義爲翻譯。
目的說明： 爲了鞏固前幾篇vue博文學習的知識，本文這裏做一個小練習。
用戶管理 - 練習：
練習要求：
- 需要做出一個簡單的頁面(如下圖)：
![在這裏插入圖片描述]()
- 在刪除時，希望有所提示(如下圖)：
![在這裏插入圖片描述]()
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用戶管理 - 練習</title>
<script src="../../node.js/repository/node_modules/vue/dist/vue.min.js"></script>
<!-- bootstrap依賴於jquery, 因此需要先引入jquery, 然後再引入bootstrap -->
<script src="../../node.js/repository/node_modules/[email protected]@jquery/jquery.min.js"
type="text/javascript"></script>
<link href="../../node.js/repository/node_modules/[email protected]@bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script src="../../node.js/repository/node_modules/[email protected]@bootstrap/dist//js/bootstrap.min.js"
type="text/javascript"></script>
<script>
window.onload = function () {
let vm = new Vue({
el: '#jd',
data: {
users: [
{ name: '張三', age: 25, email: '[email protected]' },
{ name: '李四', age: 18, email: '[email protected]' }
],
user: {},
// 用於標記要刪除的元素索引
currentIndex: -1
},
methods: {
// 添加用戶
addUser() {
let shouldAdd = this.user.name != undefined && this.user.name != '';
if (shouldAdd) {
this.users.push(this.user);
};
this.user = {};
},
// 重置輸入框信息
resetUser() {
this.user = {};
},
// 刪除當前用戶
doDel() {
if (this.currentIndex == -1) {
this.users = [];
return;
};
/*
* splice主要用於對數組/集合進行 添加、刪除、替換，這裏只介紹其刪除功能:
* 刪除功能。兩個參數，第一個參數爲 => 要刪除的元素們的起始位置(要刪除的第一個元素的索引位置),
* 第二個參數爲 => 要刪除的元素個數。
*/
this.users.splice(this.currentIndex, 1);
}
}
});
}
</script>
</head>
<!--
**************** 聲明: 本頁面設計到的class樣式，若無特殊說明，則均爲bootstrap樣式 ****************
-->
<body>
<!-- container: 容器的基本樣式 -->
<div class="container" id="jd">
<!-- ----------------------------------- 添加人員的UI ----------------------------------- -->
<!-- text-center: 文本橫向居中 -->
<h2 class="text-center">添加用戶</h2>
<!-- form-horizontal: 表單橫向佈局 -->
<form class="form-horizontal">
<!-- form-group: 表單分組 -->
<div class="form-group">
<!-- label標籤的for屬性指向一個id值，表示: 此label標籤與哪一個元素進行了綁定-->
<!--
bootstrap的網格系統將頁面分爲12列,
按照屏幕尺寸的大小，又分爲:
.col-xs- 設備小於768px
.col-sm- 大於768px
.col-md- 大於992px
.col-lg- 大於1200px
control-label: (在右邊有輸入框的情況下. label的)文字右對齊
col-sm-2: 佔兩個(sm屏幕的)格子
col-sm-offset-2: 偏移兩個(sm屏幕的)格子
-->
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
<!-- col-sm-6: 佔6個(sm屏幕的)格子 -->
<div class="col-sm-6">
<!--
form-control: 輸入框基本樣式之一，效果等同於:
1、寬度變成了100%
2、設置了一個淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設置陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化
5、設置了placeholder的顏色爲#999
-->
<input type="text" class="form-control" id="name" v-model="user.name" placeholder="請輸入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">年 齡：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="請輸入年齡">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">郵 箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="請輸入郵箱">
</div>
</div>
<div class="form-group text-center">
<!-- btn-primary: 主要按鈕樣式 -->
<input type="button" value="添加" class="btn btn-success" v-on:click="addUser()" />
<input type="reset" value="重置" class="btn btn-warning" @click="resetUser()" />
</div>
</form>
<hr>
<!-- ----------------------------------- 展示人員信息的UI ----------------------------------- -->
<!--
table: 採用基本的表格樣式
table-bordered: 表格帶邊框
table-hover: 表格帶懸停效果
-->
<table class="table table-bordered table-hover">
<!-- text-info: 設置文本顏色級別爲通知信息級別，使用淺藍色（#31708f） -->
<caption class="h3 text-center text-info">用戶列表</caption>
<thead>
<tr>
<td class="text-center">序號</td>
<td class="text-center">姓名</td>
<td class="text-center">年齡</td>
<td class="text-center">郵箱</td>
<td class="text-center">操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(v, k) in users" class="text-center">
<td class="text-center">{{k + 1}}</td>
<td class="text-center">{{v.name}}</td>
<td class="text-center">{{v.age}}</td>
<td class="text-center">{{v.email}}</td>
<td class="text-center">
<!--
btn: 按鈕基本樣式
btn-danger: 按鈕顏色爲紅色(警示色、danger色)
btn-sm: 按鈕大小爲small
data-toggle: 以...事件爲觸發
data-target: 觸發的目標
-->
<button class="btn btn-danger btn-sm" v-on:click="currentIndex = k" data-toggle="modal"
data-target="#del">刪除</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-right">
<!--
btn: 按鈕基本樣式
btn-danger: 按鈕顏色爲紅色(警示色、danger色)
btn-sm: 按鈕大小爲small
-->
<button class="btn btn-danger btn-sm" v-on:click="currentIndex = -1" data-toggle="modal"
data-target="#del">全部刪除</button>
</td>
</tr>
</tbody>
</table>
<!-- 模態框 -->
<!--
modal: 模態框樣式
fade: 顯示/隱藏採用漸入的效果
-->
<div class="modal fade" id="del">
<!-- modal-dialog: 對話框樣式 -->
<div class="modal-dialog">
<!-- modal-content: 詳細內容 -->
<div class="modal-content">
<!--modal-header: 頭 -->
<div class="modal-header text-center">
<!--
close: 一個關閉按鈕
data-dismiss="modal": 如果你的modal彈窗裏面加上這個，那麼點擊則會關閉當前彈窗
-->
<button class="close" data-dismiss="modal">
<!-- × 表示乘號 -->
<span>×</span>
</button>
<!-- 三目運算法，在js中，當值爲undefined時，爲false; 即: 表達式console.log(undefined ? 'a' : 'b')會輸出b -->
<h3 class="modal-title" v-show="currentIndex !== -1">確認刪除
{{users[currentIndex] ? users[currentIndex].name : ''}} 嗎?</h3>
<h3 class="modal-title" v-show="currentIndex === -1">確認刪除 所有項 嗎?</h3>
</div>
<!--modal-body: 體 -->
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-danger" data-dismiss="modal" v-on:click="doDel()">確認</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
提示：代碼中除了vue的知識外，還涉及一些bootstrap的樣式知識點。
效果展示：![在這裏插入圖片描述]()
^_^ 如有不當之處，歡迎指正
^_^ 學習整理自
51CTO課程《Vue.js 2.0之全家桶系列視頻課程》講師 湯小洋
^_^ 本文已經被收錄進《程序員成長筆記(六)》，筆者JustryDeng