【Vue】2

server/2024/9/22 9:01:47/

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.ppmy.cn/server/120206.html

相关文章

MVC、MVP和MVVM三种设计模式之间的区别是什么

区别&#xff1a; mvc表示“模型-视图-控制器”&#xff0c;mvp表示“模型-视图-演示者”&#xff0c;mvvm表示“模型-视图-视图模型”&#xff1b; mvp、mvvm都是由mvc衍生出的。mvc中&#xff0c;view会直接从model中读取数据&#xff1b;mvp中&#xff0c;view并不直接使用m…

MQ(RabbitMQ)笔记

初识MQ 同步调用优缺点 异步调用优缺点 总结&#xff1a; 时效性要求高&#xff0c;需要立刻得到结果进行处理--->同步调用 对调用结果不关心&#xff0c;对性能要求高&#xff0c;响应时间短--->异步调用

毕业设计选题:基于ssm+vue+uniapp的捷邻小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

Matlab 的.m 文件批量转成py文件

在工作中碰到了一个问题&#xff0c;需要将原来用matlab gui做出来的程序改为python程序&#xff0c;因为涉及到很多文件&#xff0c;所以在网上搜了搜有没有直接能转化的库。参考了【Matlab】一键Matlab代码转python代码详细教程_matlab2python-CSDN博客 这位博主提到的matla…

解决uniapp开发的app,手机预览,上下滑动页面,页面出现拉伸,抖动的效果问题,

在pages.json文件里“globalStyle”下面的"app-plus"里加入"bounce": "none"即可 "app-plus": { "bounce": "none", //关闭窗口回弹效果 }

Facebook隐私设置指南:如何更好地保护个人信息

在数字化时代&#xff0c;隐私保护成为了每个互联网用户面临的重要课题。Facebook&#xff0c;作为全球最大的社交网络平台之一&#xff0c;拥有庞大的用户基础和丰富的个人数据。因此&#xff0c;了解和管理Facebook的隐私设置对保护个人信息至关重要。本文将为您提供一份详细…

刷题训练之字符串

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握字符串算法。 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题…

ubuntu18.04升级到20.04

要将 Ubuntu 18.04 升级到 Ubuntu 20.04&#xff0c;你可以按照以下步骤进行操作。升级操作会涉及到系统的核心部分&#xff0c;建议在升级之前备份重要数据。 1. 备份数据 在进行系统升级之前&#xff0c;请确保备份重要的数据。可以使用 rsync、tar、或者系统备份工具来创建…