vecty.js
新加坡
程序代码 框架/库

vecty.js

基于 gopherjs 的一种类似 React 的开发框架

爱站权重:PC 百度权重移动 百度移动权重

gopherjs 是把 go 编译为 js 的工具。 vecty 是基于 gopherjs 的一种类似 react 的开发框架

安装 gopherjs 和 vecty

go get -u github.com/gopherjs/gopherjs
go get -u github.com/gopherjs/vecty

vecty 自带的例子在 example 目录,有 todomvc 和 markdown 编辑器。

简单的例子

package main

import (
	"strconv"

	v "github.com/gopherjs/vecty"
	"github.com/gopherjs/vecty/elem"
	"github.com/gopherjs/vecty/event"
)

func main() {
	v.SetTitle("title message swt")
	v.RenderBody(&MyComponent{})
}

type MyComponent struct {
	v.Core
	btnCount int
}

func (mc *MyComponent) onButtonClick(e *v.Event) {
	println("click my component button")
	mc.btnCount++
	v.Rerender(mc)
}

func (mc *MyComponent) Render() v.ComponentOrhtml {
	return elem.Body(
		elem.Button(
			v.Markup(
				event.Click(mc.onButtonClick),
			),
			v.Text("btn"+strconv.Itoa(mc.btnCount)),
		),
	)
}

运行它

在 $GOPATH/src/ele/gopherjs/t1 文件写下这个文件,命名为 t1.go。然后 cd 到 t1 文件夹,运行命令 gopherjs serve,将会在 localhost:8080 运行服务,使用浏览器访问 http://localhost:8080/ ,则可以查看运行结果。

解释

这个例子中,定义了组件 MyComponent,需要内嵌 vecty.Core 结构,实现 vecty.Component 接口要求的 Render 方法。

Render 方法负责构建代表组件的 html

再看 main 方法,调用 vecty.SetTitle 方法设置标题,调用 vecty.RenderBody(&MyComponent{}) 方法把 MyCompoent 组件渲染为文档的 body。

回到 MyComponent 的 Render 方法,在 Button 内包含 Markup, Markup 内包括 event.Click,给 Button 附加了 click 事件处理函数 onButtonClick。

事件处理函数 onButtonClick 修改了此组件的 btnCount 字段,然后调用 vecty.Rerender 方法重新渲染此组件,界面上就能看到按钮上的文字被改变了。

数据统计

数据评估

vecty.js浏览人数已经达到11,如你需要查询该站的相关权重信息,可以点击"爱站数据""Chinaz数据"进入;以目前的网站数据参考,建议大家请以爱站数据为准,更多网站价值评估因素如:vecty.js的访问速度、搜索引擎收录以及索引量、用户体验等;当然要评估一个站的价值,最主要还是需要根据您自身的需求以及需要,一些确切的数据则需要找vecty.js的站长进行洽谈提供。如该站的IP、PV、跳出率等!

关于vecty.js特别声明

本站东辰资源网提供的vecty.js都来源于网络,不保证外部链接的准确性和完整性,同时,对于该外部链接的指向,不由东辰资源网实际控制,在2021年9月28日 上午10:52收录时,该网页上的内容,都属于合规合法,后期网页的内容如出现违规,可以直接联系网站管理员进行删除,东辰资源网不承担任何责任。

相关导航

暂无评论

暂无评论...