<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
200px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app" >
<h1 @click="isUseBox = !isUseBox">{{title}}</h1>//@click是使用vue绑定点击事件，后面的"isUseBox = !isUseBox"是一个执行语句表示将app对象的isUseBox属性值取反
{{message}}//双向绑定app对象的message属性的值
<ul style="red;" :style="{width}">//:style表示使用vue的样式设置，后面的width表示将css属性width绑定到app对象width属性的值
<li v-for="item in articles" :title="item">//v-for="item in articles"表示循环访问app对象的articles属性，没循环一次就创建一个li元素，:title="item"表示将该li元素的title属性设置为articles数组属性中对应每个元素的值
{{item}}
</li>
</ul>
<div @click="say()" :class="{box:isUseBox}"> //这里是点击绑定到app对象的say方法上，:class="{box:isUseBox}"表示是否为该元素添加box类，该值取决于isUseBox是否为true
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>//cdn方式引入最新版本的vue
<!-- <script src="./vue.js"></script> -->
<script>
// const app = new vue({//vue2的用法
// el:"#app",
// data:{message:'this is a test!'}
// });
const app = Vue.createApp({//vue3的用法，创建一个vue的应用对象
data:function(){//设置app对象的data
return {
title:'vue demo',
message:'this is a test!',
articles:['文章1','文章2','文章3'],
'500px',
isUseBox:true
}
},
methods:{//设置app对象的方法
say:function(){
console.log('hahahahha');
}
}
});
app.mount("#app");//将app对象绑定到id为app的html元素上面
app.title = 'title';//可以直接用app.title改变上面在data中设置的属性
</script>
</body>
</html>