Add vue lifecycle hooks
This commit is contained in:
parent
65a20d9501
commit
9d2a981f47
@ -57,7 +57,11 @@ There are a few important things to note here:
|
||||
> **Important Note:** VuES6 uses `Object.getOwnPropertyNames` to determine the methods to bind to the Vue.js component. Thus, inherited methods are not supported at this time.
|
||||
|
||||
- Class methods beginning with `watch_` will not be made available as normal methods, but are instead watchers. In this example `watch_message()` defines a watcher on the `message` field.
|
||||
- There is no `data()` function. If you need to compute starting values, use the constructor.
|
||||
- There is no `data()` function, however the Vue lifecycle functions can be hooked into by implementing the following methods on your class:
|
||||
- `vue_on_create`
|
||||
- `vue_on_update`
|
||||
- `vue_on_mount`
|
||||
- `vue_on_destroy`
|
||||
|
||||
This is the equivalent of writing this:
|
||||
|
||||
|
9
package.json
Normal file
9
package.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "vues6",
|
||||
"version": "0.1.0",
|
||||
"description": "Use ES6 classes to define Vue.js components - without TypeScript!",
|
||||
"main": "vues6.js",
|
||||
"repository": "https://git.garrettmills.dev/garrettmills/vues6",
|
||||
"author": "Garrett Mills <garrett@glmdev.tech>",
|
||||
"license": "MIT"
|
||||
}
|
18
vues6.js
18
vues6.js
@ -32,6 +32,18 @@ export default class VuES6Loader {
|
||||
watch,
|
||||
methods,
|
||||
template: ComponentClass.template,
|
||||
created: function() {
|
||||
if ( typeof this.vue_on_create === 'function' ) this.vue_on_create()
|
||||
},
|
||||
updated: function() {
|
||||
if ( typeof this.vue_on_update === 'function' ) this.vue_on_update()
|
||||
},
|
||||
mounted: function() {
|
||||
if ( typeof this.vue_on_mount === 'function' ) this.vue_on_mount()
|
||||
},
|
||||
destroyed: function() {
|
||||
if ( typeof this.vue_on_destroy === 'function' ) this.vue_on_destroy()
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -41,5 +53,9 @@ export class Component {
|
||||
static get selector() { return '' }
|
||||
static get template() { return '' }
|
||||
static get props() { return [] }
|
||||
}
|
||||
|
||||
vue_on_create() {}
|
||||
vue_on_update() {}
|
||||
vue_on_mount() {}
|
||||
vue_on_destroy() {}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user