您现在的位置:首页 >> 前端 >> 内容

vue花括号数据绑定不成功的问题如何解决

时间:2018/1/20 11:56:41 点击:

  核心提示:vue花括号数据绑定不成功的问题如何解决!DOCTYPE htmlhtmlheadmeta charset=utf-8 /title/title/headscript src=js/vue.js ty...

vue花括号数据绑定不成功的问题如何解决

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--引入vue-->
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引入main-->
    <body>
        <p id="app">
            <p>{{message}}</p>
        </p>

    </body>
</html>

main.js如下图所示,只包含message信息,绑定到id为app的p上。

var app=new Vue({
    el:'#app',
    data:{
        message:'hhh'
    }
})

结果显示:

{{message}}

vue.js和自己写的js都在头部引用,并不能出现理想中的message信息。

更改一下引入顺序:

先引入vue.js——再写html内容——最后引入自己写的js代码。成功!原因暂时还不清楚,待日后填坑

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <p id="app">
            <p>{{message}}</p>
        </p>
    </body>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>

Tags:VU UE E花 花括 
作者:网络 来源:weixin_383