[Vue-rx] Stream an API using RxJS into a Vue.js Template
2023-09-14 09:00:50 时间
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.js 开发实践:实现精巧的无限加载与分页功能
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue.js入门(五,组件更新,计算属性,watch监听)
- vue.config.js
- vue.config.js常用配置详解
- Easy Mock以及Vue+Mock.js模拟数据
- vue项目中axios封装总结
- Vue的简单入门
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue3: 用el-dialog展示component(vue@3.0.5 / element-plus@1.0.1-beta.20)
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- 从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 富文本框vue-quill-editor的使用
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- vue.js3: 用xmp-js读取xmp信息(vue@3.2.36 / xmp-js@0.0.5)
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
- [Vue] SSR 环境 Storage 与 Vuex 的关系
- SAP UI5和Vue的数据双向绑定实现原理比较
- vue项目报错Unknown custom element: <router-view> - did you register the component correctly?
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- 150:vue+openlayers 多边形拐点用不同形状表示(圆形、三角形、矩形、正方形、星形...)