文章目录
一、简介
官方网址：Vue2 教学网站
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，在前端开发中被广泛应用，许多知名的网站和应用都采用了 Vue 框架来构建其用户界面，为开发者提供了高效、灵活和优雅的开发体验。
核心特点：
数据驱动视图：通过修改数据来自动更新页面的视图，无需手动操作 DOM；组件化开发：将页面拆分成多个独立的、可复用的组件，提高代码的可维护性和可扩展性；轻量级和高效：Vue 的体积相对较小，性能出色，加载速度快；易学易用：对于初学者来说，Vue 的学习曲线相对较为平缓。
Vue 2 在 2023 年 12 月 31 日停止维护了，意味着它不再会有新增功能、更新或问题修复，不过，它依然可以被使用。
由于现在大部分的项目依然在使用 Vue 2，所以本文会先讲解 Vue2 的核心语法，之后我会再出一篇讲解 Vue3 的语法，具体使用哪个版本，要看自己的需求。
二、引入方式
下载 Vue2 文件：https://v2.cn.vuejs.org/js/vue.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入 Vue2 库 -->
<script src="./vue.min.js"></script>
</body>
</html>
三、Vue 实例
在 Vue 2 中，一个 Vue 的实例是应用的核心，以下是一个简单 Vue 2 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入 Vue2 库 -->
<script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue2'
}
},
methods: {
alertMsg() {
alert(this.message)
}
}
})
</script>
</body>
</html>
代码解释：
vm：创建 Vue 的实例；el：指定了 Vue 实例要控制的 DOM 范围；data：用于定义实例的数据；methods：用于定义实例的方法。
四、插值表达式
使用双花括号 {{ }} 进行数据绑定，括号内存放的是 data 选项中定义的数据，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<h1>{{ message }}</h1>
</div>
<!-- 引入 Vue2 库 -->
<script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue2'
}
},
})
</script>
</body>
</html>
运行结果：
五、定义方法
在 Vue 实例的 methods 选项中定义方法，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 方法 -->
<h1>{{ printMsg() }}</h1>
</div>
<!-- 引入 Vue 库 -->
<script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue2'
}
},
methods: {
printMsg() {
return '信息：' + this.message
}
}
})
</script>
</body>
</html>
运行结果：
六、计算属性
在 Vue 2 中，计算属性是一种基于已有的响应式数据进行计算，并返回一个新值的属性，通过在 Vue 实例的 computed 选项中定义。
特性：
1.计算结果会基于依赖的数据自动更新。
2.计算结果会被缓存，只有当依赖的数据发生变化时才重新计算，提高性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 普通方法 -->
<h3>{{ printMsg() }}</h3>
<h3>{{ printMsg() }}</h3>
<h3>{{ printMsg() }}</h3>
<!-- 计算属性 -->
<h3>{{ printMsgContent }}</h3>
<h3>{{ printMsgContent }}</h3>
<h3>{{ printMsgContent }}</h3>
</div>
<!-- 引入 Vue 库 -->
<script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue2'
}
},
methods: {
printMsg() {
console.log('普通方法执行了');
return '信息：' + this.message
}
},
// 计算属性
computed: {
printMsgContent() {
console.log('计算属性方法执行了');
return '信息：' + this.message
}
}
})
</script>
</body>
</html>
运行结果：
七、监听器
在 Vue 2 中，监听器是用于监听数据的变化，并在数据变化时执行特定的操作，通过在 Vue 实例的 watch 选项中定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 监听器 -->
<h3>{{ message }}</h3>
</div>
<!-- 引入 Vue 库 -->
<script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue2'
}
},
// 监听器
watch: {
message(newValue, oldValue) {
console.log(`新值：${newValue} \n旧值：${oldValue}`);
}
}
})
</script>
</body>
</html>
运行结果：
代码解释：
在上述示例中，通过 watch 监听了 message 数据的变化，当 message 的值发生改变时，就会执行对应的函数，并传入新值和旧值作为参数。
八、指令
指令是带有 v- 前缀的特殊属性，用于为元素添加特定的功能或行为，以下是一些常见的 Vue 2 指令：
-
v-if 和 v-else：用于条件性地渲染元素。
-
v-show：通过控制元素的 display 属性来显示或隐藏元素。
-
v-for：用于遍历数组或对象来渲染多个元素。
-
v-bind（:）：用于动态绑定属性值。
-
v-on（@）：用于监听 DOM 事件。
-
v-model：用于在表单元素上实现双向数据绑定。
-
v-text：更新元素的文本内容。
-
v-html：将数据以 HTML 格式插入到元素中。
九、事件修饰符
官方网址：Vue2 事件处理
在 Vue 2 中，修饰符用于对指令的行为进行更精细的控制。
标签：Vue,return,入门,data,实例,Vue2,message,快速 From： https://blog.csdn.net/m0_62854966/article/details/140895428