Vue3学习
1.初识Vue
1.1 Hello World程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入Vue库文件 -->
<!-- <script src="https://unpkg.com/vue@latest"></script> -->
<script src="./js/vue3.js"></script>
<script>
// 创建Vue对象
// 前面库文件已经将Vue导进来了，库文件当中已经将Vue定义好了，可直接使用
Vue.createApp({
// 模板，表示当前Vue实例视图层是什么样子
template:'<p>Hello World</p>'
}).mount('#app') // 挂载到指定元素上
</script>
</body>
</html>
常用格式（单向数据绑定）
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script src="./js/vue3.js"></script>
<script>
// 创建Vue对象
Vue.createApp({
// 声明数据
data(){
return {
msg: 'Hello World'
}
}
}).mount('#app') // 挂载到指定元素上
</script>
</body>
改为双向数据绑定
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- v-model属性会绑定msg数据 -->
<input type="text" v-model="msg">
</div>
<script src="./js/vue3.js"></script>
<script>
Vue.createApp({
data(){
return {
msg: 'Hello World'
}
}
}).mount('#app')
</script>
</body>
1.2 一个双向数据绑定的实例
<body>
<div id="app">{{data}}</div>
<script src="./js/vue3.js"></script>
<script>
// 创建Vue实例
Vue.createApp({
// 声明数据
data(){
return {
data: '00:00:00'
}
},
mounted(){ // 在这里，就可以保证DOM全部加载完毕后才执行这里的代码
//定时器
setInterval(()=>{
// 获取当前时间
let d = new Date()
// 格式化时间
this.data = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
})
}
}).mount('#app')
</script>
</body>