文章目录
- 1. el：挂载点
- 2. data：数据对象
1. el：挂载点
案例：分别用类、标签选择器来绑定挂载点
代码语言：javascript复制<body>
<div id="app" class="app">
{{message}}<br>
<span>{{message}}</span><br>
<span>{{ message }}</span>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
// el: "#app",
// el: ".app",
el: "div",
data: {
message: "兮动人"
}
})
</script>
</body>
2. data：数据对象
案例：分别使用对象和数组的形式定义数据对象后取出
代码语言：javascript复制<body>
<div id="app">
{{ message }}
<h2>{{ movie.name }} {{ movie.date }}</h2>
<ul>
<li>{{ study[0] }}</li>
<li>{{ study[1] }}</li>
<li>{{ study[2] }}</li>
<li>{{ study[3] }}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello vue',
movie: {
name: "进击的巨人 The Final Season",
date: 2021
},
study: ["前端","后台","运维","安全","测试"]
}
})
</script>
</body>
