【Vue】2

news/2024/9/20 3:18:49 标签: vue.js, 前端, javascript

1 Vue 生命周期

Vue生命周期:一个 Vue 实例从 创建 到 销毁 的整个过程

  1. 创建(create)阶段:组件实例化时,初始化数据、事件、计算属性等
  2. 挂载(mount)阶段:将模板渲染并挂载到 DOM 上
  3. 更新(update)阶段:当数据发生变化时,组件会重新渲染
  4. 销毁(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

hmajax.itheima.net/api/news

应用2

获取焦点

在进入页面时(页面需要渲染好 -> Mounted),焦点聚焦在文本框

2 工程化开发 & 脚手架 Vue CLl

开发 Vue 的两种方式:

1、核心包传统开发模式:基于 html/css/js 文件,直接引入核心包,开发 Vue

javascript"><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 相互独立

如果组件需要访问其他组件的数据,需要 组件通信


http://www.niftyadmin.cn/n/5666507.html

相关文章

【LabVIEW】事件结构的用法

本篇文章记录我学习LabVIEW的事件结构用法&#xff0c;希望我的分享对你有所帮助&#xff01; 目录 一、案例说明 1、 LabVIEW实现“YAXBXC的计算” 2、添加事件结构 一、案例说明 在LabVIEW实现“YAXBXC的计算”的基础上&#xff0c;加上事件结构&#xff0c;实现单击一次按…

Android 15 正式发布至 AOSP

Google官方宣布&#xff0c;将于近期发布了 Android 15&#xff0c;而在早些时候&#xff0c;Google已经将其源代码推送至 Android 开源项目 (AOSP)。未来几周内&#xff0c;Android 15 将在受支持的 Pixel 设备上正式推出&#xff0c;并将于今年晚些时候在三星、Honor、iQOO、…

JavaWeb JavaScript 11.XML —— 配置文件

生活想埋没我&#xff0c;没想到我是颗种子 —— 24.9.19 一、XML 1.什么是XML XML是EXtensible Markup Languge的缩写&#xff0c;翻译过来就是可扩展标记语言。所以很明显&#xff0c;XML和HTML一样都是标记语言&#xff0c;也就是说它们的基本语法都是标签 可扩展 三个字…

linux-用户与权限管理-sudo 权限管理

Linux 用户与权限管理概述 在Linux操作系统中&#xff0c;用户和权限管理是确保系统安全与稳定运行的关键组成部分。每个Linux系统中&#xff0c;用户被分配不同的角色和权限&#xff0c;基于这些权限执行不同的任务。权限管理的核心是文件和目录的访问控制&#xff0c;以及如…

轻兔推荐 —— 质感文件

via&#xff1a;轻兔推荐 - https://app.lighttools.net/ 简介 质感文件是一款开源的安卓文件管理App&#xff0c;遵循Material Design规范&#xff0c;界面设计很有质感&#xff0c;文件操作方便 - 除了能管理本地文件&#xff0c;也可以添加远程存储&#xff0c;配合NAS使…

ubantu数据库安装以及使用——mysql+redis

mysql 安装mysql ubuntu 安装 MySql_ubuntu安装mysql-CSDN博客 Ubuntu 安装 MySQL 密码设置_ubuntu安装mysql后设置密码-CSDN博客 service mysql restart1 C/C连接数据库 C/C 连接访问 MySQL数据库_c mysql-CSDN博客 ubuntu安装mysql的c开发环境_ubuntu 搭建mysql c开发…

英语学习交流平台|基于java的英语学习交流平台系统小程序(源码+数据库+文档)

英语学习交流平台系统小程序 目录 基于java的英语学习交流平台系统小程序 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&…

kafka 一步步探究消费者组与分区分配策略

本期主要聊聊kafka消费者组与分区 消费者组 & 消费者 每个消费者都需要归属每个消费者组&#xff0c;每个分区只能被消费者组中一个消费者消费 上面这段话还不够直观&#xff0c;我们举个例子来说明。 订单系统 订单消息通过 order_topic 发送,该topic 有 5个分区 结算系…