html页面整合vue2或vue3

陈小唬

于 2024-09-13 17:28:17 发布

阅读量858

点赞数 11

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/m0_56353506/article/details/142216175

版权

Vue 2 使用指南

1. 引入 Vue 2

1.1 下载 Vue 2

下载地址: Vue 2 下载
文件名: vue.min.js
保存位置: 项目目录/js/vue.min.js

1.2 引入 Vue 2 文件

在 HTML 文件的 <head> 部分引入 Vue 2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 2 示例</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <!-- Vue 应用容器 -->
</body>
</html>

2. 创建 Vue 2 应用

2.1 创建 Vue 应用的容器

在 <body> 中添加一个 <div>，作为 Vue 应用的根元素：

<body>
    <div id="app">
        <!-- Vue 应用内容 -->
    </div>
</body>

2.2 初始化 Vue 实例

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

3. Vue 2 实例选项

3.1 基本选项

el: 绑定的 DOM 元素。
data: 定义 Vue 实例的数据。
methods: 定义 Vue 实例的方法。
created: 生命周期钩子函数，在 Vue 实例创建后执行。

3.2 示例

<script>
    new Vue({
        el: '#app',
        data: {
            title: '欢迎使用 Vue.js!',
            message: 'Hello, Vue!'
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('');
            }
        },
        created() {
            console.log('Vue 实例已创建!');
        }
    });
</script>

4. 数据绑定与事件处理

4.1 数据绑定

使用双大括号 {{ }} 进行数据绑定：

<p>{{ message }}</p>

4.2 事件处理

使用 @（v-on 的缩写）绑定事件处理方法：

<button @click="reverseMessage">反转消息</button>

5. 完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 2 示例</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <input v-model="message" placeholder="编辑我">
        <button @click="reverseMessage">反转消息</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: '欢迎使用 Vue.js!',
                message: 'Hello, Vue!'
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            },
            created() {
                console.log('Vue 实例已创建!');
            }
        });
    </script>
</body>
</html>

Vue 3 使用指南

1. 引入 Vue 3

1.1 下载 Vue 3

下载地址: Vue 3 下载
文件名: vue.global.prod.js
保存位置: 项目目录/js/vue.global.prod.js

1.2 引入 Vue 3 文件

在 HTML 文件的 <head> 部分引入 Vue 3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 3 示例</title>
    <script src="js/vue.global.prod.js"></script>
</head>
<body>
    <!-- Vue 应用容器 -->
</body>
</html>

2. 创建 Vue 3 应用