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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
JS作用域链详解
Jun 26 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
JS中的模糊查询功能
Dec 08 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
基于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连接Oracle数据库
2006/10/09 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP实现的简单日历类
2014/11/29 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHPMailer发送邮件
2016/12/28 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python实现随机梯度下降法
2020/03/24 Python
基于python实现KNN分类算法
2020/04/23 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python中os包的用法
2020/06/01 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
小学庆六一活动方案
2014/02/28 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
大班亲子运动会方案
2014/06/10 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers