vue转html+js代码

作者：倾尽尘光暖流年发布日期:2025-07-16 浏览:9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue to HTML + JS</title>
</head>
<body>
    <div id="app">
        <!-- 这里是原本 Vue 模板的内容 -->
        <h1>{{ message }}</h1>
        <button onclick="changeMessage()">Change Message</button>
    </div>

    <script>
        // 将 Vue 的 data 和 methods 转换为普通的 JavaScript 代码
        let app = document.getElementById('app');
        let messageElement = app.querySelector('h1');

        // 初始化数据
        let message = 'Hello, Vue!';

        // 更新 DOM
        function updateDOM() {
            messageElement.textContent = message;
        }

        // 模拟 Vue 的方法
        function changeMessage() {
            message = 'Hello, HTML + JS!';
            updateDOM();
        }

        // 初始化时更新一次 DOM
        updateDOM();
    </script>
</body>
</html>

解释说明

HTML 结构:
- div#app 是原本 Vue 应用的根元素。
- h1 标签用于显示消息，原本在 Vue 中使用双大括号插值语法 {{ message }} 来绑定数据。
- button 元素绑定了一个点击事件，调用 changeMessage 函数。
JavaScript 代码:
- let app = document.getElementById('app'); 获取到根元素。
- let messageElement = app.querySelector('h1'); 获取到 h1 元素，用于后续更新文本内容。
- let message = 'Hello, Vue!'; 定义了一个变量 message，模拟 Vue 的 data 属性。
- function updateDOM() 用于更新 DOM 中的消息内容。
- function changeMessage() 模拟 Vue 的方法，改变 message 的值并调用 updateDOM 更新视图。
- 最后调用 updateDOM() 初始化时更新一次 DOM。

这样就将原本 Vue 的模板和逻辑转换为了纯 HTML 和 JavaScript。

上一篇：vue ssr服务端渲染框架

下一篇：vue 输入框只能输入数字