Vue之el和data基本使用
【摘要】 Vue之el和data基本使用
1. el：挂载点
案例：分别用类、标签选择器来绑定挂载点
<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：数据对象
案例：分别使用对象和数组的形式定义数据对象后取出
<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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）