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.mzph.cn/web/20173.shtml

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

相关文章

【PyCharm】无法创建虚拟环境,提示:has no attribute CPython3macOsBrew

报错信息&#xff1a; AttributeError: module virtualenv.create.via_global_ref.builtin.cpython.mac_os has no attribute CPython3macOsBrew报错原因&#xff1a; 可能含有多个virtualenv&#xff0c;发生冲突了。 解决方法&#xff1a; 终端执行以下命令&#xff1a; p…

LeetCode 图-岛屿问题

图 图的基本知识基本概念图的类型相关术语 图的存储 LeetCode 相关题目岛屿问题岛屿的最大面积岛屿的周长 图的基本知识 基本概念 图的类型 无向图有向图加权图 相关术语 顶点边路径路径长度环负权环连通性顶点的度入度出度 图的存储 邻接矩阵存储&#xff1a;是用一个二…

豆包大模型API接入

1.安装JDK pip install volcengine 2.API接入 from volcengine.maas.v2 import MaasService maas MaasService(maas-api.ml-platform-cn-beijing.volces.com, cn-beijing) maas.set_ak(###access_key###&#xff09; maas.set_sk(###secret_key###) req { "strea…

MongoDB~基本知识记录

为何要学Mongodb 工作以来&#xff0c;使用最多、了解最多的是MySQL。但技术的发展一定是依据痛点来的&#xff0c;就比如我遇到的痛点&#xff0c;一个业务、一个平台能力、存储的一个对象&#xff0c;随着产品和运营的需求&#xff0c;不断的进行变更&#xff0c;每一次的变…

真机调试 Error:系统错误,xxx exceed max limit 2MB

我们在使用微信开发者工具开发小程序、小游戏等应用时&#xff0c;往往会点击“真机调试”&#xff0c;微信扫描查看真实情况。 但是会出现下面的报错提示&#xff0c;是因为主包体积超过了2MB。 小程序有体积和资源加载限制&#xff0c;在微信小程序中&#xff0c;每个包不能…

obj 编程语言:深入剖析其独特之处与未来展望

obj 编程语言&#xff1a;深入剖析其独特之处与未来展望 obj编程语言&#xff0c;作为计算机编程领域的一颗璀璨明珠&#xff0c;以其独特的设计理念和强大的功能吸引着众多开发者的目光。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;对obj编程语言进行深度剖…

vue3简单快速实现主题切换功能

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《vue3实战》 目录 内容概要 实现步骤 1.定义不同主题的css样式变量 2.入口main.ts中引入这个样式文件 3.主题样式css变量引用 4.设置默认主题样式 5.实现点击按钮主题切换 总结 最近发现了一个巨牛的人工智…

【Linux-buildroot,】

Linux-buildroot, ■ buildroot■ 1、简介■ 2、下载■ 2、编译■ 问题一&#xff1a;buildroot 编译的时候会先从网上下载所需的软件源码&#xff0c;下载cmake-3.8.2.tar.gz或下载很慢的情况 ■ buildroot-构建根文件系统■ 1、配置 buildroot■ 2、■ 3、 ■ buildroot-构建…

TK防关联引流系统:全球TikTok多账号运营的神器

在TikTok的生态中&#xff0c;高效运营多个账号已成为品牌全球推广的必经之路。为此&#xff0c;TK防关联引流系统应运而生&#xff0c;它是一款专为TikTok设计的效率神器&#xff0c;助您迅速搭建并管理全球多账号矩阵。该系统由先进的“防关联智能终端”硬件和智能的“TK防关…

AI生成微信职业头像

加油&#xff0c;新时代打工人&#xff01; 真别说&#xff0c;还挺好看的 https://chatglm.cn/main/alltoolsdetail

GPT-4o:免费且更快的模型

OpenAI GPT-4o 公告 OpenAI 推出了增强版 GPT-4 模型——OpenAI GPT-4o&#xff0c;用于支持 ChatGPT。首席技术官 Mira Murati 表示&#xff0c;更新后的模型速度更快&#xff0c;并在文本、视觉和音频处理方面有了显著提升。GPT-4o 将免费向所有用户开放&#xff0c;付费用户…

C++中类的访问权限及友元函数

目录 摘要 访问权限&#xff08;Access Specifiers&#xff09; 1. private 2. protected 3. public 友元函数&#xff08;Friend Functions&#xff09; 关键点 总结 摘要 C中的访问权限&#xff08;Access Specifiers -- private、protected、public&#xff09;和友…

shell脚本不用nohup如何在后台执行?

supervisord进程管理(go版本) 主要是托管自已的脚本 进程管理工具。 可以监听、启动、停止、重启一个或多个进程 用supervisord管理的进程,当一个进程意外被杀死,supervisord监听到进程死后,会自动将它重启,很方便的做到进程的自动恢复的功能,不在需要自己写脚本来控制 启动文…

乐高小人分类项目

数据来源 LEGO Minifigures | Kaggle 建立文件目录 BASE_DIR lego/star-wars-images/ names [YODA, LUKE SKYWALKER, R2-D2, MACE WINDU, GENERAL GRIEVOUS ] tf.random.set_seed(1)# Read information about dataset if not os.path.isdir(BASE_DIR train/):for name in …

plc scl编程语言:深度解析与应用探索

plc scl编程语言&#xff1a;深度解析与应用探索 在工业自动化领域&#xff0c;PLC&#xff08;可编程逻辑控制器&#xff09;扮演着至关重要的角色。而SCL&#xff08;结构化控制语言&#xff09;作为PLC的一种编程语言&#xff0c;因其强大的功能和灵活性备受青睐。本文将从…

利用 Docker 简化Redis部署:快速搭建Redis服务

利用 Docker 简化Redis部署&#xff1a;快速搭建Redis服务 目录 利用 Docker 简化Redis部署&#xff1a;快速搭建Redis服务为什么选择 Docker准备工作拉取Redis镜像快速运行Redis容器验证Redis服务总结 在现代软件开发中&#xff0c;Redis作为一种高性能的键值数据库&#xff0…

52 https

HTTPS是什么 https也是一个应用层协议&#xff0c;是在http协议的基础上引入了一个加密层 http协议内容都是按照文本的方式明文传输的&#xff0c;这就导致在传输过程中出现一些被篡改的情况 http和https是可以同时存在的&#xff0c;数据时从应用层自上往下发的&#xff0c…

简述浏览器和 Node.js 中的事件循环 ?

浏览器和Node.js中的事件循环都是用于处理异步任务和回调函数的机制&#xff0c;但它们在某些实现细节和用途上有所不同。下面分别对它们进行简述&#xff1a; 浏览器中的事件循环 目的&#xff1a; 浏览器事件循环是浏览器用于处理用户输入、网络请求、渲染和其他异步事件的机…

OVP、TVS、ESD二极管、稳压二极管的区别

本文介绍OVP、TVS、ESD二极管、稳压二极管简介及TVS与ESD的区别。 文章目录 一、简介1、过压保护&#xff08;OVP, Over-Voltage Protection&#xff09;3、稳压二极管&#xff08;Zener Diode 或齐纳二极管&#xff09;小结&#xff1a; 二、TVS&ESD的区别1、设计目标2、…

C++的PDF库

PDF&#xff08;Portable Document Format&#xff0c;可移植文档格式&#xff09;是一种由 Adobe Systems 开发并推出的文件格式。PDF 主要用于在不同平台和设备之间精确呈现文档&#xff0c;无论是在 Windows、macOS、Linux 还是其他操作系统上打开&#xff0c;文档的外观都保…