pu369com

go vue真是稀缺组合(cdn方式）

要点：直接将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

 

posted on 2020-05-12 12:57  pu369com  阅读(833)  评论(0)  编辑  收藏  举报

导航