8000 update example · AlbertBrand/vue-function-api@7aa921a · GitHub
[go: up one dir, main page]
Skip to content

Commit 7aa921a

Browse files
liximomoliximomo
committed
update example
1 parent 7048603 commit 7aa921a

File tree

2 files changed

+138
-94
lines changed

2 files changed

+138
-94
lines changed

‎README.md

Lines changed: 73 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,18 @@ Future-Oriented Programming, `vue-function-api` provides function api from `Vue3
1212

1313
- [Installation](#Installation)
1414
- [Usage](#Usage)
15+
- [Example](#Example)
16+
- [Todo App Compare with Vue2 API](https://codesandbox.io/s/todo-example-6d7ep)
17+
- [CodePen Live Demo](https://codepen.io/liximomo/pen/dBOvgg)
18+
- [Single-File Component](#single-file-Component)
1519
- [API](#API)
16-
- [setup](#setup)
17-
- [value](#value)
18-
- [state](#state)
19-
- [computed](#computed)
20-
- [watch](#watch)
21-
- [lifecycle](#lifecycle)
22-
- [provide, inject](#provide-inject)
20+
- [setup](#setup)
21+
- [value](#value)
22+
- [state](#state)
23+
- [computed](#computed)
24+
- [watch](#watch)
25+
- [lifecycle](#lifecycle)
26+
- [provide, inject](#provide-inject)
2327
- [Misc](#Misc)
2428

2529
# Installation
@@ -41,53 +45,70 @@ yarn add vue-function-api
4145
```
4246
By using the global variable `window.vueFunctionApi`
4347

