vue-rx的初步使用
一、各文档介绍
- 1、rxjs官网
- 2、vue-rxjs地址
二、环境搭建
1、使用
vue-cli
构建一个项目2、安装
vue-rx
的依赖包yarn add rxjs yarn add rxjs-compat yarn add vue-rx
3、在
src/main.js
中配置使用rxjs
// 使用vueRx import VueRx from 'vue-rx'; import Rx from 'rxjs/Rx'Vue.use(VueRx, Rx);
三、没有使用vue-rx
的时候
1、关于属性的使用
import { Observable } from 'rxjs'; export default {data() {return {name: new Observable.of('张三')}} };
2、关于事件的使用
import { Observable } from 'rxjs'; export default {data() {return {name: new Observable.of('张三'),}},mounted () {new Observable.fromEvent(this.$refs.btn, 'click').subscribe(e => {this.name = '哈哈';})} };
四、结合vue-rx
的使用
1、项目中集成了
vue-rx
的时候会在vue
中新增一个钩子函数subscriptions
,和之前的data
类似的使用2、
domStreams
是一个数组用来存放事件3、属性的使用
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}},domStreams: ['setName$', 'resetMsg$'],subscriptions() {return {// 发送一个普通的值name: new Observable.of('张三'),// 发送一个修改的值age$ : Observable.of(20).map(item => item + 10),// 定义发送一个数组arr$: new Observable.of(['第一本书', '第二本书']),// 发送一个数组obj$: new Observable.of({ a: 'test-obj',name: '呵呵' }),// 发送一个promise函数promise$: new Observable.fromPromise(this.getPromise()),// 定时器interval$: new Observable.interval(1000)}},methods: {getPromise() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('promise');}, 1000)})}}, }
5、事件的使用
1.在视图中定义事件
<button v-stream:click="setName$">点击按钮设置值</button>
2.在
domStreams
中定义domStreams: ['setName$'],
3、在
subscriptions
定义事件赋值给哪个变量name$: this.setName$.map(e => 'hello'.toUpperCase()),
六、关于switchMap
、concatMap
、exhaustMap
的使用
1、定义事件
<button class="btn" v-stream:click="getConcatMapCount$">点击获取concatMapCount$</button> <p>{{concatMapCount$}}</p> <button class="btn" v-stream:click="getSwitchMapCount$">点击获取switchMapCount$</button> <p>{{switchMapCount$}}</p> <button class="btn" v-stream:click="getExhaustMapCount$">点击获取exhaustMapCount$</button> <p>{{exhaustMapCount$}}</p>
2、定义事件名
domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],
3、触发事件
import { Observable } from 'rxjs'; export default {data() {return {count: 0,}},domStreams: ['getConcatMapCount$', 'getSwitchMapCount$', 'getExhaustMapCount$'],subscriptions() {return {// 当你连续点击按钮多次获取数据时,cancatMap会将获取到的数据按队列发出concatMapCount$: this.getConcatMapCount$.concatMap(e => {return new Observable.from(this.getCount());}),// 当你连续点击按钮多次获取数据时,switchMap只会将最后一个点击发出的值发出,前面发出的值会被吞掉switchMapCount$: this.getSwitchMapCount$.switchMap(e => {return new Observable.from(this.getCount());}),// 当你连续点击按钮多次时,exhaustMap仅执行一次,在第一次值发出后,才可以继续点击下一次发出值exhaustMapCount$: this.getExhaustMapCount$.exhaustMap(e => {return new Observable.from(this.getCount())})}},methods: {getCount() {return new Promise((resolve, reject) => {this.count ++;setTimeout(() => {resolve(this.count);}, 1000);})}} };
七、事件中传递参数
1、
html
页面<ul><li v-for="(num, index) in numList" :key="index" v-stream:click="{subject: getNum$,data: {'index': index,'num': num}}">{{ num }}</li> </ul> <p>点击的数字为:{{ num$.index }}</p> <p>点击的数字下标为:{{ num$.num }}</p>
2、在
vue
中处理import { Observable } from 'rxjs' export default {data () {return {numList: [1, 2, 3]}},// v-stream事件可以统一写在这里,具体可以看vue-rx的使用domStreams: ['getNum$'],subscriptions () {return {num$: this.getNum$// 从传入的对象中获取key为data的value,传入下一个operator.pluck('data').map(data => data)// 因为视图引用了num$.index,所以这里要初始化num$为对象,避免报错.startWith({})}} }
3、输入框中获取值
<input type="text" v-stream:keyup="getInput$"> <p>value$: {{ value$ }}</p>
import { Observable } from 'rxjs'; export default {domStreams: ['getInput$'],subscriptions () {return {value$: this.getInput$// 选取e.event.target.value.pluck('event', 'target', 'value').debounceTime(2000)// 根据value值作比较,如果和上一次一样则不发出值.distinctUntilChanged().map(val => {console.log(val);return val;})}} }
八、使用$watchAsObservable
代替vue
中的watch
九、查看博主更多文章
vue-rx的初步使用相关推荐
- vue全家桶初步了解
vue全家桶初步了解 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这里牵扯的东西很多,有webpack,npm,nodejs,babel等等. 1.1.安装vue-c ...
- 一个vue管理系统的初步搭建总结
ps:目前这个项目只是有一个大致的框架,并没有做完 前期准备工作 前端构建工具:Visual Studio Code 后端构建工具:IDEA 数据库和服务器构建工具:WampServer (使用的是2 ...
- vue学习(一)初步了解 vue实例
//html:<div id="app"> <p>{{msg}}<p></div> //script 需要引入jar包vue-2.4 ...
- 对于Vue组件的初步认识(未整理)
文件位置 index.html <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- python接口测试框架django_开源~自研接口测试平台 Django2.0+Vue
接口测试平台从开始到放弃 python3.6.3 Django 2.0.2框架 版本更新: v2.3 引入docker部署,由于采用的docker,基础镜像为centos,所以Windows下部署仍然 ...
- 计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期 前言 一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
- vue 高德地图api爬坑之路(一)初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
- 在eclipse中运行vue转载留着自己用
一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...
最新文章
- 两种ICP的改进算法:PLICP与NICP
- 看看那些令你惊叹的PCB设计艺术
- python3 request模块 https certificate verify failed 错误
- win7计算机怎么找管理员,Win7系统Administrator不见了怎么解决?
- 了解计算机中的信息编码教案,五年级下册信息技术《奇妙的编码》教学设计
- Java并发学习笔记:ReentrantLock
- php数据库上线步骤,php连接数据库步骤
- 怎么解决tomcat端口占用问题?
- Python常用的几种数据结构-链表,数组,字典
- 64位系统装32和64位oracle,64位系统安装32位Oracle developer
- Cocosbuilder使用教程
- [索引汇总帖] 【eoeAndroid社区索引】Cocos2d-x部分汇总 [转贴]
- 深蓝超级计算机象棋人机大战,象棋人机大战绝唱:超级计算机“浪潮天梭”vs“象棋第一人”许银川的巅峰之战...
- 量子计算机优点概括,量子计算机简介
- 面向对象:兜兜转转了很久,希望你恰好也在
- 人工智能就业前景越来越严峻了,你还在坚持吗?
- 数通 | 静态路由表的配置(含负载分担、路由备份)
- 【ROS2原理11】C++编程的要点
- 打印机可以打印不能扫描怎么弄_打印机无法扫描怎么解决 打印机无法扫描相关介绍【解决方法】...
- java面试题之-Redis篇(持续更新)