【Vue I】从楼梯上摔下来

anzai249 床主

2023-07-04 16:50:37 2023-07-04 16:50:37 创建 2025-05-03 12:29:55 2025-05-03 12:29:55 更新

363 字 1 分钟 63

目的何在？

之前零基础用Vue写了外专课媒体商城管理系统的前端界面，觉得挺好用，本来以为掌握得很不错，但是我发现我连基本的生命周期都不知道是啥。

我比较适合先做案例后学基础知识，我觉得这样不至于学到一半就觉得没意思放弃掉。

所以就来了，从楼梯上摔下来式学习，第一课！

Vue简介

Vue是一款构建用户界面的渐进式JavaScript框架，由尤雨溪（我怎么一直想读成鱿鱼须）开发。

特点

组件化
声明式
虚拟DOM和Diff算法

Hello World

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue3的js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Hello World</title>
</head>

<body>
    <!-- 来个id为root的div -->
    <div id="root">
        <h1>Hello, World!</h1>
        <!-- 接住a，显示出来 -->
        <h1>{{a}}</h1>
    </div>

    <script>
        // 创建实例
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    a: 0 //扔回a
                }
            }
        }).mount('#root') // 挂到id为root的元素上
    </script>
</body>

</html>