正文共:1360 字
预计阅读时间:5 分钟
翻译:疯狂的技术宅
来源:vugu
Vugu 是一个 Go语言开发库,可以很容易地使用 Go 语言编写 Web 用户界面。
其基本思路如下:
if
、for
和其他类似的 Go 语言表达式。vugugen
命令行工具与 go generate
集成。代码生成还尝试在需要时提供合理的默认值,以便 .vugu 文件包含尽可能少的样板,同时也然允许进行大量的自定义。由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的 WebAssembly 是一种新的字节码格式,主流浏览器都已经支持 WebAssembly。和 JS 需要解释执行不同,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行.
让我们创建一个在你的浏览器中运行的基本工作Vugu应用程序。它只需要三个小文件即可启动。确保至少安装了Go 1.12。
testapp
作为示例。你创建的每个文件都将直接放在此文件夹中,不需要子文件夹。go.mod
,它用来指定 Go 模块名称。首先你可以按照显示的模式选择自己喜欢的名称作为占位符。例如:module example.org/someone/testapp
root.vugu
:root.vugu
:<div class="my-first-vugu-comp">
<button @click="data.Toggle()">Test</button>
<div vg-if="data.Show">I am here!</div>
</div>
<style>
.my-first-vugu-comp { background: #eee; }
</style>
<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>
devserver.go
:// +build ignore
package main
import (
"log"
"net/http"
"os"
"github.com/vugu/vugu/simplehttp"
)
func main() {
wd, _ := os.Getwd()
l := "127.0.0.1:8844"
log.Printf("Starting HTTP Server at %q", l)
h := simplehttp.New(wd, true)
// include a CSS file
// simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
log.Fatal(http.ListenAndServe(l, h))
}
go run devserver.go
片刻之后,服务器就应该启动。它在 Windows、Linux 或 Mac 上的工作方式相同。Vugu 文件有三个部分:标记、样式和代码
标记是 HTML 元素,它是文件的显示部分。通常它是一个简单的 div 标签,例如:
<div class="some-name">
<!-- ... -->
</div>
它显示在文档中的适当位置。根组件(默认名为 “root” 并且位于 root.vugu 中)通常位于页面的 <body>
标记内。除 <script>
或 <style>
之外,该元素可以是任何类型。
样式是一个常规的 <style>
标记,包含使用此组件输出的 CSS。为了避免冲突,样式应该适当地加上前缀(对应于上面顶级标记元素上的 id 或类)。
代码是 Go 语言代码,会被逐字复制到最终的 .go 文件中。它被放入具有特定内容类型的脚本标记中,如下所示:
<script type="application/x-go">
// Go code here
</script>
注意:不支持 JavaScript,只支持 Go 代码。只可以有一种语言。
来源:https://www.vugu.org/
往期精选