【Vue】2
1 Vue 生命周期
Vue生命周期：一个 Vue 实例从 创建 到 销毁 的整个过程
- 创建(create)阶段：组件实例化时，初始化数据、事件、计算属性等
- 挂载(mount)阶段：将模板渲染并挂载到 DOM 上
- 更新(update)阶段：当数据发生变化时，组件会重新渲染
- 销毁(destory)阶段：组件被移除或销毁时，执行清理工作
生命周期钩子（Lifecycle Hooks）是指 Vue 实例在不同阶段执行的一系列回调函数：
1、beforeCreate
- 触发时机：实例初始化后，数据观测和事件尚未设置
- 常见用途：由于实例的数据和事件都未设置，通常很少在此钩子中执行操作
2、created
- 触发时机：实例创建完成，数据观测已设置完毕，但未挂载到 DOM 中
- 常见用途：进行初始数据获取、调用异步请求 等
3、beforeMount
- 触发时机：模板编译完成，虚拟 DOM 已经创建，但尚未挂载到实际 DOM 上
- 常见用途：在这个阶段可以访问模板和挂载点，还未进行实际 DOM 的操作
4、mounted
- 触发时机：组件已挂载到真实的 DOM 上。
- 常见用途：此时可以安全地操作 DOM 元素，进行第三方库的 DOM 操作
5、 beforeUpdate
- 触发时机：当数据更新且虚拟 DOM 重新渲染之前
- 常见用途：在更新之前获取旧的 DOM 状态
6、updated
- 触发时机：数据更新后，DOM 已经重新渲染。
- 常见用途：此时可以操作已经更新的 DOM，但通常不建议直接在此进行数据的更新操作，因为容易进入死循环
7、beforeDestroy
- 触发时机：组件即将被销毁。
- 常见用途：在组件销毁前执行清理工作，如 清除定时器、解绑事件 等
8、destroyed
- 触发时机：组件已经从 DOM 中移除，且所有事件监听器、子组件等均已销毁。
- 常见用途：可以在此进行最后的清理工作
应用1：
created：
在这个接口中，发送get请求可以获得JSON数据，现在进行 页面渲染
在生命周期中的 created
应用2：
获取焦点
在进入页面时(页面需要渲染好 -> Mounted)，焦点聚焦在文本框
2 工程化开发 & 脚手架 Vue CLl
开发 Vue 的两种方式：
1、核心包传统开发模式：基于 html/css/js 文件，直接引入核心包，开发 Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2、工程化开发模式：基于构建工具（例如：webpack）的环境中开发 Vue
Vue CLl 是 Vue 官方提供的一个全局命令工具，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】
项目结构：
main.js
一个 vue 组件包括三部分：
- template：结构（有且只能一个根元素）----->结构
- script：js 逻辑 ----->行为
- style：样式(可支持less，需要装包) ----->样式
<template>
只能有div一个根标签
<div>
</div>
</template>
3 组件
3.1 普通组件的局部注册和使用
1、创建组件 .vue
2、导入组件并注册
测试：
3.2 全局注册
在 main.js 中，导入和注册
4 样式冲突
如果在 3.1 中，三个组件的 class 都是一个名字 box，这样会导致三个组件的样式都变成了最后一个box
因为写在组件中的样式会 全局生效
为了解决组件之间样式冲突的问题，Vue 提供了一种解决方案，称为 Scoped CSS。你可以通过在 <style> 标签上添加 scoped 属性，来使样式只应用于当前组件
5 组件通信
data 是一个函数
data 在不同组件中维护 不同的数据
各组件之间的 data 相互独立
如果组件需要访问其他组件的数据，需要 组件通信
原文地址：https://blog.csdn.net/Yudiannann/article/details/142183521
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！