vue-rx的初步使用教程


Posted in Javascript onSeptember 21, 2018

一、各文档介绍

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;
    })
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 #Javascript
Vue中插入HTML代码的方法
Sep 21 #Javascript
node.js调用C++函数的方法示例
Sep 21 #Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 #Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 #Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 #Javascript
vue中设置、获取、删除cookie的方法
Sep 21 #Javascript
You might like
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
vue内置指令详解
2018/04/03 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python如何获取文件路径/目录
2020/09/22 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
经销商会议欢迎词
2014/01/11 职场文书
大二自我鉴定
2014/01/31 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
通讯稿格式及范文
2015/07/22 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android