From 1faaf4adc43d78128e29a31380a75db0db13f6c2 Mon Sep 17 00:00:00 2001 From: ktsn Date: Wed, 14 Dec 2016 23:44:48 +0900 Subject: [PATCH 1/2] bump vue --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 34e2876..70255e3 100644 --- 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" } } From e117d39103e43ceb8c04c406fbd9e3931b906e06 Mon Sep 17 00:00:00 2001 From: ktsn Date: Wed, 14 Dec 2016 23:52:20 +0900 Subject: [PATCH 2/2] adjust TypeScript example --- README.md | 4 ++++ example/example.html | 4 +++- example/example.ts | 42 ++++++++++++++++++--------------------- example/webpack.config.js | 7 ++++++- 4 files changed, 32 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 74a9a32..ee0fb93 100644 --- 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 index 4a46bac..62a5913 100644 --- a/example/example.html +++ b/example/example.html @@ -5,7 +5,9 @@ -

+ +

diff --git a/example/example.ts b/example/example.ts index 33b5492..3e70d50 100644 --- 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: ` +

+ +

prop: {{propMessage}}

msg: {{msg}}

helloMsg: {{helloMsg}}

computed msg: {{computedMsg}}

+ +

+ ` }) 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 index b09bdf9..a0cfa56 100644 --- 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/,