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：
<!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 应用
2.1 创建 Vue 应用的容器
在 <body> 中添加一个 <div>，作为 Vue 应用的根元素：
<body>
<div id="app">
<!-- Vue 应用内容 -->
</div>
</body>
2.2 初始化 Vue 应用
<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 示例
<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 数据绑定
使用双大括号 {{ }} 进行数据绑定：
<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 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>