源代码:
其中在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'
- }
-
- $.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>
- <!-- 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等。
有时候非父子关系的组件也需要通信
bus.$emit(
'id-selected',
1)
|
bus.$on(
'id-selected',
function (id) {
})
|
在更多复杂的情况下,你应该考虑使用专门的 状态管理模式.