diff --git a/README.md b/README.md index c4a13dc..7447d3a 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/package.json b/package.json new file mode 100644 index 0000000..c8a0562 --- /dev/null +++ b/package.json @@ -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 ", + "license": "MIT" +} diff --git a/vues6.js b/vues6.js index 1031880..a136cdf 100644 --- a/vues6.js +++ b/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() {} +}