update basic example

yyx990803 · yyx990803 · commit 112c6edfe7b3 · 2019-02-27T21:05:38.000-05:00
diff --git a/active-rfcs/0000-class-api.md b/active-rfcs/0000-class-api.md
@@ -9,14 +9,16 @@ Introduce built-in support for authoring components as native ES2015 classes.
 
 # Basic example
 
-``` js
-import Vue from 'vue'
+## In Browser
 
-export default class App extends Vue {
+``` js
+class App extends Vue {
   // options declared via static properties (stage 3)
   // more details below
   static template = `
-    <div>{{ count }}</div>
+    <div @click="increment">
+      {{ count }} {{ plusOne }}
+    </div>
   `
 
   // reactive data declared via class fields (stage 3)
@@ -40,6 +42,44 @@ export default class App extends Vue {
 }
 ```
 
+The component will be mounted using a new global API instead of `new Vue()` - this will be discussed in a separate RFC.
+
+## In Single File Components
+
+``` html
+<template>
+  <div @click="increment">
+    {{ count }} {{ plusOne }}
+    <Foo />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Foo from './Foo.vue'
+
+export default class App extends Vue {
+  static components = {
+    Foo
+  }
+
+  count = 0
+
+  created() {
+    console.log(this.count)
+  }
+
+  get plusOne() {
+    return this.count + 1
+  }
+
+  increment() {
+    this.count++
+  }
+}
+</script>
+```
+
 # Motivation
 
 Vue's current object-based component API has created some challenges when it comes to type inference. As a result, most users opting into using Vue with TypeScript end up using [vue-class-component](https://github.com/vuejs/vue-class-component). This approach works, but with some drawbacks:
