vue.js 初探之用户管理

来源：互联网发布：2017全球华人网络春晚编辑：程序博客网时间：2024/05/19 13:46

什么是vue.js:

是一套构建用户界面的渐进式框架。vue的核心库之专注于视图层，并且很容易和第三方或者现有的项目集成。

官网api文档：https://vuefe.cn/v2/guide/

Hello Vue:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>vue起步</title><script type="text/javascript" src="js/vue.js" ></script></head><body><!--View--><div id="aaa"><p>{{ message }}</p><input type="text" v-model="message"/>   <!--双向绑定-->                                                    </div><script type="text/javascript"> //配置项 Vue.config.devtools = false; //禁止检查代码Vue.config.productionTip = false;  //阻止启动生成生产信息  // 创建一个 Vue 实例或 "ViewModel"        // 它连接 View 与 Modelvar app = new Vue({   //  el: '#aaa',  data: {    message: 'Hello Vue!'   //Model  }});</script></body></html>

注：

1.<script type="text/javascript" src="js/vue.js" ></script> 引入vue.js文件类似与引用jqery文件。

2.{{ message }}：数据绑定最基本的形式，就是使用 “mustache” 语法

3.v-model="message"：双向绑定

运行结果:

用户管理:

用户管理：bootstrap+vue.js实现用信息的管理

view：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>管理小程序</title><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" /><script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script><script>window.onload = function() {var vm = new Vue({el: ".container",data: {users: [{name: "zwc",age: 18,emial: "850031909@qq.com"}, {name: "张文超",age: 22,emial: "2578356724@qq.com"}],user: {},nowIndex: -1},methods: {addUserInfo: function() {this.users.push(this.user);this.user = {};},delUser() {if(this.nowIndex !== -1) {this.users.splice(this.nowIndex, 1);} else {this.users = [];}}}});}</script></head><body><div class='container'><h2 class="text-center">添加用户</h2><form class="form-horizontal"><div class="form-group"><label for="name" class="control-label col-sm-2 col-sm-offset-1">姓 名:</label><div class="col-sm-6"><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-1">年 龄:</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="emial" class="control-label col-sm-2 col-sm-offset-1">邮 箱:</label><div class="col-sm-6"><input type="text" class="form-control" id="emial" v-model="user.emial" placeholder="请输入邮 箱..." /></div></div><div class="form-group text-center"><button type="button" vaule="添  加" class="btn btn-primary" v-on:click="addUserInfo">添  加</button><button type="reset" vaule="重  置" class="btn btn-primary">重  置</button></div></form><hr /><table class='table table-bordered table-hover'><caption class="h3 text-center text-info">用户列表</caption><thead><th class='text-center'>序号</th><th class='text-center'>姓名</th><th class='text-center'>年龄</th><th class='text-center'>邮箱</th><th class='text-center'>操作</th></thead><tbody><tr v-for="(user,index) in users" class="text-center"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td>{{user.emial}}</td><td><a href="#" style="color: red;" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</a></td></tr><tr class="text-right"><td colspan="5"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1"> 删除所有 </button></td></tr></tbody></table><!--删除提示信息模态框--><div class="modal" id="del"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title" v-show="nowIndex!=-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}}吗?</h4><h4 class="modal-title" v-show="nowIndex==-1">确认要删除全部用户吗?</h4></div><div class="modal-body text-right"><button class="btn btn-primary" data-dismiss="modal">取消</button><button class="btn btn-primary" data-dismiss="modal" v-on:click="delUser">确定</button></div></div></div></div></div></body></html>

注：

1.v-on:click：vue事件。

2.v-for：循环指令。

3.v-show：隐藏/显示指令(display：none;)

运行结果:

阅读全文

0 0