矿灯房管理制度,辽一网论坛,景甜干爹2000万买初夜
一、各文档介绍
1、
2、
二、环境搭建
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+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论