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.
|
> **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.
|
- 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:
|
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,
|
watch,
|
||||||
methods,
|
methods,
|
||||||
template: ComponentClass.template,
|
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 selector() { return '' }
|
||||||
static get template() { return '' }
|
static get template() { return '' }
|
||||||
static get props() { 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