vue数据交互

最新推荐文章于 2024-05-31 18:07:12 发布
最新推荐文章于 2024-05-31 18:07:12 发布
阅读量1.2k 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013005675/article/details/62330390
版权

交互:

$http （ajax）

 

如果vue想做交互

 

引入: vue-resouce

 

get:

获取一个普通文本数据:

<script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.get('aa.txt').then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
<body>
    <inputtype="button"value="按钮"@click="get()">
</body>

 

给服务发送数据:√

<scriptsrc="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{
                },
                methods:{
                    get:function(){
                        this.$http.get('get.php',{
                            a:1,
                            b:2
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
    <inputtype="button"value="按钮"@click="get()">

post:

<scriptsrc="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post('post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
    <inputtype="button"value="按钮"@click="get()">

 

jsonp:

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

 

 window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{
                            word:'a'
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>

    <inputtype="button"value="按钮"@click="get()">

 

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

window.onload=function(){
            new Vue({
                el:'body',
                data:{
                },
抓取路径：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=22108_1456_21088_22036_22173_22160&req=2&csor=1&cb=jQuery110207548606602254995_1490417632818&_=1490417632821       

可用路径：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

methods:{
                    get:function(){           this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:'a'
                        },{
                            jsonp:'cb'//callback名字，默认名字就是"callback"
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <inputtype="button"value="按钮"@click="get()">

新手新思路新技能
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE与后端数据交互
yunmeikeji的博客
03-09 914
使用vue框架获取后端接口数据
Vue基础（七）——数据交互（Ajax）
pro1822的博客
08-31 969
Vue基础（七）——数据交互（Ajax）
Vue前后端交互
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
vue用户交互实现
最新发布
2301_79193628的博客
05-31 1077
但是要注意，按键修饰符的命名规则与event对象中的key命名规则是不同的，event使用的是大写字母驼峰法，例如PageUp、Shift等，但是实际上，在使用按键修饰符的时候需要转化为中划线驼峰法，如page-up、shift。以上代码中，watch监听着input内的属性变换，如果输入值为空的时候便会在页面中出现not number的字样，实际上这有点类似于条件判定，但是这个watch是设置在属性里面的，可以根据不同的应用场景选择不一样的判定方式。（4）监听事件中可以使用的常用修饰符。
Vue中的数据交互有几种方式
laowang357的博客
03-13 450
Vue中的数据流是单向的，从父组件传递到子组件。父组件可以通过props将数据传递给子组件，子组件通过props接收并使用这些数据。这种方式适用于父子组件之间的简单通信。
【Vue】Vue全家桶（五）前后端交互+接口调用方法(fetch、axios、async/await)
Better_Xing的博客
05-26 3540
【Vue】Vue全家桶（五）前后端交互+接口调用方法(fetch、axios、async/await)
django和vue实现数据交互的方法
09-18
本文将详细介绍如何使用Django和Vue实现数据交互，特别关注Django的CSRF保护机制以及如何在AJAX请求中处理它。 首先，Django自带的安全特性之一是CSRF（Cross-site Request Forgery，跨站请求伪造）防护，它能防止...
使用django和vue进行数据交互的方法步骤
09-18
在开发Web应用时，前后端分离的架构变得越来越普遍，Django作为强大的Python后端框架，Vue则作为轻量级的前端MVVM库，两者结合可以实现高效的数据交互。本篇将详细介绍如何在Django与Vue项目中进行数据交互。 首先...
vue表单数据交互提交演示教程
10-16
在Vue.js框架中，表单数据的交互与提交是日常开发中的常见操作。本文将通过一个简单的示例来讲解如何在Vue中实现这一功能。首先，我们先了解一下Vue中的数据绑定和事件处理。 1. **数据绑定**： 在Vue中，我们可以...
vue.js与后台数据交互的实例讲解
10-18
Vue.js 是一款轻量级的前端JavaScript框架，它在构建用户界面时提供了高效的数据绑定和组件化功能。本文将深入探讨Vue.js如何与...通过理解这个实例，开发者可以进一步学习和掌握Vue.js在实际项目中的数据交互技巧。
vue3.0父子组件数据交互
06-11
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...
vue使用axios进行前后端数据交互(简单、详细教程)
weixin_44738322的博客
12-13 3878
vue使用axios进行前后端数据交互(简单、详细教程)
VUE基础学习笔记——04前后端交互
ZJia_X的博客
10-09 2116
一、URL 地址格式 1、传统形式的 URL 格式：schema://host:port/path?query#fragment (1) schema：协议（http、https、ftp等） (2) host：域名或IP地址 (3) port：端口，http 默认端口80，可以省略 (4) path：路径 (5) query：查询参数。例如 uname=lisi&age=12 (6) fragment：锚点（哈希Hash）用于定位页面的某个位置 2、Restful 形式的 URL HTTP请
vue与后端数据交互(ajax)：vue-resource
AndyLizh的专栏
03-01 9345
必须引入一个库：vue-resource 1.获取普通文本数据  比如:a.txt: welcomet to vue!!!11 html> head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script src="ht
初识 vue —— 最简单的前后端交互示例
weixin_30384031的博客
10-11 1万+
一、初识 vue 时的困惑 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue...
实现vue项目与web后台进行数据交互
热门推荐
xxp_style的博客
05-27 2万+
前期工具准备 安装下载Node：https://nodejs.org/en/ vue管理系统：https://github.com/xxpstyle/vue doc命令： 查看node版本：node -v 查看npm版本：npm -v 安装cnpm的淘宝镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org ...
（起步2）VUE中数据交互实例
12-29 2106
以下例子是参考网上教程实现，所以界面样式是一致的（如有雷同纯属正常），不过以下内容和图片都是通过本人实例实现 示例代码太大，我已经上传到CSDN链接地址，http://download.csdn.net/download/feixiang3447/10180609 介绍之前，先简单说下本示例实现功能效果（不包含服务端接口的开发过程） 主要实现两个页面：首页和搜索页面（包含订阅和取消订阅功能）
发现Vue.js做前端交互不错，非常轻量级
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
05-24 1万+
使用Vue.js做数据绑定和前端交互。
swiper与vue数据交互
09-27
Swiper与Vue数据交互的方法有很多种，下面是其中的一种常见方法： 首先，在Vue组件中，你可以使用v-for指令动态生成Swiper的轮播项。你可以将数据存储在Vue组件的data属性中，并使用v-for指令遍历数据，然后在轮播...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值