Vue bootstrap的简单结合应用

今天简单的写一篇关于前端VUE的小框架的应用，至于关于VUE的开发文档自己可以去GITHUB上面去下载。关于VUE就是一个框架库比较小巧上手。

常用指令：v-on:click   v-model  v-for

     

               <!--
                	作者：2294592185@qq.com
                	时间：2017-08-02
                	描述：注意引进的先后顺序 需要先引进JQUERY 再引入CSS文件
                -->
		<script src="bootstrap/jquery-3.2.1.min.js"></script>
		<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
		<script src="bootstrap/bootstrap.js"></script>
		<script src="vue-dev/dist/vue.js"></script>

在这里需要注意引进的顺序，不然在之后的代码运行过程中会产生代码错误，注意插入的顺序。

<script>
			window.οnlοad=function(){
				new Vue({
				el:'#box',
				data:{
					myData:[],
					username:'',
					age:'',
					nowIndex:-100
				},
				methods:{
					add:function(){
						this.myData.push({
							name:this.username,
							age:this.age
						});
						this.username='';
						this.age='';
					},
					deleteMsg:function(n){
						if(n==-2){
							this.myData=[];
						}else{
						this.myData.splice(n,1);
						}
					}
				}
				});
			};
		</script>

这是VUE的编程，相对于以前传统的写法很大的程度上减轻很多代码的复杂度。

		<div class="container" id="box">
			<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="add()"/>
					<input type="reset" value="重置" class="btn btn-danger"  />
				</div>
			</form>
			<hr>
			<table class="table table-bordered table-hover">
				<caption class=" h3 text-center">用户信息表</caption>
			<tr class="text-danger">
				<th class="text-center">序号</th>
				<th class="text-center">名字</th>
				<th class="text-center">年龄</th>
				<th class="text-center">操作</th>
			</tr>	
			<tr class="text-center" v-for="(item,index) in myData ">
                                                                    <!--
                                                                    	作者：2294592185@qq.com
                                                                    	时间：2017-08-02
                                                                    	描述：$index在2.0版本以上已经无法使用了
                                                                    -->
				<td>{{index+1}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>
					<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"v-on:click="nowIndex=index">删除</button>
				</td>
			</tr>
				<!--<tr class="text-center" v-for="(item,index) in myData ">
				<td>{{index}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>
					<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
				</td>
			</tr>-->
			<tr v-show="myData.length!==0">
				<td colspan="4" class="text-right">
					<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>
				</td>
			</tr>
				<tr v-show="myData.length==0">
				<td colspan="4" class="text-center text-muted">
					<p>暂无数据.....</p>
				</td>
			</tr>
			</table>
			
			<!--
            	作者：2294592185@qq.com
            	时间：2017-08-02
            	描述：模态框 弹出框
            -->
            <div role="dialog" class="modal fade" id="layer">
            	<div class="modal-dialog">
            		<div class="modal-content">
            			<div class="modal-header">
            				<button type="button" class="close" data-dismiss="modal">
            					<span>×</span>
            				</button>
            				<h4 class="modal-title">确认删除吗？</h4>
            			</div>
            			<div class="modal-body text-right">
            				<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
            				<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
            			</div>
            		</div>
            	</div>
            </div>
		</div>

第一次用VUE 来写一个轻型的网页是真的布局很美观，还有可以节约很多的时间。之后还会尝试新的写法，中间有很多的技术点还是要自己去慢慢复习。