Update for Vue 2.0 (#20)

ktsn · yyx990803 · commit cafb94472a33 · 2016-08-31T16:54:00.000+02:00
* update internal hook names for Vue 2.0

* update example for 2.0

* update readme
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Note:
 
 2. Computed properties can be declared as class property accessors.
 
-3. `data`, `el` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
+3. `data`, `render` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
 
 4. For all other options, pass them to the decorator function.
 
@@ -42,7 +42,7 @@ class App {
   }
 
   // lifecycle hook
-  ready () {
+  mounted () {
     this.greet()
   }
 
diff --git a/example/example.html b/example/example.html
@@ -5,7 +5,7 @@
     <title></title>
   </head>
   <body>
-    <div id="el" prop-message="Hello!"></div>
+    <div id="el"></div>
     <script src="build.js"></script>
   </body>
 </html>
diff --git a/example/example.js b/example/example.js
@@ -3,16 +3,7 @@ import Component from '../'
 @Component({
   props: {
     propMessage: String
-  },
-  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>
-  `
+  }
 })
 class App {
   // return initial data
@@ -23,7 +14,7 @@ class App {
   }
 
   // lifecycle hook
-  ready () {
+  mounted () {
     this.greet()
   }
 
@@ -36,9 +27,29 @@ class App {
   greet () {
     alert('greeting: ' + this.msg)
   }
+
+  render (h) {
+    return (
+      h('div', [
+        h('input', {
+          domProps: { value: this.msg },
+          on: {
+            input: (event) => {
+              this.msg = event.target.value
+            }
+          }
+        }),
+        h('p', ['prop: ', this.propMessage]),
+        h('p', ['msg: ', this.msg]),
+        h('p', ['computed msg: ', this.computedMsg]),
+        h('button', { on: { click: this.greet }}, ['Greet'])
+      ])
+    )
+  }
 }
 
 // mount
 new App({
-  el: '#el'
+  el: '#el',
+  render: h => h(App, { props: { propMessage: 'Hello!' }})
 })
diff --git a/index.js b/index.js
@@ -6,17 +6,17 @@ var Vue = require('vue')
 
 var internalHooks = [
   'data',
-  'el',
-  'init',
+  'beforeCreate',
   'created',
-  'ready',
-  'beforeCompile',
-  'compiled',
+  'beforeMount',
+  'mounted',
   'beforeDestroy',
   'destroyed',
-  'attached',
-  'detached',
-  'activate'
+  'beforeUpdate',
+  'updated',
+  'activated',
+  'deactivated',
+  'render'
 ]
 
 function componentFactory (Component, options) {
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "chai": "^3.5.0",
     "mocha": "^2.4.5",
     "node-libs-browser": "^1.0.0",
-    "vue": "^1.0.16",
+    "vue": "^2.0.0-rc.4",
     "webpack": "^1.12.12"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ Note:`
`12`	`12`
`13`	`13`	`2. Computed properties can be declared as class property accessors.`
`14`	`14`
`15`		-3. `data`, `el` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
	`15`	+3. `data`, `render` and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.
`16`	`16`
`17`	`17`	`4. For all other options, pass them to the decorator function.`
`18`	`18`
`@@ -42,7 +42,7 @@ class App {`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`// lifecycle hook`
`45`		`- ready () {`
	`45`	`+ mounted () {`
`46`	`46`	`this.greet()`
`47`	`47`	`}`
`48`	`48`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`"chai": "^3.5.0",`
`37`	`37`	`"mocha": "^2.4.5",`
`38`	`38`	`"node-libs-browser": "^1.0.0",`
`39`		`- "vue": "^1.0.16",`
	`39`	`+ "vue": "^2.0.0-rc.4",`
`40`	`40`	`"webpack": "^1.12.12"`
`41`	`41`	`}`
`42`	`42`	`}`