1.0

yyx990803 · yyx990803 · commit 5d42deb3935f · 2015-11-03T11:27:07.000-05:00
diff --git a/README.md b/README.md
@@ -1,48 +1,59 @@
 # vue-class-component
 
-> Experimental ES7 / TypeScript decorator for class-style Vue components.
+> Experimental ES2016/TypeScript decorator for class-style Vue components.
 
 ### Example Usage with Babel stage=0:
 
+Note:
+
+1. `data`, `el` and all Vue lifecycle hooks can be directly declared as class member methods, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
+
+2. For all other options, declare them as **static properties**.
+
 ``` js
-import component from 'vue-class-component'
+import VueComponent from 'vue-class-component'
 
-@component
+@VueComponent
 export default class Component {
 
   // template
   static template = `
     <div>
       <input v-model="msg">
+      <p>prop: {{propMessage}}</p>
       <p>msg: {{msg}}</p>
       <p>computed msg: {{computedMsg}}</p>
-      <button v-on="click:greet">Greet</button>
+      <button @click="greet">Greet</button>
     </div>
   `
 
-  // data
-  msg = 'hello'
+  // props
+  static props = {
+    propMessage: String
+  }
+
+  // return initial data
+  data () {
+    return {
+      msg: 123
+    }
+  }
+
+  // lifecycle hook
+  ready () {
+    this.greet()
+  }
 
   // computed
-  get computedMsg() {
+  get computedMsg () {
     return 'computed ' + this.msg
   }
 
   // method
-  greet() {
+  greet () {
     alert('greeting: ' + this.msg)
   }
-
-  // lifecycle hook
-  ready() {
-    this.greet()
-  }
 }
-
-// mount
-new Component({
-  el: '#el'
-})
 ```
 
 ### Build the Example
diff --git a/example/example.html b/example/example.html
@@ -5,7 +5,7 @@
     <title></title>
   </head>
   <body>
-    <div id="el"></div>
+    <div id="el" prop-message="Hello!"></div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/example/example.js b/example/example.js
@@ -1,38 +1,48 @@
-import component from '../'
+import VueCompoent from '../'
 
-@component
-export default class Component {
+@VueCompoent
+class App {
 
-  // template
+// template
   static template = `
     <div>
       <input v-model="msg">
+      <p>prop: {{propMessage}}</p>
       <p>msg: {{msg}}</p>
       <p>computed msg: {{computedMsg}}</p>
       <button @click="greet">Greet</button>
     </div>
   `
 
-  // data
-  msg = 'hello'
+  // props
+  static props = {
+    propMessage: String
+  }
+
+  // return initial data
+  data () {
+    return {
+      msg: 123
+    }
+  }
+
+  // lifecycle hook
+  ready () {
+    this.greet()
+  }
 
   // computed
-  get computedMsg() {
+  get computedMsg () {
     return 'computed ' + this.msg
   }
 
   // method
-  greet() {
+  greet () {
     alert('greeting: ' + this.msg)
   }
-
-  // lifecycle hook
-  ready() {
-    this.greet()
-  }
 }
 
 // mount
-new Component({
+new App({
   el: '#el'
 })
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,12 +1,16 @@
 module.exports = {
-  entry: './example/example.es7.js',
+  entry: './example/example.js',
   output: {
     path: './example',
     filename: 'build.js'
   },
   module: {
     loaders: [
-      { test: /\.es7\.js$/, loader: 'babel?stage=0' }
+      {
+        test: /\.js$/,
+        exclude: /node_modules|vue\/src/,
+        loader: 'babel?stage=0'
+      }
     ]
   },
   devtool: 'source-map'
diff --git a/index.js b/index.js
@@ -1,26 +1,22 @@
 var Vue = require('vue')
 
 var internalHooks = [
+  'data',
+  'el',
+  'init',
   'created',
   'ready',
   'beforeCompile',
-  'compiled', 
+  'compiled',
   'beforeDestroy',
   'destroyed',
-  'attached', 
+  'attached',
   'detached',
   'activate'
 ]
 
 function decorator (Component) {
   var options = {}
-  // instance properties are data
-  var data = new Component()
-  if (Object.keys(data).length) {
-    options.data = function () {
-      return clone(data)
-    }
-  }
   // prototype props.
   var proto = Component.prototype
   Object.getOwnPropertyNames(proto).forEach(function (key) {
@@ -56,18 +52,4 @@ function decorator (Component) {
   return Super.extend(options)
 }
 
-function clone (val) {
-  if (val === null || typeof val !== 'object') {
-    return val
-  } else if (Array.isArray(val)) {
-    return val.map(clone)
-  } else {
-    var res = {}
-    Object.keys(val).forEach(function (key) {
-      res[key] = clone(val[key])
-    })
-    return res
-  }
-}
-
 module.exports = decorator
