vue.js 初探之用户管理
2017-08-09 21:17
225 查看
什么是vue.js:
是一套构建用户界面的渐进式框架。vue的核心库之专注于视图层，并且很容易和第三方或者现有的项目集成。
官网api文档：https://vuefe.cn/v2/guide/
Hello Vue:
注：
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;)
运行结果:
是一套构建用户界面的渐进式框架。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 与 Model
var 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;)
运行结果:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（1）
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（2）
- Vue.js 初探指令
- Node.js + Express 4.x + MongoDB 构建登录注册-简易用户管理（四）
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- Vue.js数据状态管理-Vuex（-）
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（1）
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（2）
- vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
- linux下用户管理初探
- Vue.js状态管理工具Vuex快速上手
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（2）
- Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统
- vue--信息管理平台之main.js
- [Vue.js启航]——使用Vuex进行状态管理
- Java 开发基于Zookeeper,Spring，vue.js的高并发多用户模块化微信商城系统(一) 项目介绍
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（4）
- vue项目用户登录状态管理，vuex+localStorage实现
- 使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（2）
- vue.js快速搭建图书管理平台