js

var vue = new Vue({
el:"#vueid",
data:{
selectById : "",
},
methods:{
yourMethod:function(id){
$.ajax({
type : "POST",
url : "selectCsdbById.shtml",
data : {
id : id,
},
success : function(data) {
               var message = $.parseJSON(data);//后台返回的json数据需要转为对象
vue.selectById=message;//把后台返回的JSON数据赋给selectById
},
error : function(){
alert("错误");
} });
},
updateById:function(){
$.ajax({
type : "POST",
url : "updateById.shtml",
data : vue.selectById,
success : function(data) {
alert(data);
},
error : function(){
alert("错误");
} });
},
}
})

html

<div id="vueid">
<input type="text" name="name" v-model="selectById.name" > //v-model实现数据的双向绑定
</div>

注意:使用<a>标签时,必须令href="JavaScript:void(0)",这样做的作用是禁止页面刷新(表示页面不做任何动作),否则vue渲染会失败

总结:

使用vue+ajax可以有效的减少页面的刷新,并且不需要拼接html代码,当需要更新表单时,由于v-model的双向绑定,只需要提交相应的对象就行,对象里的数据已经自动替换了。(刚接触VUE,菜鸟一枚,写的不好勿喷!!!同时希望各位大神指出不对的地方!O(∩_∩)O谢谢!!!!)

Vue+ajax的使用小结的更多相关文章

  1. vue + ajax + php 接口的使用小接

    vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...

  2. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  3. vue的路由设置小结

    vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...

  4. 前台vue的使用简单小结

    前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...

  5. vue之条件语句小结

    vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...

  6. vue+ajax+bootstrap+python实现增删改

    http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...

  7. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  8. Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

    目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...

  9. Vue学习之vue-resource小结(五)

    一.Vue实现数据交互的方式: 1.Vue除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求: 2.常见的数据请求类型有: get.post.jsonp 3.JSONP ...

随机推荐

  1. AtCoder Grand Contest 004 C - AND Grid

    题意: 给出一张有紫色点的网格,构造一张红点网格和一张蓝点网格,使红蓝点的交集为紫色点. 保证网格四周没有紫色点. 构造一下,使蓝点和红点能够到每个点. #include<bits/stdc++ ...

  2. ACCESS与SQL Server下SQL Like 查询的不同

    在ACCESS中LIKE的用法Access里like的通配符用法是这样: “?”表示任何单一字符: “*”表示零个或多个字符: “#”表示任何一个数字 所以应该是: select * from dat ...

  3. 2018.9南京网络预选赛(J)

    传送门:Problem J https://www.cnblogs.com/violet-acmer/p/9720603.html 变量解释: need[ i ] : 第 i 个房间含有的旧灯泡个数. ...

  4. mac subLime3 JSON 格式化插件安装

    1.首先找到路径:/Users/hou***in/Library/Application' 'Support/Sublime' 'Text' '3/Packages/ 2.git clone http ...

  5. GoLang基础数据类型--->数组(array)详解

    GoLang基础数据类型--->数组(array)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Golang数组简介 数组是Go语言编程中最常用的数据结构之一.顾名 ...

  6. javascript 5秒后关闭广告案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. mysql 缓存机制

    了解mysql缓存吗(顺丰) mysql缓存机制就是缓存sql 文本及缓存结果,用KV形式保存再服务器内存中,如果运行相同的sql,服务器直接从缓存中去获取结果,不需要在再去解析.优化.执行sql. ...

  8. Codeforces 950 C. Zebras

    http://codeforces.com/contest/950/problem/C 题意: 给出一个01序列,问能否将这个序列分为若干个0开头0结尾的序列 输出方案 如果有解,几个1能在一个序列就 ...

  9. MyBatis参数传递

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  10. spring注解第06课 @Value

    1.注入<bean>中的属性 支持3种类型的赋值 <bean id="person" class="com.model.Person"> ...