文章目录
第一个Vue程序
第一步：引入vue.js
<script src="./lib/vue.js"></script>
第二步：添加<div>标签
<div id="app">
{{message}}
</div>
第三步：挂载在Vue上
<script>
var app = new Vue({
el:'#app',
data:{
message:'奥特曼'
}
})
</script>
el挂载点
vue实例的作用范围
是否可以选择其他选择器
- 可以选择，但是建议使用id选择器，id选择器是唯一的，class和标签都不具备唯一性
是否可以设置其他dom元素
- 可以使用其他标签，但是不能使用html和body标签
<body>
{{message}}
<div id="app" class="app">
{{message}}
<span>
{{message}}
</span>
</div>
<script>
var app = new Vue({
el:'#app', //id选择器
// el:'.app', //class选择器
// el:'div', //标签选择器
data:{
message:'奥特曼'
}
})
</script>
</body>
data属性(数据对象)
- Vue中用到的数据定义在data中
- data中可以写复杂数据类型
- 渲染复杂类型数据是，遵守js的语法即可
<div id="app">
{{message}}
<h2>
{{school.name}}----{{school.mobile}}
</h2>
<ul>
<li> {{campus[0]}} </li>
<li> {{campus[1]}} </li>
<li> {{campus[2]}} </li>
<li> {{campus[3]}} </li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'字符串',
school:{
name:'黑马程序员',
mobile:'400-618-9090',
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
- 效果图
