标签：min otto ott rip token pkg ola and ack
要点：直接将vue模板文件（实际就是html,文件名和后缀可任意）放在go的模板目录即可。
1、首先在每个html文件的head部分按顺序加上（注意顺序）
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
以及
<script> var app=new Vue({ el:"#app" }) </script>
2、然后在body部分加上
<div id="app"> </div>
3、然后从官方https://element.eleme.cn/#/zh-CN/component/installation抄组件：
将组件代码复制到div#app中，相应的data 也抄到 var app对应的位置（见下面的4、参考代码），抄methods也是类似。
另外，form表单提交参考官方文档。还可以用类似：
<el-row @click.native=dealThing() > </el-row>
给组件绑定原生事件
4、参考代码：
go文件主要代码
func Serve() { //静态文件服务 http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./static")))) http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { // 解析指定文件生成模板对象 tem, _ := template.ParseFiles("v/main.vue") Data := V{A: "pu369:go+vue真是稀缺组合"} //渲染输出 tem.Execute(w, Data) }) http.ListenAndServe(":8000", nil) }
直接在模板目录v下新建main.vue
<html> <head> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> {{.A}} <div id="app"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </el-row> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> <script> var app=new Vue({ el:"#app", data: { radio: ‘1‘ } }) </script> </body> </html>
补充：但是试图用双大括号绑定变量时出错了，原因是go template和vue的定界符冲突，可修改vue的 delimiters，如：
<script> var app=new Vue({ el:"#app", data: { radio: ‘1‘, name: ‘菜鸟教程‘ } , delimiters:[‘${‘, ‘}‘] }) </script>
然后在vue模板中可以用${}绑定变量了：
<li>
${name}
</li>
似乎也可以在go中用template的Delims修改go template的模板定界符。
参考：
https://studygolang.com/articles/23978?fr=sidebar
https://blog.csdn.net/itkingone/article/details/70210248
https://www.runoob.com/vue2/vue-loop.html
标签：min otto ott rip token pkg ola and ack
原文地址：https://www.cnblogs.com/pu369/p/12870983.html
