html页面整合vue2或vue3

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：

html 复制代码

<!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 应用的根元素：

html 复制代码

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

2.2 初始化 Vue 实例

html 复制代码

<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 示例

html 复制代码

<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 数据绑定

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

html 复制代码

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

4.2 事件处理

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

html 复制代码

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

5. 完整示例

html 复制代码

<!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：

html 复制代码

<!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 应用

2.1 创建 Vue 应用的容器

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

html 复制代码

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

2.2 初始化 Vue 应用

html 复制代码

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                message: 'Hello, Vue 3!'
            };
        }
    }).mount('#app');
</script>

3. Vue 3 实例选项

3.1 基本选项

mount: 挂载的 DOM 元素。
data: 定义 Vue 应用的数据。
methods: 定义 Vue 应用的方法。
mounted: 生命周期钩子函数，在 Vue 应用挂载后执行。

3.2 示例

html 复制代码

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                title: '欢迎使用 Vue 3!',
                message: 'Hello, Vue 3!'
            };
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('');
            }
        },
        mounted() {
            console.log('Vue 实例已挂载!');
        }
    }).mount('#app');
</script>

4. 数据绑定与事件处理

4.1 数据绑定

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

html 复制代码

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

4.2 事件处理

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

html 复制代码

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

5. 完整示例

html 复制代码

<!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>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <input v-model="message" placeholder="编辑我">
        <button @click="reverseMessage">反转消息</button>
    </div>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    title: '欢迎使用 Vue 3!',
                    message: 'Hello, Vue 3!'
                };
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            },
            mounted() {
                console.log('Vue 实例已挂载!');
            }
        }).mount('#app');
    </script>
</body>
</html>