一個包含 vue 的 html - daniel-qa/Vue GitHub Wiki

一個包含 vue 的 html

  • index.html

會寫在 log

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Demo</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp, ref } = Vue;

        // 定义你的组件
        const HelloWorld = {
            template: `
                <div class="hello">
                    <h1>欢迎来到 Vue 3!</h1>
                    <button @click="sayHello">点击我</button>
                </div>
            `,
            setup() {
                const sayHello = () => {
                    console.log('Hello, 世界!');
                };
                return { sayHello };
            }
        };

        // 创建 Vue 应用并挂载
        createApp(HelloWorld).mount('#app');
    </script>

    <style>
        .hello {
            text-align: center;
            margin-top: 50px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</body>
</html>
  • 會顯示在頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Demo</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp, ref } = Vue;

        // 定义你的组件
        const HelloWorld = {
            template: `
                <div class="hello">
                    <h1>欢迎来到 Vue 3!</h1>
                    <button @click="sayHello">点击我</button>
                    <div v-if="logMessage" class="log">{{ logMessage }}</div>
                </div>
            `,
            setup() {
                const logMessage = ref('');

                const sayHello = () => {
                    logMessage.value = 'Hello, 世界!';
                    console.log(logMessage.value);
                };

                return { sayHello, logMessage };
            }
        };

        // 创建 Vue 应用并挂载
        createApp(HelloWorld).mount('#app');
    </script>

    <style>
        .hello {
            text-align: center;
            margin-top: 50px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .log {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
        }
    </style>
</body>
</html>
  • 說明

return { sayHello, logMessage }; 这行代码将 sayHello 方法和 logMessage 变量暴露给组件的模板。这意味着在组件的模板中，你可以使用 {{ logMessage }} 来显示日志消息，或者使用 @click="sayHello" 来触发 sayHello 方法。

模板访问：

当你在组件的模板中使用 {{ logMessage }} 时，Vue 会自动查找 setup 函数返回的属性，从而能够访问和显示日志信息。 通过 @click="sayHello" 触发按钮点击事件时，会调用 setup 函数中定义的 sayHello 方法。

⚠️ **GitHub.com Fallback** ⚠️