hvue

func Activated ¶

func Activated(f func(vm *VM)) ComponentOption

Activated lets you define a hook for the activated lifecycle action. Only runs in Vue-defined components (e.g. not regular DIVs) inside a <keep-alive>. "Called when a kept-alive component is activated." https://vuejs.org/v2/api/#activated and https://vuejs.org/v2/api/#keep-alive

func BeforeCreate ¶

func BeforeCreate(f func(vm *VM)) ComponentOption

BeforeCreate lets you define a hook for the beforeCreate lifecycle action. "Called synchronously after the instance has just been initialized, before data observation and event/watcher setup." https://vuejs.org/v2/api/#beforeCreate

func BeforeDestroy ¶

func BeforeDestroy(f func(vm *VM)) ComponentOption

BeforeDestroy lets you define a hook for the beforeDestroy lifecycle action. "Called right before a Vue instance is destroyed. At this stage the instance is still fully functional." https://vuejs.org/v2/api/#beforeDestroy

func BeforeMount ¶

func BeforeMount(f func(vm *VM)) ComponentOption

BeforeMount lets you define a hook for the beforeMount lifecycle action. "Called right before the mounting begins: the render function is about to be called for the first time." https://vuejs.org/v2/api/#beforeMount

func BeforeUpdate ¶

func BeforeUpdate(f func(vm *VM)) ComponentOption

BeforeUpdate lets you define a hook for the beforeUpdate lifecycle action. "Called when the data changes, before the virtual DOM is re-rendered and patched.

You can perform further state changes in this hook and they will not trigger additional re-renders." https://vuejs.org/v2/api/#beforeUpdate

func Component ¶

func Component(name string, opts ...ComponentOption) ComponentOption

Component is used in NewVM to define a local component, within the scope of another instance/component. https://vuejs.org/v2/guide/components.html#Local-Registration

func Computed ¶

func Computed(name string, f func(vm *VM) interface{}) ComponentOption

Computed defines name as a computed property. Note that name *must not* be set in data for this to work. It's probably best if it's not even a slot in the struct. Only access it via vm.Get. You could also create an accessor; see the 04-computed-with-setter example.

Computed functions require synchronous functions that can return values to Vue. Go/wasm cannot support either of those things just yet. So currently this function just panics.

Use a watcher instead.

func ComputedWithGetSet ¶

func ComputedWithGetSet(name string, get func(vm *VM) interface{}, set func(vm *VM, newValue js.Value)) ComponentOption

ComputedWithGetSet defines name as a computed property with explicit get & set. Note that name *must not* be set in data for this to work. It's probably best if it's not even a slot in the struct. Only access it via vm.Get/Set. You could create an accessor; see the 04-computed-with-setter example.

Computed functions require synchronous functions that can return values to Vue. Go/wasm cannot support either of those things just yet. So currently this function just panics.

Use a watcher instead.

func Created ¶

func Created(f func(vm *VM)) ComponentOption

Created lets you define a hook for the created lifecycle action. "Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet." https://vuejs.org/v2/api/#created

func Data ¶

func Data(name string, value interface{}) ComponentOption

Data sets a single data field. Data can be called multiple times for the same vm.

Note that you can't use MethodsOf with this function.

func DataFunc ¶

func DataFunc(f DataFuncT, fieldNames ...string) ComponentOption

DataFunc defines a function that returns a new data object. You have to use DataFunc with Components, not Data or DataS.

