Vue bootstrap的简单结合应用

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

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

     

               <!--                作者：[e-mail]                时间：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.onload=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 ">                                                                    <!--                                                                    作者：[e-mail]                                                                    时间：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><!--            作者：[e-mail]            时间：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 来写一个轻型的网页是真的布局很美观，还有可以节约很多的时间。之后还会尝试新的写法，中间有很多的技术点还是要自己去慢慢复习。