Bläddra i källkod

Add vue lifecycle hooks

tags/v0.2.0
Garrett Mills 2 månader sedan
förälder
incheckning
9d2a981f47
Signerad av: garrettmills <garrett@glmdev.tech> GPG-nyckel ID: 6ACD58D6ADACFC6E
3 ändrade filer med 31 tillägg och 2 borttagningar
  1. 5
    1
      README.md
  2. 9
    0
      package.json
  3. 17
    1
      vues6.js

+ 5
- 1
README.md Visa fil

@@ -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
- 0
package.json Visa fil

@@ -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"
}

+ 17
- 1
vues6.js Visa fil

@@ -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() {}
}

Laddar…
Avbryt
Spara