vue基础之使用获取、发布、jsonp实现交互功能示例

本文实例讲述了某视频剪辑软件基础之使用获取、发布、jsonp实现交互功能。分享给大家供大家参考，具体如下：

一、如果某视频剪辑软件想做交互，引入： vue资源

二获得方式

1、获取获取一个普通文本数据：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data : } }，methods : { get : function(){ this .$http.get('a.txt ').然后（函数{警报(紧急状态)；//成功警报(研究数据)；},函数{警报(紧急状态)；//失败返回警报(研究数据)；});} } });};/脚本/流浆池输入类型='按钮'值='按钮@click='get()'/body/html2、get给服务发送数据：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data : } }，methods : { get : function(){ this .$http.get('get.php '，{ a:1，b:2 }).然后（函数(RES){警报(RES .数据)；},函数{警报(紧急状态)；});} } });};/脚本/流浆池输入类型='按钮'值='按钮@click='get()'/body/html三、邮政方式

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data : } }，methods : { get : function(){ this .$http.post('post.php '，{ a:1，b:20 }，{ a仿真器：街).然后（函数(RES){警报(RES .数据)；},函数{警报(紧急状态)；});} } });};/脚本/流浆池输入类型='按钮'值='按钮@click='get()'/body/html四、jsonp方式

获取百度接口

查看响应数据

跨域请求请求百度接口

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data : } }，methods : { get : function(){ this .$ http。jsonp(' https://sp 0。百度。com/5a 1 fazu 8 aa 54 nxg ko9 wtanf6hy/su '，{ wd:'a' }，{ jsonp:'cb'//回调函数名称}).然后（函数警报数据。s)；},函数{警报(紧急状态)；});} } });};/脚本/流浆池输入类型='按钮'值='按钮@click='get()'/body/htmljsonp请求360接口

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data : } }，methods : { get : function(){ this .$ http。jsonp(' https://sug。所以。360 .cn/improve '，{ word:'a' }).然后（函数警报数据。s)；},函数{警报(紧急状态)；});} } });};/脚本/流浆池输入类型='按钮'值='按钮@click='get()'/body/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。