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,一经查实,立即删除!

相关文章

LeetCode 图-岛屿问题

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

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

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

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;付费用户…

乐高小人分类项目

数据来源 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 …

52 https

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

数仓建模—ChatETL

数仓建模—ChatETL 前面我们介绍过ChatBI ,就是让用户通过自然语言对话的方式可以获取到自己想要的数据,然后通过合适的报表展示出来,其实我们可以将其理解为应用层面的技术创新,但是这个实现的前提就是我们底层已经有加工好的大量的数据模型数据表,并且有完善的元数据建…

【Python】解决Python报错:AttributeError: ‘str‘ object has no attribute ‘xxx‘

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

每日刷题——相遇、宝石(模拟+数学)、相助(模拟+数组)、相依(dp的优化)

相遇 原题链接登录—专业IT笔试面试备考平台_牛客网 题目描述 运行代码 #include<iostream> using namespace std; int main(){ int a,b; cin>>a>>b; if(ab) { cout<<"p"; } else if(a - b 1 || (a 1 && b 3)){cout <<…

系统架构设计师【第10章】: 软件架构的演化和维护 (核心总结)

文章目录 10.1 软件架构演化和定义的关系10.1.1 演化的重要性10.1.2 演化和定义的关系 10.2 面向对象软件架构演化过程10.2.1 对象演化10.2.2 消息演化10.2.3 复合片段演化10.2.4 约束演化 10.3 软件架构演化方式的分类10.3.1 软件架构演化时期10.3.2 软件架构静态演…

eNSP学习——连接RIP与OSPF网络

目录 相关主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建RIP和OSPF网络 3、配置双向路由引入 4、手工配置引入时的开销值 相关主要命令 [R1-ospf-1]import-route rip 1 //引入RIP路由 [R1-rip-1]import-route ospf 1 …

【计算机毕业设计】353微信小程序零食批发交易管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

微信小程序毕业设计-校园服务平台系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

RabbitMQ二、RabbitMQ的六种模式

一、RabbitMQ的六种模式 RabbitMQ共有六种工作模式&#xff1a; 简单模式&#xff08;Simple&#xff09;工作队列模式&#xff08;Work Queue&#xff09;发布订阅模式&#xff08;Publish/Subscribe&#xff09;路由模式&#xff08;Routing&#xff09;通配符模式&#xff…

代码随想录算法训练营第四十六天 | 完全背包理论基础、518. 零钱兑换 II、377. 组合总和 Ⅳ

完全背包理论基础 视频讲解&#xff1a; https://www.bilibili.com/video/BV1uK411o7c9 https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5%85%A8%E8%83%8C%E5%8C%85.html 完全和01背包的区别&#xff1a; …

通俗易懂->哈希表详解

目录 一、什么是哈希表&#xff1f; 1.1哈希表长什么样&#xff1f; 1.2为什么会有哈希表&#xff1f; 1.3哈希表的特点 1.3.1 取余法、线性探测 1.3.2 映射 1.3.3负载因子 1.4哈希桶 1.5闲散列与开散列 1.6总结 二、设计hash表 1、哈希表的设计 1&#xff09;插入…

Nginx实战:日志打印自定义请求头

nginx的日志可以打印很多内容&#xff0c;但是有时候自定义的请求头该怎么打印呢&#xff1f;像下面这种场景&#xff1a; 其实很简单&#xff0c;设置日志打印格式log_format的时候&#xff0c;自定义的请求头用 【$http_自定义请求头名】 的格式就可以打印出来 例如你的自定义…