vue-resource实现数据的绑定、添加、删除
vue-resource实现数据的绑定、添加、删除
<!DOCTYPE html>
<html lang="en">
<head>
<title>简单用户管理</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue-resource是基于vue的，应在引用vue之后引用vue-resource-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<div id="app">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">基于vue.js的简单用户管理</h3>
</div>
<div class="panel-body form-inline ">
<label>
<!--v-focus为自定义指令的调用，元素自动获得焦点-->
username:
<input type="text" class="form-control" v-model="username" v-focus>
</label>
<label>
userpwd:
<input type="text" class="form-control" v-model="userpwd">
</label>
<button class="btn btn-primary" @click="add()">Create</button>
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>username</th>
<th>userpwd</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists" :key="list.userid">
<td>{{list.username}}</td>
<td>{{list.userpwd}}</td>
<td>
<!--prevent为阻止事件的默认行为-->
<a href="" @click.prevent="del(list.userid)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
Vue.http.options.root = 'http://localhost:18227/' //设置全局请求根路径
Vue.http.options.emulateJSON = true; //启用from格式的请求 //自定义指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
},
}); new Vue({
el: '#app',
data: {
username: "",
userpwd: "",
lists: []
},
methods: {
del(userid) {
this.$http.get('Index/DelJson?userid=' + userid).then((result) => {
if (result.body.State === 1) {
this.getAllLists();
}
}).catch((err) => {
alert("获取数据失败");
});
},
add() {
var list = { username: this.username, userpwd: this.userpwd };
this.$http.post('Index/AddJson', list, {}).then((result) => {
this.username = this.userpwd = "";
if (result.body.State === 1) {
this.getAllLists();
}
}).catch((err) => {
alert("获取数据失败");
});
},
getAllLists() {
this.$http.get('Index/ReturnJson').then((result) => {
this.lists = result.body;
}).catch((err) => {
alert("获取数据失败");
});
}
},
created() {
console.log("第一步")
// 实例初始化完成
this.getAllLists();
},
})
</script>
</html>
服务端代码为C#，以下是控制器
public string ReturnJson()
{
var userlist = db.User.Where<User>(u => true);
return JsonConvert.SerializeObject(userlist);
}
public JsonResult AddJson(User user)
{
MsgJson m = new MsgJson();
db.User.Add(user);
if (db.SaveChanges() > )
{
m.Msg = "请求成功";
m.State = ;
}
else {
m.Msg = "请求失败";
m.State = ;
}
return Json(m);
}
public JsonResult DelJson(string userid)
{
int did = int.Parse(userid);
List<User> userlist =db.User.Where(u => u.userid == did).ToList();
User user = userlist[];
db.User.Remove(user);
MsgJson m = new MsgJson();
if (db.SaveChanges() > )
{
m.Msg = "请求成功";
m.State = ;
}
else
{
m.Msg = "请求失败";
m.State = ;
}
return Json(m, JsonRequestBehavior.AllowGet);
}
vue-resource实现数据的绑定、添加、删除的更多相关文章
- 从Object.definedProperty中看vue的双向数据的绑定
前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- vue 父子组件数据双向绑定
父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...
- 针对vue中请求数据对象新添加的属性不能响应式的解决方法
1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
随机推荐
- python strip()函数和Split函数的用法总结
strip函数原型 声明:s为字符串,rm为要删除的字符序列. 只能删除开头或是结尾的字符或是字符串.不能删除中间的字符或是字符串. s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除 ...
- WebService-----Xfire
Xfire相对Axis2 个人感觉相对简单一点,因为myEclipse上可以自动生成.而且在目前来讲,Xfire也是更受欢迎一点. 首先说明Xfire所用jar包:http://download.cs ...
- 将wiki人脸数据集中的图片按男女分类
import shutil f_in = 'D:/wiki_crop' # 读取文件中图片信息根据性别分类图片到对应目录中 dirroot = "D:/" f = open(dir ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- Javascript的内存泄漏分析
作为程序员(更高大尚的称谓:研软件研发)的我们,无论是用Javascript,还是.net, java语言,肯定都遇到过内存泄漏的问题.只不过他们都有GC机制来帮助程序员完成内存回收的事情,如果你是C ...
- Python爬虫入门教程 59-100 python爬虫高级技术之验证码篇5-极验证识别技术之二
图片比对 昨天的博客已经将图片存储到了本地,今天要做的第一件事情,就是需要在两张图片中进行比对,将图片缺口定位出来 缺口图片 完整图片 计算缺口坐标 对比两张图片的所有RBG像素点,得到不一样像素点的 ...
- 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别
一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...
- Docker进阶之六:网络管理
一.默认网络 安装Docker时会自动创建三个网络:docker network ls 列出网络: # docker network ls NETWORK ID NAME DRIVER SCOPE 5 ...
- MongoDB分片群集的部署（用心描述，详细易懂）！！
概念: MongoDB分片是使用多个服务器存储数据的方法,以支持巨大的数据存储和对数据进行存储 优势: 1.减少了每个分片需啊哟处理的请求数,群集可以提高自己的存储容量和吞吐量 2.减少了每个分片存储 ...
- asp.net Core 中AuthorizationHandler 实现自定义授权
前言 ASP.NET Core 中 继承的是AuthorizationHandler ,而ASP.NET Framework 中继承的是AuthorizeAttribute. 它们都是用过重写里面的方 ...