You can map remote data directly into your Vue.js templates using RxJS. This lesson uses axios (and the vue-axios library which exposes axios on components as this.$http) and wraps the remote call inside of an Observable to provide the data into the template

Install:

npm i --save axios vue-axios

main.js:

import 'buefy/lib/buefy.css'

import Vue from 'vue'
import App from './App.vue' import Rx from 'rxjs'
import VueRx from 'vue-rx' import Buefy from 'buefy' import Axios from 'axios';
import VueAxios from 'vue-axios' Vue.use(VueRx, Rx)
Vue.use(Buefy)
Vue.use(VueAxios, Axios) Vue.config.productionTip = false new Vue({
render: h => h(App)
}).$mount('#app')

app.vue:

<template>
<section class="section">
<h2>
{{people$}}
</h2>
</section>
</template> <script>
import { from } from 'rxjs';
import { pluck } from 'rxjs/operators'; export default {
name: 'app',
subscriptions() { const people$ = from(
this.$http.get(
"https://starwars.egghead.training/people/1"
)
).pipe(
pluck('data', 'name') // Get response.data.name
)return {
people$
}
}
};
</script>

[Vue-rx] Stream an API using RxJS into a Vue.js Template的更多相关文章

  1. Vue 3.0 Composition API - 中文翻译

    Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...

  2. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  3. Vue 3.x Composition API

    Vue 3.x Composition API setup 调用时机 创建组件实例,然后初始化 props ,紧接着就调用setup 函数; 从生命周期钩子的视角来看,它会在 beforeCreate ...

  4. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  5. 从零开始系列之vue全家桶(2)安装调试插件vue Devtools

    小白安装前提是会用git,会从github上找东西. 第一步: 我们可以先从github上找到vue-devtools的项目,下载到本地.下载vue-devtools链接. 克隆方法:git clon ...

  6. Vue学习——使用vue-cli搭建一个简单的本地vue项目

    前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...

  7. 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  8. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...

  9. atitit.跨语言实现备份mysql数据库 为sql文件特性 api 兼容性java c#.net php js

    atitit.跨语言实现备份mysql数据库 为sql文件特性 api 兼容性java c#.net php js 1. 两个方法:: bat vs mysqldump(推荐)  vs   lang  ...

随机推荐

  1. poj2367 Genealogical tree

    思路: 拓扑排序,这里是用染色的dfs实现的.在有环的情况下可以判断出来,没有环的情况下输出拓扑排序序列. 实现: #include <vector> #include <cstri ...

  2. 为什么字符串类型可以调用构造函数String的方法,却又不是它的实例

    从所周知,在js中定义一个字符串我们有两种办法: var a = new String("a"); var a = "a"; 第一种方法使用构造函数创建,作为S ...

  3. python自动化--语言基础线程、生产者消费者示例

    进程与线程的区别:进程不共享空间,线程共享地址空间 线程共享空间优缺点:优点:多线程给用户的体验好些,打开时占用的内存比进程少缺点:共享地址空间会相互干扰,甚至有影响 import threading ...

  4. mysql 性能优化索引、缓存、分表、分布式实现方式。

    系统针对5000台终端测试结果 索引 目标:优化查询速度3秒以内 需要优化.尽量避免使用select * 来查询对象.使用到哪些属性值就查询出哪些使用即可 首页页面: 设备-组织查询 优化 避免使用s ...

  5. 用Docker构建Nginx镜像

    1构建Nginx镜像 1建立工作目录 [root@localhost ]# mkdir 1nginx [root@localhost 1nginx]# cd 1nginx/ [root@localho ...

  6. 用Java写一个生产者-消费者队列

    生产者消费者的模型作用 通过平衡生产者的生产能力和消费者的消费能力来提升整个系统的运行效率,这是生产者消费者模型最重要的作用. 解耦,这是生产者消费者模型附带的作用,解耦意味着生产者和消费者之间的联系 ...

  7. BeanFactory的生命周期

    Bean自身的方法:调用Bean构造函数实例化Bean.调用setter设置Bean的属性值及通过<beam=n>的init-method和destory-method所制定的方法. Be ...

  8. MySql的存储过程和触发器

    Mysql的存储过程是类似于其它编程语言中的函数的功能,存储过程内部可以使用顺序循环和转移三种基本程序结构,而且整个存储过程可以接受和返回参数. 创建存储过程(procedure)时,因为其内部有以; ...

  9. 洛谷——P1273 有线电视网

    P1273 有线电视网 题目大意: 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树 ...

  10. (C/C++学习)23.C++中指针的长度

    引言:先看下面一个程序会打印出什么? #include<iostream> using namespace std; int main() { int a = 2; int *p = &a ...