码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-12 13:24:25      阅读:89      评论:0      收藏:0      [点我收藏+]

标签: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

 

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

标签:min   otto   ott   rip   token   pkg   ola   and   ack   

原文地址:https://www.cnblogs.com/pu369/p/12870983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!