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