vuejs与外界通信

来源：互联网发布：7.0数据库编辑：程序博客网时间：2024/05/22 14:14

源代码：

其中在vue项目中用npm安装jquery，vue-resource插件的的命令行：

npm install jquery

npm install vue-resource

import VueResource from 'vue-resource'    import Vue from 'vue'    import $ from 'jquery'    import A from './a.js'    Vue.use(VueResource);    export default {        name: 'hello',        props: ['src'],        data: function () {            return {                srcD: ''            }        },        mounted: function () {            this.srcD = this.src        },        watch: {            srcD: function (newV, oldV) {                console.info('src:' + this.srcD)                var options = {                    method: 'GET',                    url: 'http://www.baidu.com'                }                //jquery                $.ajax({                    url:  'http://127.0.0.1:8080',                    type: 'get',                    dataType: 'html',                    success: function (data){                        console.log('jquery ajax 的請求')                        console.log(data)                    },                    error: function(data) {                        console.info(data)                    }                })                //这个是对的                var resource = this.$resource("http://127.0.0.1:8080")                resource.get().then(function (response) {                    console.log('this.$resource 的請求')                    console.log(response.body)                }).catch(function (response) {                    console.log(response)                })                //这个也是对的                this.$http.get("http://127.0.0.1:8080").then(function (res) {                            // 处理成功的结果                            console.log('this.$http 的請求')                            console.info(res.body)                            $(".contentCenter").html(res.body)                        }, function (res) {                            console.info(res)                        }                );            }        }    }

结果：

src:http://www.baidu.comjquery ajax 的請求<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>server</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  <script type="text/javascript" src="/app.js"></script></body></html>this.$resource 的請求<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>server</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  <script type="text/javascript" src="/app.js"></script></body></html>this.$http 的請求<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>server</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  <script type="text/javascript" src="/app.js"></script></body></html>

这个界面是Hello.vue中的Script内容

vue-resource详解文档

0 0