小白之创建第一个vue实例(vue2)

(1)安装node.js,尽量16+版本

 (2)打开idea创建vue目录,再在该目录下创建vue1.html文件,并敲入下列代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大黄哥哥带你学vue</title>
</head>
<body>
<div id="app">
{{message}}
<div>
{{num++}}
</div>
<div>
{{arr.find(value => value.name==='张三')?.age}}
</div>
<div v-html="htmlStr">

</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data:{
message:'hello 大黄哥哥!',
num: 0,
arr:[{name:'张三',age:20}],
htmlStr:'<strong>我是大黄喵哥哥!!!</strong>'
}

})
</script>

</body>
</html>

 

 

posted @ 2023-10-14 23:51  大黄喵吖  阅读(30)  评论(0编辑  收藏  举报