一、各文档介绍
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; }) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍vue 中swiper的使用教程,包括了vue 中swiper的使用教程的使用技巧和注意事项,需要的朋友参考一下 Install 在vue cli下的使用 npm install vue-awesome-swiper --save 在main.js中 在component.vue中 参考:https://github.com/surmon-china/vue-awesome-swip
本文向大家介绍详解Jest结合Vue-test-utils使用的初步实践,包括了详解Jest结合Vue-test-utils使用的初步实践的使用技巧和注意事项,需要的朋友参考一下 介绍 Vue-test-utils是Vue的官方的单元测试框架,它提供了一系列非常方便的工具,使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多,但 Vue Test Uti
本文向大家介绍BootStrapValidator初使用教程详解,包括了BootStrapValidator初使用教程详解的使用技巧和注意事项,需要的朋友参考一下 bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。 bootstrapValidator的github地址 需要引用css: boots
本文向大家介绍探秘vue-rx 2.0(推荐),包括了探秘vue-rx 2.0(推荐)的使用技巧和注意事项,需要的朋友参考一下 前一段时间,我写了两篇文章,一篇是对目前前端主流视图框架的思考,一篇是深入使用RxJS控制复杂业务逻辑的,在这两篇中,我分别提到: 期望在复杂业务逻辑方面使用RxJS,更好地进行抽象,但是视图上使用轻量MVVM以达到快速开发的目的。 目前VueJS中,如果要结合RxJS,
本文向大家介绍animate.css在vue项目中的使用教程,包括了animate.css在vue项目中的使用教程的使用技巧和注意事项,需要的朋友参考一下 在vue项目中使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用
本文向大家介绍vue中的router-view组件的使用教程,包括了vue中的router-view组件的使用教程的使用技巧和注意事项,需要的朋友参考一下 开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/r