Adjust TypeScript example (#45)

ktsn · web-flow · commit bd8f3898e926 · 2016-12-15T01:02:02.000+09:00
* bump vue

* adjust TypeScript example
diff --git a/README.md b/README.md
@@ -20,6 +20,10 @@ Note:
 
 5. For all other options, pass them to the decorator function.
 
+### Example
+
+Following is the example written in Babel. If you are looking for TypeScript version, [it's in the example directory](example/example.ts).
+
 ``` js
 import Vue from 'vue'
 import Component from 'vue-class-component'
diff --git a/example/example.html b/example/example.html
@@ -5,7 +5,9 @@
     <title></title>
   </head>
   <body>
-    <div id="el"></div>
+    <div id="el">
+      <app prop-message="World!"></app>
+    </div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/example/example.ts b/example/example.ts
@@ -1,14 +1,28 @@
-import * as Vue from 'vue'
+import Vue = require('vue')
 import Component from '../lib/index'
 
 @Component({
   props: {
     propMessage: String
-  }
+  },
+  template: `
+    <div>
+      <input v-model="msg">
+      <p>prop: {{propMessage}}</p>
+      <p>msg: {{msg}}</p>
+      <p>helloMsg: {{helloMsg}}</p>
+      <p>computed msg: {{computedMsg}}</p>
+      <button @click="greet">Greet</button>
+    </div>
+  `
 })
 class App extends Vue {
   propMessage: string
+
+  // inital data
   msg: number = 123
+
+  // use prop values for initial data
   helloMsg: string = 'Hello, ' + this.propMessage
 
   // lifecycle hook
@@ -25,30 +39,12 @@ class App extends Vue {
   greet () {
     alert('greeting: ' + this.msg)
   }
-
-  render (h: Vue.CreateElement) {
-    return (
-      h('div', [
-        h('input', {
-          domProps: { value: this.msg },
-          on: {
-            input: (event: any) => {
-              this.msg = event.target.value
-            }
-          }
-        }),
-        h('p', ['prop: ', this.propMessage]),
-        h('p', ['msg: ', this.msg]),
-        h('p', ['helloMsg: ', this.helloMsg]),
-        h('p', ['computed msg: ', this.computedMsg]),
-        h('button', { on: { click: this.greet }}, ['Greet'])
-      ])
-    )
-  }
 }
 
 // mount
 new Vue({
   el: '#el',
-  render: h => h(App, { props: { propMessage: 'World!' }})
+  components: {
+    App
+  }
 })
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -4,8 +4,13 @@ module.exports = {
     path: './example',
     filename: 'build.js'
   },
+  resolve: {
+    alias: {
+      vue$: 'vue/dist/vue.common.js'
+    }
+  },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.ts$/,
         exclude: /node_modules|vue\/src/,
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "rimraf": "^2.5.4",
     "ts-loader": "^0.9.5",
     "typescript": "^2.0.6",
-    "vue": "^2.0.3",
+    "vue": "^2.1.6",
     "webpack": "^2.1.0-beta.27"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`"rimraf": "^2.5.4",`
`48`	`48`	`"ts-loader": "^0.9.5",`
`49`	`49`	`"typescript": "^2.0.6",`
`50`		`- "vue": "^2.0.3",`
	`50`	`+ "vue": "^2.1.6",`
`51`	`51`	`"webpack": "^2.1.0-beta.27"`
`52`	`52`	`}`
`53`	`53`	`}`