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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
JS实现求5的阶乘示例
Jan 21 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
简单的js表格操作
2016/09/24 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python日期相关操作实例小结
2019/06/24 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Django实现随机图形验证码的示例
2020/10/15 Python
彻底解决Python包下载慢问题
2020/11/15 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
森林防火标语
2014/06/23 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
用python画城市轮播地图
2021/05/28 Python