hvue

package module
v0.0.0-...-6c76eb2 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Oct 29, 2018 License: MIT Imports: 3 Imported by: 0

README

Intro

hvue is a GopherJS wrapper for the Vue Javascript framework.

Install

go get github.com/huckridgesw/hvue

Examples & Demos

Overview

Generally speaking, the examples follow the examples in the Vue guide.

01-introduction has examples from the Vue Introduction page.

02-lifecycle demos Vue lifecycle hooks but does not correspond to any specific example on that page.

03-computed-basic and 04-computed-with-setter have examples from Computed Properties and Watchers.

And so on. Links are in the code.

Running the examples

cd /path/to/github.com/huckridgesw/hvue
gopherjs serve github.com/huckridgesw/hvue

and then

GoDoc

http://godoc.org/github.com/HuckRidgeSW/hvue

Documentation

Index

Constants

View Source 
const (
	PString   pOptionType = iota
	PNumber               = iota
	PBoolean              = iota
	PFunction             = iota
	PObject               = iota
	PArray                = iota
)

Variables

This section is empty.

Functions

func Cloak 

func Cloak(i interface{}) *js.Object

Cloak encapsulates a Go value within a JavaScript object. None of the fields or methods of the value will be exposed; it is therefore not intended that this *Object be used by Javascript code. Instead this function exists as a convenience mechanism for carrying state from Go to JavaScript and back again.

Credit to Paul Jolly; see https://github.com/gopherjs/gopherjs/issues/704#issuecomment-332109410

func Delete 

func Delete(o, key interface{})

Delete is a wrapper for js{Vue.delete}

func NewArray 

func NewArray() *js.Object

NewArray is a utility function for creating a new JS array.

func NewComponent 

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

NewComponent defines a new Vue component. It wraps js{Vue.component}: https://vuejs.org/v2/api/#Vue-component.

func NewObject 

func NewObject() *js.Object

NewObject is a utility function for creating a new *js.Object.

func NewT 

func NewT(t interface{}) interface{}

NewT is an attempt at making GopherJS struct initialization easier and more Go-like. The intent is that instead of saying 

f := &T{Object: NewObject()}
f.Slot1 = foo
f.Slot2 = bar
// etc

you can say 

f := NewT(&T{Slot1: foo, Slot2: bar}).(*T)

t should be a pointer, as in the examples above. Only exported fields are set.

Warning: Experimental. Use at your own risk, and write a unit test. Doesn't work with complex types. Not sure exactly what that means yet, but it means at least that it doesn't work with fields of type []string, or probably anything that's not a "basic" type such as int, float, string, etc.

func Push 

func Push(o *js.Object, any interface{}) (newLength int)

Push appends any to the end of o, in place.

func Set 

func Set(o, key, value interface{}) interface{}

Set is a wrapper for js{Vue.set}

func Uncloak 

func Uncloak(o *js.Object) interface{}

Uncloak is the inverse of Cloak.

Types

type ComponentOption 

type ComponentOption func(*Config)

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/Set. You could create an accessor; see the 04-computed-with-setter example.

func ComputedWithGetSet 

func ComputedWithGetSet(name string, get func(vm *VM) interface{}, set func(vm *VM, newValue *js.Object)) 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.

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.

FIXME: You can't use MethodsOf with this function.

func DataFunc 

func DataFunc(f func(*VM) interface{}) 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 reguster 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(value interface{}) ComponentOption

DataS sets the struct `value` as the entire contents of the vm's data field. `value` should be a pointer to the struct. 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 Filter 

func Filter(name string, f func(vm *VM, value *js.Object, args ...*js.Object) interface{}) ComponentOption

untested

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 Store 

func Store() ComponentOption

Store enables the Vuex store option, as described here: https://vuex.vuejs.org/guide/state.html

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

type Config 

type Config struct {
	*js.Object
	El         string     `js:"el"`
	Data       *js.Object `js:"data"`
	Methods    *js.Object `js:"methods"`
	Props      *js.Object `js:"props"`
	Template   string     `js:"template"`
	Computed   *js.Object `js:"computed"`
	Components *js.Object `js:"components"`
	Filters    *js.Object `js:"filters"`
	Store      *js.Object `js:"store"`

	Setters *js.Object `js:"hvue_setters"`
	// contains filtered or unexported fields
}

Config is the config object for NewVM.

func (*Config) Option 

func (c *Config) Option(opts ...ComponentOption)

