当前位置：首页 > VUE

vue实现html页面实例

2026-01-21 16:18:32VUE

Vue 实现 HTML 页面实例

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是一个简单的 Vue 实现 HTML 页面的实例，展示如何将 Vue 集成到 HTML 中并实现动态数据绑定和交互。

基本 Vue 实例

创建一个简单的 HTML 文件，引入 Vue.js 并初始化一个 Vue 实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue HTML 实例</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">点击修改消息</button>
    </div>

    <script>
        // 初始化 Vue 实例
        new Vue({
            el: '#app',
            data: {
                message: '欢迎使用 Vue.js!'
            },
            methods: {
                changeMessage() {
                    this.message = '消息已更新!';
                }
            }
        });
    </script>
</body>
</html>

动态数据绑定

Vue 的核心功能之一是数据绑定。以下示例展示如何通过 v-model 实现双向数据绑定：

vue实现html页面实例

<div id="app">
    <input v-model="inputText" placeholder="输入内容">
    <p>输入的内容是: {{ inputText }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            inputText: ''
        }
    });
</script>

条件渲染

使用 v-if 或 v-show 实现条件渲染：

<div id="app">
    <button @click="toggleShow">切换显示</button>
    <p v-if="isVisible">这段文字会根据条件显示或隐藏</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isVisible: true
        },
        methods: {
            toggleShow() {
                this.isVisible = !this.isVisible;
            }
        }
    });
</script>

列表渲染

使用 v-for 渲染列表数据：

vue实现html页面实例

<div id="app">
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            items: [
                { id: 1, name: '项目 1' },
                { id: 2, name: '项目 2' },
                { id: 3, name: '项目 3' }
            ]
        }
    });
</script>

事件处理

通过 v-on 或 @ 简写绑定事件：

<div id="app">
    <button @click="handleClick">点击事件</button>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
            handleClick() {
                alert('按钮被点击了!');
            }
        }
    });
</script>

计算属性

使用计算属性处理复杂逻辑：

<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>反转后的字符串: {{ reversedMessage }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        computed: {
            reversedMessage() {
                return this.message.split('').reverse().join('');
            }
        }
    });
</script>

组件化开发

Vue 支持组件化开发，以下是一个简单组件示例：

<div id="app">
    <custom-component></custom-component>
</div>

<script>
    Vue.component('custom-component', {
        template: '<div>这是一个自定义组件</div>'
    });

    new Vue({
        el: '#app'
    });
</script>