vue花括号数据绑定不成功的问题

闭曈彤

已于 2024-10-09 17:21:34 修改

阅读量3.5k

点赞数 1

分类专栏： vue 前端文章标签： vue

于 2018-01-19 23:51:31 首次发布

本文链接：https://blog.csdn.net/weixin_38353851/article/details/79111708

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

在Vue项目中，遇到花括号数据绑定显示{{message}}而非预期的message内容。通过调整引用顺序，即先引入vue.js，然后编写HTML，最后引入自定义JS文件，问题得到解决。具体原因有待进一步探究。

摘要由CSDN通过智能技术生成

<!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>
        <div id="app">
            <p>{{message}}</p>
        </div>

	</body>
</html>

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

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>
        <div id="app">
            <p>{{message}}</p>
        </div>
	</body>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>