后端开发工程师vue2初识的学习

• 博客主页：音符犹如代码
• 系列专栏：JavaWeb
• 关注博主，后期持续更新系列文章
• 如果有错误感谢请大家批评指出，及时修改
• 感谢大家点赞👍收藏⭐评论✍ 

什么是Vue？

Vue （通常指 Vue.js）是一个用于构建用户界面的渐进式 JavaScript 框架

Vue 主要使用了 MVVM（Model-View-ViewModel）模型

官网:Vue.js

输入框里的数据与后面展示的数据都是基于message数据模型，vue具有双向数据绑定的特性，视图层的变化会影响到message，这样就会影响到后边视图层的展示。因此视图层的变化影响数据模型，数据模型就会影响视图层的展示。

Vue的常用指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式

指令	作用
v-if和v-else	根据条件来决定是否渲染元素
v-for	用于遍历数组或对象来渲染多个元素
v-bind	用于动态绑定属性
v-on	用于监听事件
v-model	用于在表单元素上实现双向数据绑定
v-show	通过控制元素的display属性来显示或隐藏元素

这里给大家展示了v-bind和v-model的作用，v-model因为具有双向数据绑定的作用，所以我们在输入框中输入新的地址后，我们的url也会根据新的地址进行改变，因此我们的两个超链接的地址也会改变为url新的地址。

这里是展示v-on进行一个点击的事件操作。input标签类型选择按钮，并为其绑定上handle函数，在handle函数中进行弹窗的操作。

这里为大家展示了v-if和v-show的代码书写展示，v-if渲染是通过判读是否为true，为true才展示，而v-show是通过css中display属性来控制的。

首先在data中定义一个数组，我们通过v-for遍历拿出数组中的地址，首先定义元素名称为addr，i为索引（可有可无，第一个写法是有索引的第二个写法是没有索引的）然后在addrs出取出我们要要的元素。索引默认是从0开始的，如果想让他从1开始可以写成{{index+1}}

Vue的生命周期

Vue 的生命周期钩子函数允许开发者在组件的不同阶段执行特定的操作

以下是 Vue 组件的主要生命周期阶段和对应的钩子函数：

1. beforeCreate：在实例初始化之前被调用，此时组件的选项对象还未创建，数据观测和事件配置尚未开始。
2. created：实例已经创建完成，此时组件的选项对象已创建，数据观测和事件配置也已完成，但尚未开始渲染 DOM ，可以进行一些数据请求和初始化操作。
3. beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未挂载到页面上。
4. mounted：组件被挂载到页面上，此时可以获取到 DOM 元素，进行一些基于 DOM 的操作，例如初始化第三方插件。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
7. beforeDestroy：在组件销毁之前调用，可以进行一些清理操作，例如取消定时器、解绑事件等。
8. destroyed：组件销毁后调用，此时组件的所有资源都已被释放。

官方提供的生命周期图：

8个生命周期方法我们主要给大家展示一下mounted是常用的，也被叫做钩子方法，他通过发送请求数据到服务器，自动挂载。