Option sets the options specified.

type Directive 

type Directive struct {
	*js.Object
}

Directive wraps a js{Vue.directive} object. https://vuejs.org/v2/api/#Vue-directive.

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

type DirectiveBinding 

type DirectiveBinding struct {
	*js.Object
	Name       string      `js:"name"`
	Value      interface{} `js:"value"`
	OldValue   interface{} `js:"oldValue"`
	Expression string      `js:"expression"`
	Arg        string      `js:"arg"`
	Modifiers  *js.Object  `js:"modifiers"`
}

DirectiveBinding wraps the js{binding} slot of the directive hook argument. https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

type DirectiveConfig 

type DirectiveConfig struct {
	*js.Object
	Bind             *js.Object `js:"bind"`
	Inserted         *js.Object `js:"inserted"`
	Update           *js.Object `js:"update"`
	ComponentUpdated *js.Object `js:"componentUpdated"`
	Unbind           *js.Object `js:"unbind"`
	Short            *js.Object `js:"short"`
}

DirectiveConfig is the config object for configuring a directive.

func (*DirectiveConfig) Option 

func (c *DirectiveConfig) Option(opts ...DirectiveOption)

type DirectiveOption 

type DirectiveOption func(*DirectiveConfig)

func Bind 

func Bind(f func(el *js.Object, binding *DirectiveBinding, vnode *js.Object)) 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.Object, binding *DirectiveBinding, vnode, oldVode *js.Object)) 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.Object, binding *DirectiveBinding, vnode *js.Object)) 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.Object, binding *DirectiveBinding, vnode, oldVnode *js.Object)) 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.Object, binding *DirectiveBinding, vnode *js.Object)) 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.Object, binding *DirectiveBinding, vnode, oldVnode *js.Object)) 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

type Event 

type Event struct {
	*js.Object
}

Event wraps the event object sent to v-on event handlers.

type PropConfig 

type PropConfig struct {
	*js.Object
	// contains filtered or unexported fields
}

PropConfig is the config object for Props

func (*PropConfig) Option 

func (p *PropConfig) Option(opts ...PropOption)

type PropOption 

type PropOption func(*PropConfig)
var Required PropOption = func(p *PropConfig) {
	p.required = true
}

Required specifies that the prop is required. https://vuejs.org/v2/guide/components.html#Props.

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 func(*VM) interface{}) PropOption

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

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.Object) 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.

type VM 

type VM struct {
	*js.Object
	Data  *js.Object `js:"$data"`
	Props *js.Object `js:"$props"`
	El    *js.Object `js:"$el"`

	// Several of these should probably be functions, like Refs already is.
	Options     *js.Object   `js:"$options"`
	Parent      *js.Object   `js:"$parent"`
	Root        *js.Object   `js:"$root"`
	Children    []*js.Object `js:"$children"`
	Slots       *js.Object   `js:"$slots"`
	ScopedSlots *js.Object   `js:"$scopedSlots"`
	IsServer    bool         `js:"$isServer"`

	Store *js.Object `js:"$store"` //Vuex store, in case option is enabled, see https://vuex.vuejs.org/guide/state.html

	// Note existence of fields with setter methods, which won't show up in
	// $data.
	Setters *js.Object `js:"hvue_setters"`
}

VM wraps a js Vue object.

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.

func (*VM) Emit 

func (vm *VM) Emit(event string, args ...interface{})

Emit emits an event. It wraps js{vm.$emit}: https://vuejs.org/v2/api/#vm-emit.

func (*VM) GetData 

func (vm *VM) GetData() interface{}

GetData returns the Go data object associated with a *VM. You need to type assert its return value to data type you passed to DataS(), or returned from the function given to DataFunc().

func (*VM) Refs 

func (vm *VM) Refs(name string) *js.Object

Refs returns the ref for name. vm.Refs("foo") compiles to js{vm.$refs.foo}. It wraps vm.$refs: https://vuejs.org/v2/api/#vm-refs.

func (*VM) Set 

func (vm *VM) Set(key string, value interface{})

Set wraps (*js.Object).Set(), but checks to make sure it's a valid slot in the VM's data object, and panics otherwise. (If you don't want this check, then use vm.Object.Set() directly.)

Source Files

View all Source files

Directories

Path Synopsis
examples
01-introduction
02-lifecycle
03-computed-basic
04-computed-with-setter
05-class-and-style-bindings
06-list-rendering
07-components
08-directives

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.