Vue3的学习---1

1.Vue3的学习---12024-07-18

2.Vue3的学习---22024-07-19 3.Vue3的学习---32024-07-29 4.Vue3的学习---42024-08-09 5.Vue3的学习---52024-08-15 6.Vue3的学习---62024-08-16 7.Vue3的学习---72024-08-23 8.Vue3的学习---82024-08-24 9.Vue3的学习---92024-08-27 10.Vue3的学习---102024-08-27 11.Vue3的学习---112024-08-29 12.Vue3的学习---122024-09-02

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>