44-
**CodePen**
45-
46-
[Live Demo](https://codepen.io/liximomo/pen/dBOvgg)
4748

4849
# Usage
49-
``` js
50-
import Vue from 'vue';
51-
import { plugin, value, computed, watch, onMounted } from 'vue-function-api'
52-
53-
Vue.use(plugin);
54-
55-
new Vue({
56-
template: `
57-
<div>
58-
<span>count is {{ count }}</span>
59-
<span>plusOne is {{ plusOne }}</span>
60-
<button @click="increment">count++</button>
61-
</div>
62-
`,
63-
setup() {
64-
// reactive state
65-
const count = value(0);
66-
// computed state
67-
const plusOne = computed(() => count.value + 1);
68-
// method
69-
const increment = () => {
70-
count.value++;
71-
};
72-
// watch
73-
watch(
74-
() => count.value * 2,
75-
val => {
76-
console.log(`count * 2 is ${val}`);
77-
}
78-
);
79-
// lifecycle
80-
onMounted(() => {
81-
console.log(`mounted`);
82-
});
83-
// expose bindings on render context
84-
return {
85-
count,
86-
plusOne,
87-
increment,
88-
};
89-
},
90-
}).$mount('#app');
50+
51+
You must explicitly install `vue-function-api` via `Vue.use()`:
52+
53+
```js
54+
import Vue from 'vue'
55+
import { plugin } from 'vue-function-api'
56+
57+
Vue.use(plugin)
58+
```
59+
60+
After installing the plugin you can use the new [function API](#API) to compose your component.
61+
62+
# Example
63+
64+
## [Todo App Compare with Vue2 API](https://codesandbox.io/s/todo-example-6d7ep)
65+
66+
## [CodePen Live Demo](https://codepen.io/liximomo/pen/dBOvgg)
67+
68+
## Single-File Component
69+
``` html
70+
<template>
71+
<div>
72+
<span>count is {{ count }}</span>
73+
<span>plusOne is {{ plusOne }}</span>
74+
<button @click="increment">count++</button>
75+
</div>
76+
</template>
77+
78+
<script>
79+
import Vue from 'vue';
80+
import { value, computed, watch, onMounted } from 'vue-function-api'
81+
82+
export default {
83+
setup() {
84+
// reactive state
85+
const count = value(0);
86+
// computed state
87+
const plusOne = computed(() => count.value + 1);
88+
// method
89+
const increment = () => {
90+
count.value++;
91+
};
92+
// watch
93+
watch(
94+
() => count.value * 2,
95+
val => {
96+
console.log(`count * 2 is ${val}`);
97+
}
98+
);
99+
// lifecycle
100+
onMounted(() => {
101+
console.log(`mounted`);
102+
});
103+
// expose bindings on render context
104+
return {
105+
count,
106+
plusOne,
107+
increment,
108+
};
109+
},
110+
};
111+
</script>
91112
```
92113

93114
# API

‎README.zh-CN.md

Lines changed: 65 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212

1313
- [安装](#安装)
1414
- [使用](#使用)
15+
- [示例](#示例)
16+
- [Todo App Compare with Vue2 API](https://codesandbox.io/s/todo-example-6d7ep)
17+
- [CodePen Live Demo](https://codepen.io/liximomo/pen/dBOvgg)
18+
- [Single-File Component](#single-file-Component)
1519
- [API](#API)
1620
- [setup](#setup)
1721
- [value](#value)
@@ -46,48 +50,67 @@ yarn add vue-function-api
4650
[在线示例](https://codepen.io/liximomo/pen/dBOvgg)，fork 后进行测试或 bug 反馈。
4751

4852
# 使用
49-
``` js
50-
import Vue from 'vue';
51-
import { plugin, value, computed, watch, onMounted } from 'vue-function-api'
52-
53-
Vue.use(plugin);
54-
55-
new Vue({
56-
template: `
57-
<div>
58-
<span>count is {{ count }}</span>
59-
<span>plusOne is {{ plusOne }}</span>
60-
<button @click="increment">count++</button>
61-
</div>
62-
`,
63-
setup() {
64-
// reactive state
65-
const count = value(0);
66-
// computed state
67-
const plusOne = computed(() => count.value + 1);
68-
// method
69-
const increment = () => {
70-
count.value++;
71-
};
72-
// watch
73-
watch(
74-
() => count.value * 2,
75-
val => {
76-
console.log(`count * 2 is ${val}`);
77-
}
78-
);
79-
// lifecycle
80-
onMounted(() => {
81-
console.log(`mounted`);
82-
});
83-
// expose bindings on render context
84-
return {
85-
count,
86-
plusOne,
87-
increment,
88-
};
89-
},
90-
}).$mount('#app');
53+
您必须显式地通过 `Vue.use()` 来安装 `vue-function-api`:
54+
55+
```js
56+
import Vue from 'vue'
57+
import { plugin } from 'vue-function-api'
58+
59+
Vue.use(plugin)
60+
```
61+
62+
安装插件后，您就可以使用新的[函数式 API](#API)来书写组件了。
63+
64+
# 示例
65+
66+
## [Todo App Compare with Vue2 API](https://codesandbox.io/s/todo-example-6d7ep)
67+
68+
## [CodePen Live Demo](https://codepen.io/liximomo/pen/dBOvgg)
69+
70+
## Single-File Component
71+
``` html
72+
<template>
73+
<div>
74+
<span>count is {{ count }}</span>
75+
<span>plusOne is {{ plusOne }}</span>
76+
<button @click="increment">count++</button>
77+
</div>
78+
</template>
79+
80+
<script>
81+
import Vue from 'vue';
82+
import { value, computed, watch, onMounted } from 'vue-function-api'
83+
84+
export default {
85+
setup() {
86+
// reactive state
87+
const count = value(0);
88+
// computed state
89+
const plusOne = computed(() => count.value + 1);
90+
// method
91+
const increment = () => {
92+
count.value++;
93+
};
94+
// watch
95+
watch(
96+
() => count.value * 2,
97+
val => {
98+
console.log(`count * 2 is ${val}`);
99+
}
100+
);
101+
// lifecycle
102+
onMounted(() => {
103+
console.log(`mounted`);
104+
});
105+
// expose bindings on render context
106+
return {
107+
count,
108+
plusOne,
109+
increment,
110+
};
111+
},
112+
};
113+
</script>
91114
```
92115

93116
# API

0 commit comments

Comments
 (0)
0