本文转载来源：https://www.toutiao.com/i6527798781616849415/
学习好几天的Vue语法之后，开始自己的第一个例子。学习一门新的技术，最快的办法就是将所学知识与项目结合在一起，这样才能有所提升。这个用户信息录入系统实现的主要功能是通过用户输入的内容，展示在页面上。
若有不了解Bootstart的朋友，可以点击这里开始学习：http://www.bootcss.com/
最终要实现的效果
一、准备工作
1、新文件夹取名为myUserInfo, 进入myUserInfo 文件夹内，新建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，将文件复制到myUserInfo文件夹下的lib下的bootstarp 中，即myUserInfo/lib/bootstrap/ 内。
3、下载Vue.js , 打开链接：https://cdn.jsdelivr.net/npm/vue ,点击鼠标另存为，保存Vue.js 文件至lib下的vue中，即myUserInfo/lib/vue/ 内。
注：引入bootstrap.js 相关的文件，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、 编写界面布局(表格的数据先全部写死哈),如图1-1-2：
图1-1-2
将以上代码写完后便可以运行查看效果了，但当用户输入数据后，界面上的数据并不会发生改变。对的，没错，因为我们还没编写相关的vue js代码，下面我们再改改上面的代码。
3. 首先，我们要实现当用户点击按钮“添加”或“重置”时拿到用户输入的数据并输出在日志中。具体实现如下图1-1-3：
图1-1-3
注意： 先给外层的div 设置一个id,后面有用，再给input 输入框设置一个v-model 属性，再分别给两个按钮设置v-on:click属性。 下面解释一下：
指令 v-model = "起的名字需要在Vue中声明" ， v-model 表示动态绑定输入框的内容，当输入框的内容发生变化时，vue里的数据也会发生改变，即数据双向绑定。
指令 v-on:click ="填写vue中声明的方法名字"， v-on:click 即当用户点击该按钮时会触发的事件。这里当用户点击后分别会执行Vue 中的addUser()、delUser()方法。
4. 在userinfo.html中编写Vue js代码。代码写在<head> 与</head> 之间，如下图图1-1-4：
图1-1-4
运行后，在浏览器的控制台便会输出输入日志。
5. 使用指令v-show 控制界面显示，实现如下图1-1-5：
图1-1-5
注： 删除全部按钮，当没有数据时，界面是不需要显示，没有数据只要显示暂无数据即可。
v-show ="判断值" ，当为true 表示显示，为false表示不显示。 myData.length == 0 ，若用户有数据，则length是大于0的。
6. 使用列表显示用户数据，如下图1-1-6
图1-1-6
注：显示用户的列表数据，使用了v-for 指令。
指令 v-for ="item in array" 表示循环一个数据，并将每一项的值给item， item 即每一项， array 即表示在vue data中声明用户数组。
7. 用户输入数据，保存至浏览器内存中，刷新界面后将数据显示出来。 实现如下图1-1-7
图1-1-7
注：
localStorage 是用于保存数据的，getItem(key) 表示通过key 获取， setItem(key,value) 是通过设置一个key将数据保存。
watch 表示监听data中的数据变化，这里是每当myData数据发生变化，更新localStorage 里的值，deep:true表示实时更新。
this 表示引用data中的变量，若想调用，就得用this。
this.myData.push() 改变data 中的值，push 表示将数据添加到myData中。
JSON.stringify(myData) 表示将用户输入的数据转成json字符串。
JSON.parse(window.localStorage.getItem("STOREAGE_KEY") || '[]') 这里表示用key 取出localStorage 值并用JSON进行解析成用户对象。
OK,差不多了， 接下上全部代码喽。
8. 代码如下：
<html>
<head>
<title>BootStarp With Vue 实现用户信息录入</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>暂无数据....</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>
本文章仅限于对自己学习技术的总结，方便自己能力的提高，写得不好的地方请多谅解。
