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

什么是Vue？

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

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

官网:Vue.js

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 组件的主要生命周期阶段和对应的钩子函数：

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

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