VUE模板解析的原理

Published on
VUE
38

vue的原理

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

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

<body>
    <div id="byId">
        {{ 10+20 }}
    </div>
    <div class="byClass">
        {{ message}}
    </div>
    <div>
        {{ 10+20 }}
    </div>
    <script>
        const { createApp, ref } = Vue
        // 写法1
        createApp().mount("#byId")

        // 写法2
        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    message
                }
            }
        }).mount(".byClass")
    </script>

</body>

</html>

输出

30
Hello vue!
{{ 10+20 }}

0