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的在线文件给大家引用: <!-- 最新版 ...
随机推荐
- angular开发环境配置全套教程
第一步.安装node.js 1.需要下载的文件路径:https://nodejs.org/en/download/ 2.安装nodejs: 3.验证node.js 4.npm安装以及验证: npm的安 ...
- SDRAM读写状态解析
SDRAM的写状态流程 IDLE状态到WRITE状态 (1)在IDLE状态需要先给ACT命令激活某一行,此时处于Row Active状态. (2)在Row Active状态之后,给Write命令则会进 ...
- 前端随笔 - JavaScript中的闭包
前阵子重新复习了一下js基础知识,第一篇博客就以分享闭包心得为开始吧. 首先,要理解闭包,就必须要了解一个概念:作用域链. 作用域链 作用域代表着可访问变量的集合,变量分为全局变量和局部变量两种,在函 ...
- Java转Ruby【快速入门】
最近参加实习了,公司的技术栈中需要用到 Ruby 以及 Rails 框架,所以算是开始了踩坑之旅吧.. Ruby 简介 网上的简介要搜都能搜到,具体涉及的包括历史啦之类这里不再赘述,提几个关键词吧: ...
- 【机器学习基础】熵、KL散度、交叉熵
熵(entropy).KL 散度(Kullback-Leibler (KL) divergence)和交叉熵(cross-entropy)在机器学习的很多地方会用到.比如在决策树模型使用信息增益来选择 ...
- 【重学计算机】操作系统D6章：并发程序设计
1. 并发程序的基本概念 程序顺序性 内部顺序性:CPU严格按照顺序执行指令 外部顺序性:程序员设计程序时往往用顺序设计的思想 顺序程序特性 程序执行的顺序性 计算环境的封闭性: 程序执行时犹如独占资 ...
- 用Docker解决坑爹的环境搭建系列——mysql:5.6
sudo docker pull mysql:5.6 mkdir -p /data/docker/mysql/data /data/docker/mysql/logs /data/docker/mys ...
- asp.net core 系列之webapi集成Dapper的简单操作教程
Dapper也是是一种ORM框架 这里记录下,使用ASP.NET 集成 Dapper 的过程,方便自己查看 至于Dapper的特性以及操作可以参考Dapper官方文档 1.创建数据库相关 在Sql S ...
- Gaussian Mixture Models and the EM algorithm汇总
Gaussian Mixture Models and the EM algorithm汇总 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. 漫谈 ...
- 以Windows服务方式运行.NET Core程序
在之前一篇博客<以Windows服务方式运行ASP.NET Core程序>中我讲述了如何把ASP.NET Core程序作为Windows服务运行的方法,而今,我们又遇到了新的问题,那就是: ...