本文轉(zhuǎn)載來源：https://www.toutiao.com/i6527798781616849415/
學(xué)習(xí)好幾天的Vue語法之后逗爹，開始自己的第一個例子。學(xué)習(xí)一門新的技術(shù)嚎于，最快的辦法就是將所學(xué)知識與項目結(jié)合在一起掘而，這樣才能有所提升。這個用戶信息錄入系統(tǒng)實現(xiàn)的主要功能是通過用戶輸入的內(nèi)容匾旭，展示在頁面上镣屹。
若有不了解Bootstart的朋友，可以點擊這里開始學(xué)習(xí)：http://www.bootcss.com/
最終要實現(xiàn)的效果
一女蜈、準(zhǔn)備工作
1、新文件夾取名為myUserInfo, 進(jìn)入myUserInfo 文件夾內(nèi)色瘩，新建html文件伪窖，取名userinfo.html，新建文件夾lib, 用于存放引入的文件居兆。
2覆山、下載bootstarp 第三方庫：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip，解壓后泥栖，找到里面的文件 jquery-3.3.1.min.js簇宽，bootstrap.css，bootstrap.min.js吧享，將文件復(fù)制到myUserInfo文件夾下的lib下的bootstarp 中魏割，即myUserInfo/lib/bootstrap/ 內(nèi)。
3钢颂、下載Vue.js , 打開鏈接：https://cdn.jsdelivr.net/npm/vue ,點擊鼠標(biāo)另存為钞它，保存Vue.js 文件至lib下的vue中，即myUserInfo/lib/vue/ 內(nèi)殊鞭。
注：引入bootstrap.js 相關(guān)的文件遭垛，bootsrap 的使用需要jquery文件，所以若使用正常使用操灿，還需要下載jquery-3.3.1.min.js 下載地址：https://code.jquery.com/jquery-3.3.1.min.js
二锯仪、代碼部分（不要急，會上代碼的）
- 使用notepad++記事本打開userinfo.html趾盐，首先編寫html框架并入引所需要的css樣式及js 文件庶喜，如圖1-1-1
圖1-1-1
2、 編寫界面布局(表格的數(shù)據(jù)先全部寫死哈),如圖1-1-2：
圖1-1-2
將以上代碼寫完后便可以運行查看效果了，但當(dāng)用戶輸入數(shù)據(jù)后蜒简，界面上的數(shù)據(jù)并不會發(fā)生改變瘸羡。對的，沒錯搓茬，因為我們還沒編寫相關(guān)的vue js代碼犹赖，下面我們再改改上面的代碼。
3. 首先卷仑，我們要實現(xiàn)當(dāng)用戶點擊按鈕“添加”或“重置”時拿到用戶輸入的數(shù)據(jù)并輸出在日志中峻村。具體實現(xiàn)如下圖1-1-3：
圖1-1-3
注意： 先給外層的div 設(shè)置一個id,后面有用锡凝，再給input 輸入框設(shè)置一個v-model 屬性粘昨，再分別給兩個按鈕設(shè)置v-on:click屬性。 下面解釋一下：
指令 v-model = "起的名字需要在Vue中聲明" 窜锯， v-model 表示動態(tài)綁定輸入框的內(nèi)容张肾，當(dāng)輸入框的內(nèi)容發(fā)生變化時，vue里的數(shù)據(jù)也會發(fā)生改變锚扎，即數(shù)據(jù)雙向綁定吞瞪。
指令 v-on:click ="填寫vue中聲明的方法名字"， v-on:click 即當(dāng)用戶點擊該按鈕時會觸發(fā)的事件驾孔。這里當(dāng)用戶點擊后分別會執(zhí)行Vue 中的addUser()芍秆、delUser()方法。
4. 在userinfo.html中編寫Vue js代碼翠勉。代碼寫在<head> 與</head> 之間妖啥，如下圖圖1-1-4：
圖1-1-4
運行后眉菱，在瀏覽器的控制臺便會輸出輸入日志迹栓。
5. 使用指令v-show 控制界面顯示，實現(xiàn)如下圖1-1-5：
圖1-1-5
注： 刪除全部按鈕克伊，當(dāng)沒有數(shù)據(jù)時，界面是不需要顯示华坦，沒有數(shù)據(jù)只要顯示暫無數(shù)據(jù)即可愿吹。
v-show ="判斷值" ，當(dāng)為true 表示顯示惜姐，為false表示不顯示犁跪。 myData.length == 0 椿息，若用戶有數(shù)據(jù)，則length是大于0的坷衍。
6. 使用列表顯示用戶數(shù)據(jù)寝优，如下圖1-1-6
圖1-1-6
注：顯示用戶的列表數(shù)據(jù)枫耳，使用了v-for 指令乏矾。
指令 v-for ="item in array" 表示循環(huán)一個數(shù)據(jù)，并將每一項的值給item迁杨， item 即每一項钻心， array 即表示在vue data中聲明用戶數(shù)組。
7. 用戶輸入數(shù)據(jù)铅协，保存至瀏覽器內(nèi)存中捷沸，刷新界面后將數(shù)據(jù)顯示出來。 實現(xiàn)如下圖1-1-7
圖1-1-7
注：
localStorage 是用于保存數(shù)據(jù)的痒给，getItem(key) 表示通過key 獲取， setItem(key,value) 是通過設(shè)置一個key將數(shù)據(jù)保存预皇。
watch 表示監(jiān)聽data中的數(shù)據(jù)變化侈玄，這里是每當(dāng)myData數(shù)據(jù)發(fā)生變化，更新localStorage 里的值吟温，deep:true表示實時更新序仙。
this 表示引用data中的變量，若想調(diào)用鲁豪，就得用this潘悼。
this.myData.push() 改變data 中的值，push 表示將數(shù)據(jù)添加到myData中爬橡。
JSON.stringify(myData) 表示將用戶輸入的數(shù)據(jù)轉(zhuǎn)成json字符串治唤。
JSON.parse(window.localStorage.getItem("STOREAGE_KEY") || '[]') 這里表示用key 取出localStorage 值并用JSON進(jìn)行解析成用戶對象。
OK,差不多了糙申， 接下上全部代碼嘍宾添。
8. 代碼如下：
<html>
<head>
<title>BootStarp With Vue 實現(xiàn)用戶信息錄入</title>
<link href = "lib/bootstrap/bootstrap.css" rel = "stylesheet"/>
<script src ="lib/bootstrap/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src = "lib/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src = "lib/vue/vue.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function (){
var tempData = JSON.parse(window.localStorage.getItem("STOREAGE_KEY") || '[]') // 取出瀏覽器中的值
console.log("======tempData2====="+tempData)
new Vue({
el:"#app",
data: {
myData:tempData,
username:"",
age:""
},
watch:{
myData:{
handler: function(myData){
localStorage.setItem("STOREAGE_KEY",JSON.stringify(myData)); // 保存用戶輸入的信息
},
deep:true
}
},
methods:{
addUser(){
console.log("======addUser===========");
this.myData.push({
name:this.username,
uage:this.age
});
this.username = "";
this.age = "";
},
delUser(){
console.log("======delUser===========");
}
}
});
};
</script>
</head>
<body>
<div class="container" id="app">
<form role="form">
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" id="username" class="form-control" placeholder="請輸入用戶名" v-model="username"/>
</div>
<div class="form-group">
<label for="age">年 齡:</label>
<input type="text" id="age" class="form-control" placeholder="請輸入年齡" v-model="age"/>
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="addUser()"/>
<input type="button" value="重置" class="btn btn-danger" v-on:click="delUser()"/>
</div>
</form>
<div style="border-bottom:1px solid red"></div>
<table class="table table-bordered table-hover">
<caption class="text-primary text-center h2">用戶信息表</caption>
<tr class="text-center text-danger">
<td>序號</td>
<td>名字</td>
<td>年齡</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in myData" class="text-center">
<td>{{ index}}</td>
<td>{{item.name}}</td>
<td>{{item.uage}}</td>
<td><button class="btn btn-primary btn-small" data-toggle="modal" data-target="#myModal">刪除</button></td>
</tr>
<tr v-show="myData.length != 0">
<td colspan="3" style="border-right:none"></td>
<td class="text-center" style="border-left:none"><button class="btn btn-danger btn-small">刪除全部</button></td>
</tr>
<tr v-show="myData.length == 0">
<td colspan="4" class="text-center text-muted"><p>暫無數(shù)據(jù)....</p></td>
</tr>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
溫馨提示
</h4>
</div>
<div class="modal-body">
您確定要刪除嗎？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">取消
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
確定
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
本文章僅限于對自己學(xué)習(xí)技術(shù)的總結(jié)柜裸，方便自己能力的提高缕陕，寫得不好的地方請多諒解。
