鍍金池/ 問答/HTML5  HTML/ beego框架中使用vue的component 編譯出錯

beego框架中使用vue的component 編譯出錯

這樣一個網(wǎng)頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>

<body>
<div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

<script>
    var data = { counter: 0 }

    Vue.component('simple-counter', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        // 技術(shù)上 data 的確是一個函數(shù)了，因此 Vue 不會警告，
        // 但是我們卻給每個組件實例返回了同一個對象的引用
        data: function () {
            return data
        }
    });

    new Vue({
        el: '#example-2'
    })
</script>
</body>
</html>

router中


func init() {
    beego.Router("/arcTest.html", &controllers.ArcTestController{}, "*:Arc")
}

controller中

func (c *ArcTestController) Arc() {
    c.TplName = "arcTest.html"
}

單獨運行html頁面沒有任何問題
放進beego框架中
bee run一下報錯
[E] [template.go:174] parse template err: arcTest.html template: arcTest.html:20: function "counter" no
t defined
[W] [beego.go:97] template: arcTest.html:20: function "counter" not defined
panic: template: arcTest.html:20: function "counter" not defined

counter不能使用，刪去就編譯成功了，但是明明有定義 這個例子就是在vue官網(wǎng)上復制的，為什么beego就是編譯不過，導致整個項目都運行不起來，有沒有大神知道怎么解決，跪求。

回答
編輯回答
心上人

beego框架如何安裝vue？

2017年2月22日 19:13
編輯回答
懷中人

如果我沒有記錯，beego 使用占位符是 '{{ }}' ，vue也是用這個 '{{ }}'。

然后beego會先進行解析，然后在吐給瀏覽器解析。

所以，beego看到了你的{{ count }} ， 你在beego里面又沒有定義這個，所以報錯了。

解決方法

  1. 改 beego的占位符設置。我不知道怎么改，我對beego不了解。
  2. 改vue的占位符設置。
new Vue({
  delimiters: ['${', '}']
})

// 分隔符變成了 ES6 模板字符串的風格

https://cn.vuejs.org/v2/api/#...

2017年1月18日 20:54