Vue.js - 生命周期与工程化开发【0基础向 Vue 基础学习】

文章目录

  • Vue 的生命周期
    • Vue 生命周期的四个阶段
    • Vue 生命周期函数(钩子函数
  • 工程化开发 & 脚手架 Vue CLI
    • **开发 Vue 的两种方式:**
    • 脚手架目录文件介绍
    • 项目运行流程
    • 组件化开发 & 根组件
    • App.vue 文件(单文件组件)的三个组成部分
    • 普通组件的注册使用
      • 局部注册的方法
      • 全局注册的方法
      • 组件的使用
      • 组件的使用

Vue 的生命周期

Vue 生命周期的四个阶段

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

生命周期四个阶段:

  • ① 创建
  • ② 挂载
  • ③ 更新
  • ④ 销毁

在这里插入图片描述

Vue 生命周期函数(钩子函数

Vue生命周期过程中,会自动运行一些函数,被称为**【生命周期钩子】→ 让开发者可以在【特定阶段】**运行自己的代码。

思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来)

于是我们可以把 Vue 的生命周期划为四个阶段,分别是:

  1. 创建阶段
  2. 挂载阶段
  3. 更新阶段
  4. 渲染阶段

在这里插入图片描述

于是对应上图的四个阶段,我们有个8个钩子(每个阶段两个钩子)来让开发者运行自己的代码以达到更好的效果

在这里插入图片描述

分别是:

  1. 创建阶段:

    • before Create()

    • created()

  2. 挂载阶段

    • before Mount()

    • mount()

  3. 更新阶段

    • before Update()
    • updated()
  4. 渲染阶段

    • before Destory()
    • Destoryed()

    于是针对刚刚的疑问,我们可以在图中找出发送请求以及操作DOM的时间节点

    在这里插入图片描述

工程化开发 & 脚手架 Vue CLI

开发 Vue 的两种方式:

  1. 核心包传统开发模式:基于 html / css / js 文件,直接引入核心包,开发 Vue。
  2. 工程化开发模式:基于构建工具(例如:webpack ) 的环境中开发 Vue。

基本介绍:

Vue CLI 是 Vue 官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

好处:

  1. 开箱即用,零配置
  2. 内置 babel 等工具
  3. 标准化

使用步骤:

  1. 全局安装 (一次) :yarn global add @vue/cli 或 npm i @vue/cli -g
  2. 查看 Vue 版本:vue --version
  3. 创建项目架子:vue create project-name(项目名-不能用中文)
  4. 启动项目: yarn serve 或 npm run serve(找package.json)

脚手架目录文件介绍

在这里插入图片描述

项目运行流程

在这里插入图片描述

组件化开发 & 根组件

**① 组件化:**一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

- 好处:便于维护,利于复用 → 提升开发效率。
- 组件分类:普通组件、根组件。

**② 根组件:**整个应用最上层的组件,包裹所有普通小组件。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

由图可见,将App拆解成多个组件,有利于我们的开发与维护。

App.vue 文件(单文件组件)的三个组成部分

1. 语法高亮插件:

在这里插入图片描述

2. 三部分组成:

  • template:结构(有且只能一个根元素)

  • script: js逻辑

  • style:样式(可支持less,需要装包)

3. 让组件支持****less

(1)style标签,lang="less"开启less功能

(2)装包: yarn add less less-loader

普通组件的注册使用

组件注册的两种方式:

  1. **局部注册:**只能在注册的组件内使用

    ①创建.vue 文件(三个组成部分)

    ②在使用的组件内导入并注册

  2. **全局注册:**所有组件内都能使用

    使用:

    • 当成html 标签使用<组件名></组件名>

    注意:

    • 组件名规范→ 大驼峰命名法,如:HmHeader

在这里插入图片描述

局部注册的方法

步骤

  1. 创建.vue组件(单文件组件)
  2. 使用的组件内导入,并局部注册components: { 组件名:组件对象}
// 导入需要注册的组件
import组件对象from'.vue文件路径'
importHmHeaderfrom'./components/HmHeader'exportdefault{// 局部注册components:{'组件名': 组件对象,HmHeader//键值相同可以略写}
}

全局注册的方法

  • 创建.vue 文件(三个组成部分)
  • main.js 中进行全局注册

步骤

  1. 创建.vue组件(单文件组件)
  2. main.js内导入,并全局注册Vue.component(组件名, 组件对象)
// 导入需要全局注册的组件
importHmButtonfrom'./components/HmButton'// 调用Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

组件的使用

<组件名></组件名>

技巧:

// 导入需要全局注册的组件
importHmButtonfrom'./components/HmButton'// 调用Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

组件的使用

<组件名></组件名>

技巧:

一般都用局部注册,如果发现确实是通用组件,再抽离到全局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/337644.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PostgreSQL17新特性之-explain命令新增选项】

EXPLAIN是一个用于显示语句执行计划的命令&#xff0c;可用于显示以下语句类型之一的执行计划&#xff1a; - SELECT - INSERT - UPDATE - DELETE - VALUES - EXECUTE - DECLARE - CREATE TABLE AS - CREATE MATERIALIZED VIEWPostgreSQL17-beta1版本近日发布了&#xff0c;新…

微信小程序-页面导航-导航传参

1.声明式导航传参 navigator组件的url属性用来指定将要跳转到的页面的路径&#xff0c;同时&#xff0c;路径的后面还可以携带参数&#xff1a; &#xff08;1&#xff09;参数与路径之间使用 ? 分割 &#xff08;2&#xff09;参数键与参数值用 相连 &#xff08;3&…

四汇聚荣科技是靠谱的吗?

在当今这个科技飞速发展的时代&#xff0c;新兴科技公司如同雨后春笋般涌现。其中&#xff0c;四汇聚荣科技引起了人们的关注。许多人好奇&#xff0c;这家公司是否靠谱?它能否在激烈的市场竞争中站稳脚跟?接下来&#xff0c;让我们从四个不同的方面来深入探讨这个问题。 一、…

VB.net 进行CAD二次开发(二)

利用参考文献2&#xff0c;添加面板 执行treeControl New UCTreeView()时报一个错误&#xff1a; 用户代码未处理 System.ArgumentException HResult-2147024809 Message控件不支持透明的背景色。 SourceSystem.Windows.Forms StackTrace: 在 System.Windows…

java调用科大讯飞离线语音合成SDK --内附完整项目

科大讯飞语音开放平台基础环境搭建 1.用户注册 注册科大讯飞开放平台账号 2.注册好后先创建一个自己的应用 创建完成后进入应用选择离线语音合成&#xff08;普通版&#xff09;可以看到我们开发需要的SDK,选择windows MSC点击下载。 3.选择你刚刚创建的应用&#xff0c;选择…

react 怎样配置ant design Pro 路由?

Ant Design Pro 是基于 umi 和 dva 的框架&#xff0c;umi 已经预置了路由功能&#xff0c;只需要在 config/router.config.js 中添加路由信息即可。 例如&#xff0c;假设你需要为 HelloWorld 组件创建一个路由&#xff0c;你可以将以下代码添加到 config/router.config.js 中…

物联网应用系统与网关

一. 传感器底板相关设计 1. 传感器设计 立创EDA传感器设计举例。 2. 传感器实物图 3. 传感器测试举例 测试激光测距传感器 二. 网关相关设计 1. LORA&#xff0c;NBIOT等设计 2. LORA&#xff0c;NBIOT等实物图 3. ZigBee测试 ZigBee测试 4. NBIoT测试 NBIoT自制模块的测试…

VS2022+QT5.15.2+MySQL8.4大集合

网上的教程都建议用Qt5&#xff0c;不要用6&#xff0c;不死心的尝试了整整一天失败了&#xff0c;乖乖用回5&#xff0c;qt5需要编译一下生成mysql的动态和静态库 1. mysql8.4安装 下载社区开发版&#xff0c;注意要64位 https://dev.mysql.com/downloads/mysql/ 配置一下数…

单链表实现通讯录

之前我们完成了基于顺序表&#xff08;动态&#xff09;实现通讯录&#xff0c;现在我们链表学完了&#xff0c;可以尝试着使用链表来实现我们的通讯录。 首先我们要明白我们写的通讯录是由一个个节点组成的&#xff0c;每个节点里存储的就是我们的联系人信息。也就是说 我们需…

mysql大表的深度分页慢sql案例(跳页分页)-2

1 背景 有一张大表&#xff0c;内容是费用明细表&#xff0c;数据量约700万级&#xff0c; 普通B树索引KEY idx_fk_fymx_qybh_xfsj (qybh,xfsj)。 1.1 原始深度分页sql select t.* from fk_fymx t where t.qybh XXXXXXX limit 100000,100; 深度分页会导致加载数据行过多1000001…

【开源】在线考试系统 JAVA+Vue.js+SpringBoot 新手入门项目

目录 一、项目介绍 二、项目截图 三、核心代码 【开源】在线考试系统 JAVAVue.jsSpringBoot 新手入门项目 一、项目介绍 经典老框架SSM打造入门项目《在线考试系统》&#xff0c;包括班级模块、教师学生模块、试卷模块、试题模块、考试模块、考试回顾模块&#xff0c;项目编…

PHP对接百度语音识别技术

PHP对接百度语音识别技术 引言 在目前的各种应用场景中&#xff0c;语音识别技术已经越来越常用&#xff0c;并且其应用场景正在不断扩大。 百度提供的语音识别服务允许用户通过简单的接口调用&#xff0c;将语音内容转换为文本。 本文将通过PHP语言集成百度的语音识别服务…

Ethercat设备 转 成profinet IO协议项目案例

1 案例说明 设置网关采集EtherCAT设备数据把采集的数据转成profinet IO协议转发给其他系统。 2 准备工作 3. 仰科网关。支持采集EtherCAT设备数据&#xff0c;profinet IO协议转发。 4. 电脑。IP设置成192.168.1.198&#xff0c;和网关在同一个网段。 5. 网线、12V电源。 3 …

postgressql——事务提交会通过delayChkpt阻塞checkpoint(9)

事务提交会通过delayChkpt阻塞checkpoint Postgresql事务在事务提交时&#xff08;执行commit的最后阶段&#xff09;会通过加锁阻塞checkpoint的执行&#xff0c;尽管时间非常短&#xff0c;分析为什么需要这样做&#xff1a; 首先看提交堆栈 #1 0x0000000000539175 in Co…

建设人工智能平台,主流GPU卡选型分析

国内外主流GPU卡性能分析&#xff01;2024&#xff01; 大模型兴起助推算力需求激增 2024年&#xff0c;深度学习与人工智能技术飞速跃进&#xff0c;Transformer、GPT-3等大模型在自然语言处理、图像识别、语音合成等领域大放异彩&#xff0c;开启AI新纪元。其庞大的参数与数…

Flink实现实时异常登陆监控(两秒内多次登陆失败进行异常行为标记)

Flink实现异常登陆监控&#xff08;两秒内多次登陆失败进行异常行为标记&#xff09; 在大数据处理领域&#xff0c;Apache Flink 是一个流行的开源流处理框架&#xff0c;能够高效处理实时数据流。在这篇博客中&#xff0c;我们将展示如何使用 Apache Flink 从 MySQL 中读取数…

springboot + Vue前后端项目(第十四记)

项目实战第十三记 写在前面1. 建立字典表2. 后端DictController3. Menu.vue4. 建立sys_role_menu中间表5.分配菜单接口6. 前端Role.vue改动总结写在最后 写在前面 本篇主要讲解动态分配菜单第二章节 菜单页面优化 引入图标 角色界面优化 角色自主分配菜单&#xff0c;并保存至…

诸神混战:2023年中国头部物流集成商财报公开:几家欢喜几家愁~

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》人俱乐部 在全球供应链经历前所未有的考验之时&#xff0c;物流装备行业的领军企业们在2023年展现了他们的韧性和创新能力。 从智能仓储到自动化搬…

钣金件设计规范

(一&#xff09; 钣金 1、钣金的概念 钣金&#xff08;sheet metal&#xff09;是针对金属薄板&#xff08;厚度通常在6mm以下&#xff09;的 一种综合冷加工工艺&#xff0c;包括冲裁、折弯、拉深、成形、锻压、铆合等&#xff0c; 其显著的特征是同一零件厚度一致。 2、钣…

善听提醒遵循易经原则。世界大同只此一路。

如果说前路是一个大深坑&#xff0c;那必然是你之前做的事情做的不太好&#xff0c;当坏的时候&#xff0c;坏的结果来的时候&#xff0c;是因为你之前的行为&#xff0c;你也就不会再纠结了&#xff0c;会如何走出这个困境&#xff0c;是好的来了&#xff0c;不骄不躁&#xf…