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 相关文章推荐
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
mysq GBKl乱码
2006/11/28 PHP
php学习之变量的使用
2011/05/29 PHP
php类常量的使用详解
2013/06/08 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript 节点排序 2
2011/01/31 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
javascript的BOM汇总
2015/07/16 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Python中文字符串截取问题
2015/06/15 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
软件测试常见笔试题
2012/02/04 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
接受捐赠答谢词
2014/01/27 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
小学国庆节活动总结
2015/03/23 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
销售开票员岗位职责
2015/04/15 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python