小白之创建第一个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>
<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>