vuejs与外界通信

深碍√TFBOYSˉ_ 2022-07-12 06:12 140阅读 0赞

源代码：

其中在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.com
    jquery ajax 的請求
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>server</title>
      </head>
      <body>
        <div id="app"></div>
        
      <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>
        
      <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>
        
      <script type="text/javascript" src="/app.js"></script></body>
    </html>

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

[vue-resource详解文档][vue-resource]

[vue-resource]: http://www.doc00.com/doc/1001004eg/