Skip to content

Commit 4342e15

Browse files
SangKayyx990803
authored andcommitted
Add Chinese localization (#46)
* add README-CN * add language switch link
1 parent 16bf004 commit 4342e15

File tree

2 files changed

+249
-0
lines changed

2 files changed

+249
-0
lines changed

README-CN.md

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
# vue-rx [![Build Status](https://circleci.com/gh/vuejs/vue-rx/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-rx/tree/master)
2+
3+
[English](README.md) | 简体中文
4+
5+
Vue.js 的简单 [RxJS](https://github.com/Reactive-Extensions/RxJS) 绑定。它还支撑实现 `.subscribe``.unsubscribe` (或 `.dispose`) 接口的通用 observables 的订阅。举例来说,你可以使用它来订阅 `most.js` 或 Falcor 流,但是某些功能需要 RxJS 才能运行。
6+
7+
### 安装
8+
9+
#### NPM + ES2015
10+
11+
``` bash
12+
npm install vue vue-rx rxjs --save
13+
```
14+
15+
``` js
16+
import Vue from 'vue'
17+
import Rx from 'rxjs/Rx'
18+
import VueRx from 'vue-rx'
19+
20+
// 搞定!
21+
Vue.use(VueRx, Rx)
22+
```
23+
24+
#### 减少 Bundle 体积小贴士
25+
26+
在绝大多数情况下,你可能不需要全部完整的 Rx 。你可以通过执行以下操作来减少 bundle 中包含的代码数量:
27+
28+
``` js
29+
import Vue from 'vue'
30+
import VueRx from 'vue-rx'
31+
import { Observable } from 'rxjs/Observable'
32+
import { Subscription } from 'rxjs/Subscription' // 如果使用 RxJS 4 可自由使用
33+
import { Subject } from 'rxjs/Subject' // domStreams 选项所需
34+
35+
// 搞定!
36+
Vue.use(VueRx, {
37+
Observable,
38+
Subscription,
39+
Subject
40+
})
41+
```
42+
43+
#### 全局性脚本
44+
45+
只需确保在 Vue.js 和 RxJS 之后引入 `vue-rx.js` 。它会自动安装。
46+
47+
### 用法
48+
49+
``` js
50+
// 使用 `subscriptions` 选项提供 Rx observables
51+
new Vue({
52+
el: '#app',
53+
subscriptions: {
54+
msg: messageObservable
55+
}
56+
})
57+
```
58+
59+
``` html
60+
<!-- 在模板中正常进行绑定 -->
61+
<div>{{ msg }}</div>
62+
```
63+
64+
`subscriptions` 选项还可以接收函数,这样就可以为每个组件实例返回唯一的 observables :
65+
66+
``` js
67+
Vue.component('foo', {
68+
subscriptions: function () {
69+
return {
70+
msg: Rx.Observable.create(...)
71+
}
72+
}
73+
})
74+
```
75+
76+
Observables 通过 `vm.$observables` 对外暴露:
77+
78+
``` js
79+
var vm = new Vue({
80+
subscriptions: {
81+
msg: messageObservable
82+
}
83+
})
84+
85+
vm.$observables.msg.subscribe(msg => console.log(msg))
86+
```
87+
88+
### `v-stream`: 流式 DOM 事件
89+
90+
> 3.0 版本新功能
91+
92+
> 此功能需要 RxJS 。
93+
94+
`vue-rx` 提供了 `v-stream` 指令,它允许你将 DOM 事件流式传递给 Rx Subject 。语法类似于 `v-on` ,其中指令参数是事件名称,绑定值是目标 Rx Subject 。
95+
96+
``` html
97+
<button v-stream:click="plus$">+</button>
98+
```
99+
100+
注意,你需要在渲染发生前,在 vm 实例上将 `plus$` 作为 `Rx.Subject` 的实例进行声明,就像你需要声明数据一样。你可以在 `subscriptions` 函数中完成:
101+
102+
``` js
103+
new Vue({
104+
subscriptions () {
105+
// 声明接收的 Subjects
106+
this.plus$ = new Rx.Subject()
107+
// 然后使用 Subjects 作为源数据流来创建 subscriptions 。
108+
// 源数据流以 { event: HTMLEvent, data?: any } 这种形式发出数据
109+
return {
110+
count: this.plus$.map(() => 1)
111+
.startWith(0)
112+
.scan((total, change) => total + change)
113+
}
114+
}
115+
})
116+
```
117+
118+
或者使用便捷选项 `domStreams`:
119+
120+
``` js
121+
new Vue({
122+
// 需要将 `Rx` 传递给 Vue.ues() 以暴露 `Subject`
123+
domStreams: ['plus$'],
124+
subscriptions () {
125+
// 使用 this.plus$
126+
}
127+
})
128+
```
129+
130+
最后,你可以使用替代语法,传递额外的数据给流:
131+
132+
``` html
133+
<button v-stream:click="{ subject: plus$, data: someData }">+</button>
134+
```
135+
136+
当你需要传递像 `v-for` 迭代器这样的临时变量时,这很有用。你可以通过简单地从源数据流中提取来获得数据:
137+
138+
``` js
139+
const plusData$ = this.plus$.pluck('data')
140+
```
141+
142+
从3.1版本开始,你还可以传递额外选项(作为第三个参数传递给原生的 `addEventListener`):
143+
144+
``` html
145+
<button v-stream:click="{
146+
subject: plus$,
147+
data: someData,
148+
options: { once: true, passive: true, capture: true }
149+
}">+</button>
150+
```
151+
152+
对于实际用法,请参见[示例](https://github.com/vuejs/vue-rx/blob/master/example/counter.html)
153+
154+
### 其他 API 方法
155+
156+
#### `$watchAsObservable(expOrFn, [options])`
157+
158+
> 此功能需要 RxJS 。
159+
160+
这是一个添加到实例上的原型方法。你可以使用它来创建 observable, 该 observable 来自值的观察者。发出值的形式为 `{ newValue, oldValue }`:
161+
162+
``` js
163+
var vm = new Vue({
164+
data: {
165+
a: 1
166+
},
167+
subscriptions () {
168+
// 使用 Rx 操作符声明式地映射至另一个属性
169+
return {
170+
aPlusOne: this.$watchAsObservable('a')
171+
.pluck('newValue')
172+
.map(a => a + 1)
173+
}
174+
}
175+
})
176+
177+
// 或产生副作用...
178+
vm.$watchAsObservable('a')
179+
.subscribe(
180+
({ newValue, oldValue }) => console.log('stream value', newValue, oldValue),
181+
err => console.error(err),
182+
() => console.log('complete')
183+
)
184+
```
185+
186+
可选的 `options` 对象接收与 `vm.$watch` 相同的选项。
187+
188+
#### `$eventToObservable(event)`
189+
190+
> 此功能需要 RxJS 。
191+
192+
将 vue.$on (包括生命周期事件) 转换成 Observables 。发出值的形式为 `{ name, msg }`:
193+
194+
``` js
195+
var vm = new Vue({
196+
created () {
197+
this.$eventToObservable('customEvent')
198+
.subscribe((event) => console.log(event.name,event.msg))
199+
}
200+
})
201+
202+
// vm.$once 的 vue-rx 版本
203+
this.$eventToObservable('customEvent')
204+
.take(1)
205+
206+
let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').take(1)
207+
Rx.Observable.interval(500)
208+
.takeUntil(beforeDestroy$)
209+
```
210+
211+
#### `$subscribeTo(observable, next, error, complete)`
212+
213+
``` js
214+
var vm = new Vue({
215+
mounted () {
216+
this.$subscribeTo(Rx.Observable.interval(1000), function (count) {
217+
console.log(count)
218+
})
219+
}
220+
})
221+
```
222+
223+
#### `$fromDOMEvent(selector, event)`
224+
225+
> 此功能需要 RxJS 。
226+
227+
``` js
228+
var vm = new Vue({
229+
subscriptions () {
230+
return {
231+
inputValue: this.$fromDOMEvent('input', 'keyup').pluck('target', 'value')
232+
}
233+
}
234+
})
235+
```
236+
237+
### 警告
238+
239+
你不能使用 `watch` 选项来观察 subscriptions ,因为它在 subscriptions 设置之前处理过了。但是你可以在 `created` 钩子中使用 `$watch` 来代替。
240+
241+
### 示例
242+
243+
参见 `/examples` 文件夹以获取一些简单的示例。
244+
245+
### 许可证
246+
247+
[MIT](http://opensource.org/licenses/MIT)

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# vue-rx [![Build Status](https://circleci.com/gh/vuejs/vue-rx/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-rx/tree/master)
22

3+
English | [简体中文](README-CN.md)
4+
35
Simple [RxJS](https://github.com/Reactive-Extensions/RxJS) binding for Vue.js. It also supports subscriptions for generic observables that implement the `.subscribe` and `.unsubscribe` (or `.dispose`) interface. For example, you can use it to subscribe to `most.js` or Falcor streams, but some features require RxJS to work.
46

57
### Installation

0 commit comments

Comments
 (0)