当前位置：首页 > VUE

vue实现html页面实例

2026-02-22 07:37:55VUE

Vue 实现 HTML 页面实例

Vue.js 是一个渐进式 JavaScript 框架，常用于构建用户界面。以下是一个简单的 Vue 实现 HTML 页面的实例，涵盖基础结构、数据绑定和交互功能。

基础 HTML 结构

创建一个 index.html 文件，引入 Vue.js 并初始化一个 Vue 实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue HTML 页面实例</title>
    <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>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            methods: {
                changeMessage() {
                    this.message = '文本已更新！';
                }
            }
        });
    </script>
</body>
</html>

数据绑定与指令

Vue 通过双大括号 {{ }} 实现文本插值，通过 v-bind 绑定属性，v-on 绑定事件：

vue实现html页面实例

<div id="app">
    <p>输入内容：<input v-model="inputText" /></p>
    <p>显示输入：{{ inputText }}</p>
    <a v-bind:href="url">访问链接</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            inputText: '',
            url: 'https://vuejs.org'
        }
    });
</script>

条件渲染与列表渲染

使用 v-if 和 v-for 实现条件渲染和列表渲染：

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

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

<script>
    new Vue({
        el: '#app',
        data: {
            showText: true,
            items: [
                { id: 1, name: '项目1' },
                { id: 2, name: '项目2' }
            ]
        },
        methods: {
            toggleText() {
                this.showText = !this.showText;
            }
        }
    });
</script>

组件化开发

Vue 支持组件化开发，以下是一个自定义组件的示例：

vue实现html页面实例

<div id="app">
    <custom-component :title="componentTitle"></custom-component>
</div>

<script>
    Vue.component('custom-component', {
        props: ['title'],
        template: '<div><h2>{{ title }}</h2></div>'
    });

    new Vue({
        el: '#app',
        data: {
            componentTitle: '自定义组件标题'
        }
    });
</script>

生命周期钩子

Vue 提供生命周期钩子，用于在特定阶段执行代码：

<div id="app">
    <p>{{ lifecycleMessage }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            lifecycleMessage: '生命周期示例'
        },
        created() {
            console.log('实例已创建');
        },
        mounted() {
            console.log('DOM 已挂载');
        }
    });
</script>