当前位置: 首页> 文旅> 酒店 > Vue2 快速入门

Vue2 快速入门

时间:2025/7/9 10:52:59来源:https://blog.csdn.net/m0_62854966/article/details/140895428 浏览次数:0次

文章目录

  • 一、简介
  • 二、引入方式
  • 三、Vue 实例
  • 四、插值表达式
  • 五、定义方法
  • 六、计算属性
  • 七、监听器
  • 八、指令
  • 九、事件修饰符

一、简介

官方网址: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 中,修饰符用于对指令的行为进行更精细的控制。


关键字:Vue2 快速入门

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: