- 博客主页：音符犹如代码
- 系列专栏：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 组件的主要生命周期阶段和对应的钩子函数：
beforeCreate：在实例初始化之前被调用，此时组件的选项对象还未创建，数据观测和事件配置尚未开始。created：实例已经创建完成，此时组件的选项对象已创建，数据观测和事件配置也已完成，但尚未开始渲染 DOM ，可以进行一些数据请求和初始化操作。beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未挂载到页面上。mounted：组件被挂载到页面上，此时可以获取到 DOM 元素，进行一些基于 DOM 的操作，例如初始化第三方插件。beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。beforeDestroy：在组件销毁之前调用，可以进行一些清理操作，例如取消定时器、解绑事件等。destroyed：组件销毁后调用，此时组件的所有资源都已被释放。
官方提供的生命周期图：
8个生命周期方法我们主要给大家展示一下mounted是常用的，也被叫做钩子方法，他通过发送请求数据到服务器，自动挂载。
