github.com/oskca/gopherjs-vue
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
Unknown package
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
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.