Note that this function is called when the VM or component is created (https://vuejs.org/v2/api/#created), not when you call "NewVM". This means that you can't, for example, get clever and try to use the same object here as with MethodsOf. MethodsOf requires an object when you call NewVM to register the VM, long before the VM is actually created or bound; this is called every time a new VM or component is created.

func DataS ¶

func DataS(goValue interface{}, jsValue js.Value) ComponentOption

DataS sets the object `goValue` as the entire contents of the vm's data field. If the object has a VM field, NewVM sets it to the new VM object.

func Deactivated ¶

func Deactivated(f func(vm *VM)) ComponentOption

Deactivated lets you define a hook for the deactivated lifecycle action. Only runs in Vue-defined components (e.g. not regular DIVs) inside a <keep-alive>. "Called when a kept-alive component is deactivated." https://vuejs.org/v2/api/#deactivated and https://vuejs.org/v2/api/#keep-alive

func Destroyed ¶

func Destroyed(f func(vm *VM)) ComponentOption

Destroyed lets you define a hook for the destroyed lifecycle action. "Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed." https://vuejs.org/v2/api/#destroyed

func El ¶

func El(selector string) ComponentOption

El sets the vm's el slot.

func Method ¶

func Method(name string, f interface{}) ComponentOption

Method adds a single function as a "method" on a vm. It does not change the method set of the data object, if any.

func MethodsOf ¶

func MethodsOf(t interface{}) ComponentOption

MethodsOf sets up vm.methods with the exported methods of the type that t is an instance of. Call it like MethodsOf(&SomeType{}). SomeType must be a pure Javascript object, with no Go fields. That is, all slots just have `js:"..."` tags.

If a method wants a pointer to its vm, use a *VM as the first argument.

You can't use MethodsOf with Data(), only with DataS or DataFunc().

func Mounted ¶

func Mounted(f func(vm *VM)) ComponentOption

Mounted lets you define a hook for the mounted lifecycle action. "Called after the instance has just been mounted where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called." https://vuejs.org/v2/api/#mounted

func PropObj ¶

func PropObj(name string, opts ...PropOption) ComponentOption

PropObj defines a complex prop slot called `name`, configured with Types, Default, DefaultFunc, and Validator.

func Props ¶

func Props(props ...string) ComponentOption

Props defines one or more simple prop slots. For complex prop slots, use PropObj(). https://vuejs.org/v2/api/#props

func Template ¶

func Template(template string) ComponentOption

Template defines a template for a component. It sets the js{template} slot of a js{Vue.component}'s configuration object.

func Updated ¶

func Updated(f func(vm *VM)) ComponentOption

Updated lets you define a hook for the updated lifecycle action. "Called after a data change causes the virtual DOM to be re-rendered and patched.

The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead." https://vuejs.org/v2/api/#updated

func Watch ¶

func Watch(name string, f func(*VM)) ComponentOption

func NewDirective ¶

func NewDirective(name string, opts ...DirectiveOption) *Directive

NewDirective creates a new directive. It wraps js{Vue.directive}. https://vuejs.org/v2/api/#Vue-directive

func Bind ¶

func Bind(f func(el js.Value, binding *DirectiveBinding, vnode js.Value)) DirectiveOption

Bind specifies the js{bind} directive hook function. Called only once, when the directive is first bound to the element. This is where you can do one-time setup work. https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions

func ComponentUpdated ¶

func ComponentUpdated(f func(el js.Value, binding *DirectiveBinding, vnode, oldVode js.Value)) DirectiveOption

ComponentUpdated specifies the js{componentUpdated} directive hook function. Called after the containing component and its children have updated. https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions

func Inserted ¶

func Inserted(f func(el js.Value, binding *DirectiveBinding, vnode js.Value)) DirectiveOption

Inserted specifies the js{inserted} directive hook function. Called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document). https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions

func Short ¶

func Short(f func(el js.Value, binding *DirectiveBinding, vnode, oldVnode js.Value)) DirectiveOption

Short allows you to use the "function shorthand" style of directive definition, when you want the same behavior on bind and update, but don't care about the other hooks. oldVnode is only used for the update hook; for the bind hook, it's nil. https://vuejs.org/v2/guide/custom-directive.html#Function-Shorthand

func Unbind ¶

func Unbind(f func(el js.Value, binding *DirectiveBinding, vnode js.Value)) DirectiveOption

Unbind specifies the js{unbind} directive hook function. Called only once, when the directive is unbound from the element. https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions

func Update ¶

func Update(f func(el js.Value, binding *DirectiveBinding, vnode, oldVnode js.Value)) DirectiveOption

Update specifies the js{update} directive hook function. Called after the containing component has updated, but possibly before its children have updated. The directive’s value may or may not have changed, but you can skip unnecessary updates by comparing the binding’s current and old values (see the Vue Guide on hook arguments). https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions

func Default ¶

func Default(def interface{}) PropOption

Default gives the default for a prop. https://vuejs.org/v2/guide/components.html#Props

func DefaultFunc ¶

func DefaultFunc(def js.Value) PropOption

DefaultFunc sets a function that returns the default for a prop. https://vuejs.org/v2/guide/components.html#Props

FIXME: Right now, can only pass an object (not a function). The JS helper function copies it to a new object. Later, need to be able to pass a function, which returns a new value.

func Types ¶

func Types(types ...pOptionType) PropOption

Types configures the allowed types for a prop. https://vuejs.org/v2/guide/components.html#Props.

func Validator ¶

func Validator(f func(vm *VM, value js.Value) interface{}) PropOption

Validator functions generate warnings in the JS console if using the vue.js development build. They don't panic or otherwise crash your code, they just give warnings if the validation fails.

FIXME: Currently does nothing, because in 1.11 Go functions called from JS can't return values.

func NewVM ¶

func NewVM(opts ...ComponentOption) *VM

NewVM returns a new vm, analogous to Javascript `new Vue(...)`. See https://dave.cheney.net/2014/10/17/functional-options-for-friendly-apis and https://commandcenter.blogspot.com.au/2014/01/self-referential-functions-and-design.html for discussions of how the options work, and also see the examples tree.

If you use a data object (via DataS) and it has a VM field, it's set to this new VM. TODO: Verify that the VM field is of type *hvue.VM.