vuejs与外界通信

来源：互联网发布：如何卸载linux系统编辑：程序博客网时间：2024/05/16 02:21

源代码：

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

npm install jquery

npm install vue-resource

[javascript] view plain copy
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)  
                        }  
                );  
            }  
        }  
    }  

结果：

[plain] view plain copy
src:http://www.baidu.com  
jquery 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内容

来源http://blog.csdn.net/mastershaw/article/details/55096887

vue-resource详解文档

vue.js编写方式是通过html格式调用模版（元素/标签），这里面的模版可以是template的xml格式，也可以是JavaScript代码。

组件之间的通信：

父子组件之间：

父组件数据在子组件中使用：用props属性；子组件向父组件传递信息是用events，监听子组件执行方法，然后再运行父组件的方法。

父组件中获取子组件：同ref属性js代码：parent.$refs.a；还有内容分发slot，parent.$slots.b等。

有时候非父子关系的组件也需要通信

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在更多复杂的情况下，你应该考虑使用专门的状态管理模式.

0 0