[Vue]Hello Vue
Posted leoshi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Vue]Hello Vue相关的知识，希望对你有一定的参考价值。
js引用
/*必须放在head标签中*/
<script src="https://unpkg.com/vue/dist/vue.js"></script>html代码块
<div id="myApp">
{{ message }}
</div>js代码块
/*必须放在body标签中,一般放在body体末尾位置*/
<script>
/*js代码段*/
var myApp = new Vue({
/*绑定标签的id*/
el:'#myApp',
/*标签上绑定的数据, data为系统默认不允许修改*/
data:{
/*message必须与标签变量保持一致*/
message:'Hello Vue.js World!'
}
});
</script>index.html全代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
/*vuejs引用*/
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>hellovue</title>
</head>
<body>
<div id="myApp">
{{ message }}
</div>
<script>
/*js代码段*/
var myApp = new Vue({
/*绑定标签的id*/
el:'#myApp',
/*标签上绑定的数据, data为系统默认不允许修改*/
data:{
/*message必须与标签变量保持一致*/
message:'Hello Vue.js World!'
}
});
</script>
</body>
</html>
END
以上是关于[Vue]Hello Vue的主要内容，如果未能解决你的问题，请参考以下文章