1.Vue程序初体验💯
1.1第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<title>第一个vue程序</title>
<!-- 安装vue,当你使用script引用时候，vue作为全局变量 -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定Vue实例挂载的位置 -->
<div id="app"></div>
<hr>
<script>
new Vue({
data : {
message : 'hello vue!'
},
template:'<h1>{{message}}</h1>'
<!-- 第二步：将Vue实例挂载到id="app"的元素位置 -->
}).$mount('#app')
</script>
</body>
</html>
1.2Vue的data配置项
<script>
new Vue({
template:`<h1>最近非常火的电视剧{{name}}，他的上映日期
是{{releaseTime}},主角是{{lead.name}}，年龄是{{lead.age}}
其他演员包括：{{actor[0].name}}{{actor[0].age}}+{{actor[1].name}}
{{actor[1].age}}
</h1>`,
data:{
name:'狂飙',
releaseTime:'2023年1月1日',
lead:{
name:'高启强',
age:40
},
actor:[
{
name:'安星',
age:40
},
{
name:'高启兰',
age:30
}
]
} ,
}).$mount("#app")
</script>
1.3 Vue的template配置项
- 🔥template 只能有一个根元素
template : ‘
{{message}}
{{name}}
’ 错
template : ‘
{{message}}
{{name}}
