From 4c36e966bca39b55041f66e3601661046e482693 Mon Sep 17 00:00:00 2001 From: "SangKa.Z" Date: Sun, 9 Jul 2017 15:34:58 +0800 Subject: [PATCH 1/2] add README-CN --- README-CN.md | 245 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 README-CN.md diff --git a/README-CN.md b/README-CN.md new file mode 100644 index 0000000..5ad15fd --- /dev/null +++ b/README-CN.md @@ -0,0 +1,245 @@ +# 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) + +Vue.js 的简单 [RxJS](https://github.com/Reactive-Extensions/RxJS) 绑定。它还支撑实现 `.subscribe` 和 `.unsubscribe` (或 `.dispose`) 接口的通用 observables 的订阅。举例来说，你可以使用它来订阅 `most.js` 或 Falcor 流，但是某些功能需要 RxJS 才能运行。 + +### 安装 + +#### NPM + ES2015 + +``` bash +npm install vue vue-rx rxjs --save +``` + +``` js +import Vue from 'vue' +import Rx from 'rxjs/Rx' +import VueRx from 'vue-rx' + +// 搞定! +Vue.use(VueRx, Rx) +``` + +#### 减少 Bundle 体积小贴士 + +在绝大多数情况下，你可能不需要全部完整的 Rx 。你可以通过执行以下操作来减少 bundle 中包含的代码数量： + +``` js +import Vue from 'vue' +import VueRx from 'vue-rx' +import { Observable } from 'rxjs/Observable' +import { Subscription } from 'rxjs/Subscription' // 如果使用 RxJS 4 可自由使用 +import { Subject } from 'rxjs/Subject' // domStreams 选项所需 + +// 搞定! +Vue.use(VueRx, { + Observable, + Subscription, + Subject +}) +``` + +#### 全局性脚本 + +只需确保在 Vue.js 和 RxJS 之后引入 `vue-rx.js` 。它会自动安装。 + +### 用法 + +``` js +// 使用 `subscriptions` 选项提供 Rx observables +new Vue({ + el: '#app', + subscriptions: { + msg: messageObservable + } +}) +``` + +``` html + +
{{ msg }}
+``` + +`subscriptions` 选项还可以接收函数，这样就可以为每个组件实例返回唯一的 observables : + +``` js +Vue.component('foo', { + subscriptions: function () { + return { + msg: Rx.Observable.create(...) + } + } +}) +``` + +Observables 通过 `vm.$observables` 对外暴露: + +``` js +var vm = new Vue({ + subscriptions: { + msg: messageObservable + } +}) + +vm.$observables.msg.subscribe(msg => console.log(msg)) +``` + +### `v-stream`: 流式 DOM 事件 + +> 3.0 版本新功能 + +> 此功能需要 RxJS 。 + +`vue-rx` 提供了 `v-stream` 指令，它允许你将 DOM 事件流式传递给 Rx Subject 。语法类似于 `v-on` ，其中指令参数是事件名称，绑定值是目标 Rx Subject 。 + +``` html + +``` + +注意，你需要在渲染发生前，在 vm 实例上将 `plus$` 作为 `Rx.Subject` 的实例进行声明，就像你需要声明数据一样。你可以在 `subscriptions` 函数中完成: + +``` js +new Vue({ + subscriptions () { + // 声明接收的 Subjects + this.plus$ = new Rx.Subject() + // 然后使用 Subjects 作为源数据流来创建 subscriptions 。 + // 源数据流以 { event: HTMLEvent, data?: any } 这种形式发出数据 + return { + count: this.plus$.map(() => 1) + .startWith(0) + .scan((total, change) => total + change) + } + } +}) +``` + +或者使用便捷选项 `domStreams`: + +``` js +new Vue({ + // 需要将 `Rx` 传递给 Vue.ues() 以暴露 `Subject` + domStreams: ['plus$'], + subscriptions () { + // 使用 this.plus$ + } +}) +``` + +最后，你可以使用替代语法，传递额外的数据给流: + +``` html + +``` + +当你需要传递像 `v-for` 迭代器这样的临时变量时，这很有用。你可以通过简单地从源数据流中提取来获得数据： + +``` js +const plusData$ = this.plus$.pluck('data') +``` + +从3.1版本开始，你还可以传递额外选项(作为第三个参数传递给原生的 `addEventListener`): + +``` html + +``` + +对于实际用法，请参见[示例](https://github.com/vuejs/vue-rx/blob/master/example/counter.html)。 + +### 其他 API 方法 + +#### `$watchAsObservable(expOrFn, [options])` + +> 此功能需要 RxJS 。 + +这是一个添加到实例上的原型方法。你可以使用它来创建 observable， 该 observable 来自值的观察者。发出值的形式为 `{ newValue, oldValue }`: + +``` js +var vm = new Vue({ + data: { + a: 1 + }, + subscriptions () { + // 使用 Rx 操作符声明式地映射至另一个属性 + return { + aPlusOne: this.$watchAsObservable('a') + .pluck('newValue') + .map(a => a + 1) + } + } +}) + +// 或产生副作用... +vm.$watchAsObservable('a') + .subscribe( + ({ newValue, oldValue }) => console.log('stream value', newValue, oldValue), + err => console.error(err), + () => console.log('complete') + ) +``` + +可选的 `options` 对象接收与 `vm.$watch` 相同的选项。 + +#### `$eventToObservable(event)` + +> 此功能需要 RxJS 。 + +将 vue.$on (包括生命周期事件) 转换成 Observables 。发出值的形式为 `{ name, msg }`: + +``` js +var vm = new Vue({ + created () { + this.$eventToObservable('customEvent') + .subscribe((event) => console.log(event.name,event.msg)) + } +}) + +// vm.$once 的 vue-rx 版本 +this.$eventToObservable('customEvent') + .take(1) + +let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').take(1) +Rx.Observable.interval(500) + .takeUntil(beforeDestroy$) +``` + +#### `$subscribeTo(observable, next, error, complete)` + +``` js +var vm = new Vue({ + mounted () { + this.$subscribeTo(Rx.Observable.interval(1000), function (count) { + console.log(count) + }) + } +}) +``` + +#### `$fromDOMEvent(selector, event)` + +> 此功能需要 RxJS 。 + +``` js +var vm = new Vue({ + subscriptions () { + return { + inputValue: this.$fromDOMEvent('input', 'keyup').pluck('target', 'value') + } + } +}) +``` + +### 警告 + +你不能使用 `watch` 选项来观察 subscriptions ，因为它在 subscriptions 设置之前处理过了。但是你可以在 `created` 钩子中使用 `$watch` 来代替。 + +### 示例 + +参见 `/examples` 文件夹以获取一些简单的示例。 + +### 许可证 + +[MIT](http://opensource.org/licenses/MIT) From ae4c3451003ce7ecf69618bd9223b0bc7d83ad9f Mon Sep 17 00:00:00 2001 From: "SangKa.Z" Date: Sun, 9 Jul 2017 15:37:05 +0800 Subject: [PATCH 2/2] add language switch link --- README-CN.md | 2 ++ README.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/README-CN.md b/README-CN.md index 5ad15fd..095abdd 100644 --- a/README-CN.md +++ b/README-CN.md @@ -1,5 +1,7 @@ # 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) +[English](README.md) | 简体中文 + Vue.js 的简单 [RxJS](https://github.com/Reactive-Extensions/RxJS) 绑定。它还支撑实现 `.subscribe` 和 `.unsubscribe` (或 `.dispose`) 接口的通用 observables 的订阅。举例来说，你可以使用它来订阅 `most.js` 或 Falcor 流，但是某些功能需要 RxJS 才能运行。 ### 安装 diff --git a/README.md b/README.md index 8d05c2b..bc8752a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # 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) +English | [简体中文](README-CN.md) + 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. ### Installation