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 相关文章推荐
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
动态加载js、css的实例代码
May 26 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
Python的一些用法分享
2012/10/07 Python
Python中DJANGO简单测试实例
2015/05/11 Python
python3.x实现发送邮件功能
2018/05/22 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
班风口号
2014/06/18 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
拾金不昧感谢信
2015/01/21 职场文书
学生会部长竞选稿
2015/11/19 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
利用js实现简单开关灯代码
2021/11/23 Javascript