github.com/oskca/gopherjs-vue
Package composite is an higher level wrapper of gopherjs-vue, by providing a more gopher friendly API, this package tries to hide the JavaScript details for VueJS easy usage in GopherJS world. Package vue provides gopherjs bindings for VueJS. see func `New` and the examples for detailed usage instructions.
Readme
VueJS bindings for gopherjs
Combined the power of Gopherjs and VueJS, you can use
golang struct to provide the two-way data-binding context for VueJS,
and easily implements the popular browser MVVM models in Go.
Currently ViewModel/Component/Directive/Filter are supported and wrapped in
a gopherjs friendly way.
These are the basic rules to use this package:
all exported fields of the golang struct would become VueJS Instance's
data which can be used in the html to do data binding: v-bind, etc
all exported funcs of the golang struct would become VueJS Instance's
methods which can be called as html event handler: v-on, etc
the golang struct talked above is actually of pointer type and
should have an anonymous embeded *js.Object field and the exported fields
should have proper js struct tag for bidirectionaly data bindings
This package includes the minified|product version of VueJS code by default,
if you want to include the debug|dev version of of VueJS code, please specify
buidling tags debug to the gopherjs build cmd as this:
gopherjs build --tags debug main.go
for more details please see the examples.
gopherjs code:
package main
import (
"github.com/gopherjs/gopherjs/js"
"github.com/oskca/gopherjs-vue"
)
type Model struct {
*js.Object // this is needed for bidirectional data bindings
IntValue int `js:"integer"`
Str string `js:"str"`
}
// this would be recognized as Inc in html
func (m *Model) Inc() {
m.IntValue += 1
println("inc called")
}
// this would be recognized as Repeat in html
func (m *Model) Repeat() {
m.Str = m.Str + m.Str
}
// this would be recognized as Reset in html
func (m *Model) Reset() {
m.Str = "a string "
}
func main() {
m := &Model{
Object: js.Global.Get("Object").New(),
}
// field assignment is required in this way to make data passing works
m.IntValue = 100
m.Str = "a string"
// create the VueJS viewModel using a struct pointer
vue.New("#app", m)
}
html markup:
<!DOCTYPE html>
<html>
<body>
<div id="app" v-cloak>
<div>integer: {{ integer }}
<input v-model="integer"></input>
</div>
<div>str: {{ str }} </div>
<button v-on:click="Inc">Increase</button>
<button v-on:click="Repeat">Repeat</button>
<button v-on:click="Reset">Reset</button>
</div>
<script type="text/javascript" src="basic.js"></script>
</body>
</html>
compile and run, then there you are :)
FAQs
Package composite is an higher level wrapper of gopherjs-vue, by providing a more gopher friendly API, this package tries to hide the JavaScript details for VueJS easy usage in GopherJS world. Package vue provides gopherjs bindings for VueJS. see func `New` and the examples for detailed usage instructions.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.