Vue_3：声明周期钩子(组件化开发)

Vue_03_note

文章目录

  • Vue_03_note
      • 01-生命周期 和 **生命周期的四个阶段**
          • 什么是生命周期？
          • 生命周期的四个阶段
      • 02-Vue 声明周期函数（钩子函数）
          • 什么是钩子函数
          • 八大钩子（四对）
          • 代码示例：八个钩子函数
      • 03-生命周期的两个例子
          • 第一个例子
          • 代码示例
          • 第二个例子
          • 代码示例
      • 小黑记账清单
          • 功能需求：
          • 项目代码
      • 05-工程化开发和脚手架
          • 使用步骤
          • 三大文件的相互作用
      • 06-组件化开发 & 根组件-
          • 组件化
          • App.vue文件(组件)
      • 07-普通组件的注册使用
          • 局部注册
          • 使用
          • 全局注册
          • 使用
      • 08-组件化开发网页的思路
          • 页面开发思路
          • 第一步：拆分组件
          • 第二步：注册局部组件
          • 第三步：组件代码实现
          • 第四步：抽出全局组件

01-生命周期 和 生命周期的四个阶段

什么是生命周期？

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

生命周期的四个阶段
  1. 创建阶段：数据响应式处理…
  2. 挂载阶段：渲染模板
  3. 更新阶段：修改数据，更新视图（可以重复循环）
  4. 销毁阶段：销毁实例

有了声明周期，才知道什么操作代码该在什么地方写。

问题？

  1. 什么时候可以发送初始话请求？ 在创建阶段结束后才可以
  2. 什么时候可以操作dom呢？ 需要在挂载阶段结束后才行

02-Vue 声明周期函数（钩子函数）

什么是钩子函数

Vue生命周期过程中，会自动运行一些函数，被成为（生命周期钩子）–> 让开发者可以在 （特定阶段） 运行自己的代码。

八大钩子（四对）
  1. beforeCreate => created
  2. beforeMount => mounted
  3. beforeUpdate => updated
  4. beforeDestroy => destroyed
  1. 发送请求初始化渲染请求需要在created函数阶段发送请求，不然数据都没创建怎么发送请求呢？
  2. 操作dom需要再mounted函数阶段操作。
代码示例：八个钩子函数
<div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1、创建阶段（准备数据）beforeCreate () {console.log('beforeCretae 响应式数据准备好之前')},created () {console.log('created 响应式数据准备好之后',this.count)// this.数据名 = 请求回来的数据// 在created中，可以开始初始化发送请求了},// 2、挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前',document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后',document.querySelector('h3').innerHTML)// 在mounted阶段可以操作dom了},// 3、更新阶段beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新',document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新了',document.querySelector('span').innerHTML)},// 4、卸载阶段(关闭页面)beforeDestroy () {console.log('beforeDestroy ，卸载前')console.log('清除掉一些Vue以外的资源占用，定时器、延时器...')},destroyed () {console.log('destroyed， 卸载后')},})
</script>

03-生命周期的两个例子

第一个例子

需求：使用created钩子函数向服务器发送请求新闻。

代码示例
<div id="app"><ul><li v-for="(item,index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source}}</span><span>{{item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul>
</div>====================================================
<script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},// created钩子函数async created () {// 1、发送请求，获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')console.log(res)// 将数据更新给 data 中的 listthis.list = res.data.data}})
</script>
第二个例子

需求：使用 mounted 模板渲染完，可以开始操作DOM了。一进页面就让输入框得到焦点。

代码示例
<div class="container" id="app">
<div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div>
</div>
</div>
=====================================================
<script>
const app = new Vue({el: '#app',data: {words: ''},// 核心思路：// 1、等输入框渲染出来// 2、让输入框获取焦点 .focus()方法mounted () {document.querySelector('#inp').focus()}
})
</script>

总结就是：什么时候做什么事，不能乱。

小黑记账清单

功能需求：

  1. 基本渲染

    ​ * (1) 立刻发送请求获取数据 created

    ​ * (2) 拿到数据，存到data的响应式数据中

    ​ * (3) 结合数据，进行渲染 v-for

    ​ * (4) 消费统计 => 计算属性

  2. 添加功能

    ​ * (1) 收集表单数据 v-model

    ​ * (2) 给添加按钮注册点击事件，发送添加请求

    ​ * (3) 需要重新渲染

  3. 删除功能

    ​ * (1) 注册点击事件，传参传 id

    ​ * (2) 根据 id 发送删除请求

    ​ * (3) 需要重新渲染

  4. 饼图渲染

    ​ * (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现

    ​ * (2) 根据数据实时更新饼图 echarts.setOption({ … })

项目代码

容器视图

  <div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /><button @click="add" type="button" class="btn btn-primary">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div>

Vue实例代码

    const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},// 计算属性computed: {totalPrice() {return this.list.reduce((sum, item) => sum + item.price, 0)}},// 1、渲染created() {this.getList()},//自己封装的方法。methods: {// 封装渲染函数async getList() {// 发送渲染请求，获取数据const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '刘不住'}})// 将结果赋值给实例上面的数据。this.list = res.data.data// 异步 更新图标  this.myChart.setOption({// 数据项series: [{data: this.list.map(item => ({ value: item.price, name: item.name }))}]})},// 2、添加async add() {// 请求前的一些判断if (!this.name) {alert('请输入消费名称')return}if (typeof this.price !== 'number') {alert('请输入正确的消费价格')return}// 发送添加请求const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {creator: '刘不住',name: this.name,price: this.price})// 添加完成后，重新渲染一次this.getList()// 重置输入框this.name = ''this.price = ''},// 3、删除del(id) {// 发起删除请求axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)// 调用渲染APIthis.getList()alert('删除成功')}},mounted() {// 将myChart挂载在实例上，就相当于实例中所有所用于都可以访问使用this.myChart = echarts.init(document.querySelector('#main'))// 配置项数据option = {// 标题title: {text: '消费账单列表',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: '消费账单',left: 'left'},// 数据项series: [{name: 'Access From',type: 'pie',radius: '50%',data: [// { value: 1048, name: 'Search Engine' },// { value: 735, name: 'Direct' },// { value: 580, name: 'Email' },// { value: 484, name: 'Union Ads' },// { value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}this.myChart.setOption(option)}})</script>

05-工程化开发和脚手架

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

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

好处：

  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化
使用步骤
  1. 全局安装（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 server (找package.json)

这里使用了yarn 创建项目成功

注意：根据不同的环境会出现不同的问题，需要查阅解决，目前2023年8月18日16:28:30创建项目成功了。（问题解决），后面出现新的问题需要重新根据问题的相关性去解决即可

第3、4可以重复创建和执行，前面的一次就好。可以陪你到天荒地老。

关于main和App以及index文件的作用

  • main.js文件核心作用：导入App.vue，基于App.vue创建结构，渲染index.html
三大文件的相互作用

执行yarn serve 命令后，立马将main.js文件执行了，然后使用根组件App.vue来渲染index.html文件结构

06-组件化开发 & 根组件-

组件的分类：

  1. 普通组件
  2. 根组件：整个应用最上层的组件，包裹所有普通小组件

谁是根组件呢？

  • 答：App.vue
组件化
  1. 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
  • 好处：便于维护，利于复用——>提升开发效率。
App.vue文件(组件)

三个组成部分： 结构、样式、行为。

  1. template：结构（有且仅有一个根元素）
  2. script： js逻辑
  3. style： 样式（可支持less，需要装包）
  • 让组件支持less
    1. styl标签，lang=“less” 开启less功能
    2. 装包：yarn add less less-loader

07-普通组件的注册使用

局部注册

  • 局部注册：只能在注册的组件内使用

    1. 创建.vue文件（三个组成部分）

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

      导入组件：import 组件名 from '.vue文件路径'

使用
  1. 当成 html 标签使用就可以了 <组件名></组件名>

注意：组件名规范 -> 大驼峰命名法，如HmHeader

App.vue代码

<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
// 导入组件
import HmHeader from './components/HmHeaders.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {// 注册components: {// '组件名' ： 组件对象HmHeader,HmMain,HmFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>
全局注册
  • 全局注册：所有组件内都能使用
  1. 创建.vue文件
  2. main.js中进行全局注册

在main.js中操作：

语法：import 猪价你对象 from '组件路径'

Vue.component('组件名'，组件对象)

// 编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton'// 进行全局注册
Vue.component('HmButton',HmButton)
使用
  1. 当成 html 标签使用就可以了 <组件名></组件名>

注意：组件名规范 -> 大驼峰命名法，如HmButton

技巧：一般都使用局部注册，如果发现确实是通用组件，在抽离到全局。

08-组件化开发网页的思路

页面开发思路

  1. 分析页面，按模块拆分组件，搭架子（局部或全局注册）

  2. 根据设计图，编写组件html结构css样式

  3. 拆分封装通用组件（局部或全局注册）

    将来→通过js动态渲染，实现功能

由于项目主要的是实操和思路，这里主要展示一下主要的步骤

第一步：拆分组件
  1. 我将这个网页分成了七个组件
<template><div class="App"><!-- 快捷链接 --><XtxShortCut></XtxShortCut><!-- 顶部导航 --><XtxHeaderNav></XtxHeaderNav><!-- 轮播区域 --><XtxBanner></XtxBanner><!-- 新鲜好物 --><XtxNewGoods></XtxNewGoods><!-- 热门品牌 --><XtxHotBrand></XtxHotBrand><!-- 最新专题 --><XtxTopic></XtxTopic><!-- 版权底部 --><XtxFooter></XtxFooter></div>
</template>
第二步：注册局部组件
<script>
// 局部引入组件
import XtxShortCut from './components/XtxShortCut.vue'
import XtxHeaderNav from './components/XtxHeaderNav.vue'
import XtxBanner from './components/XtxBanner.vue'
import XtxNewGoods from './components/XtxNewGoods.vue'
import XtxHotBrand from './components/XtxHotBrand.vue'
import XtxTopic from './components/XtxTopic.vue'
import XtxFooter from './components/XtxFooter.vue'
// 局部注册组件
export default {
components: {XtxShortCut,XtxHeaderNav,XtxBanner,XtxNewGoods,XtxHotBrand,XtxTopic,XtxFooter,
}
}
</script>
第三步：组件代码实现

就是将每个组件区域的代码和样式编写在各个组件的结构、样式、行为中，这里就不写出来了，太多了哈啊1

第四步：抽出全局组件

这是根据需求来的,使用Base开头（规范）

全局组件里面的代码就和我们局部组件的代码操作是一样的，只不过我们是将局部里面的代码在抽出来封装成全局组件而已（最好是实操看代码）

下面这里是在main.js中对全局组件的导入和注册

// 导入全局组件
import BaseGoodItem from './components/BaseGoodItem'
import BaseTopicItem from './components/BaseTopicItem'
// 注册全局组件
Vue.component('BaseGoodItem',BaseGoodItem)
Vue.component('BaseTopicItem',BaseTopicItem)

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

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

相关文章

Intellij中直接运行ts配置：run configuration for typescript

Intellij中直接运行ts配置：run configuration for typescript

在Intellij中可以借助插件run configuration for typescript直接运行typescript&#xff1a; run configuration for typescript插件本质还是依赖于 ts-node 来运行&#xff0c;只是其可以帮助我们自动配置好 ts-node 运行参数&#xff0c;简化使用。 第一步&#xff1a;安装…
阅读更多...
Linux Mint 21.3 计划于 2023 年圣诞节发布

Linux Mint 21.3 计划于 2023 年圣诞节发布

导读Linux Mint 项目近日公布了基于 Ubuntu 的 Linux Mint 发行版下一个重要版本的一些初步细节&#xff0c;以及备受期待的基于 Debian 的 LMDE 6&#xff08;Linux Mint Debian Edition&#xff09;版本。 近日&#xff0c;Linux Mint 项目负责人克莱门特-勒菲弗&#xff08;…
阅读更多...
【STM32 学习】电源解析（VCC、VDD、VREF+、VBAT）

【STM32 学习】电源解析（VCC、VDD、VREF+、VBAT）

VCC电源电压GND电源供电负电压&#xff08;通常接地&#xff09;VDD模块工作正电压VSS模块工作负电压VREFADC参考正电压VREF-ADC参考负电压VBAT电池或其他电源供电VDDA模拟供电正电压VSSA模拟供电负电压 一、VCC&#xff08;供电电压&#xff09; VCC是指芯片的电源电压&#…
阅读更多...
cuda、cuDNN、深度学习框架、pytorch、tentsorflow、keras这些概念之间的关系

cuda、cuDNN、深度学习框架、pytorch、tentsorflow、keras这些概念之间的关系

当讨论CUDA、cuDNN、深度学习框架、pytorch、tensorflow、keras这些概念的时候&#xff0c;我们讨论的是与GPU加速深度学习相关的技术和工具。 CUDA&#xff08;Compute Unified Device Architecture&#xff09;&#xff1a; CUDA是由NVIDIA开发的一种并行计算平台和编程模型&…
阅读更多...
快解析内网穿透便捷访问内网私有云

快解析内网穿透便捷访问内网私有云

快解析内网穿透软件的首要优势在于其不改变企业现有IT架构的特点。传统的内网穿透解决方案常常需要对企业网络进行重构&#xff0c;这不仅增加了工作量&#xff0c;还可能带来不稳定的因素。而快解析则巧妙地绕过了这一问题&#xff0c;让您能够在保持原有网络设备和配置的前提…
阅读更多...
matlab相机标定知识整理

matlab相机标定知识整理

matlab相机标定知识整理 单目相机标定 单目相机标定 内参矩阵&#xff1a;cameraParams.Intrinsics.K 或者 cameraParams.K旋转矩阵&#xff1a;cameraParams.RotationMatrices 有待确定 cameraParams.RotationVectors平移矩阵&#xff1a;cameraParams.TranslationVectors径向…
阅读更多...
剑指YOLOv8改进新颖的YOLO架构，基于通道Shuffle的重参数化卷积，将特征级联和计算效率相结合，以提取更丰富的信息并减少时间消耗

剑指YOLOv8改进新颖的YOLO架构，基于通道Shuffle的重参数化卷积，将特征级联和计算效率相结合，以提取更丰富的信息并减少时间消耗

💡本篇内容：剑指YOLOv8改进新颖的YOLO架构，基于通道Shuffle的重参数化卷积，将特征级联和计算效率相结合，以提取更丰富的信息并减少时间消耗 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 💡：重点：该专栏《剑指YOLOv8原创改…
阅读更多...
【设计模式】订单状态流传中的状态机与状态模式

【设计模式】订单状态流传中的状态机与状态模式

文章目录 1. 前言2.状态模式2.1.订单状态流转案例2.1.1.状态枚举定义2.1.2.状态接口与实现2.1.3.状态机2.1.4.测试 2.2.退款状态的拓展2.2.1.代码拓展2.2.2.测试 2.3.小结 3.总结 1. 前言 状态模式一般是用在对象内部的状态流转场景中&#xff0c;用来实现状态机。 什么是状态…
阅读更多...
使用percona-xtrabackup备份MySQL数据

使用percona-xtrabackup备份MySQL数据

xtrabackup备份分为两种 本文参考链接1 本文参考链接2 全量备份 1.备份数据 要创建备份&#xff0c;请xtrabackup使用xtrabackup --backup option. 您还需要指定一个xtrabackup --target-dir选项&#xff0c;即备份的存储位置&#xff0c;如果InnoDB数据或日志文件未存储在同…
阅读更多...
今天，谷歌Chrome浏览器部署抗量子密码

今天，谷歌Chrome浏览器部署抗量子密码

谷歌已开始部署混合密钥封装机制&#xff08;KEM&#xff09;&#xff0c;以保护在建立安全的 TLS 网络连接时共享对称加密机密。 8月10日&#xff0c;Chrome 浏览器安全技术项目经理Devon O’Brien解释说&#xff0c;从 8 月 15 日发布的 Chrome 浏览器 116 开始&#xff0c;谷…
阅读更多...
SpringBoot集成Solr（一）保存数据到Solr

SpringBoot集成Solr（一）保存数据到Solr

SpringBoot集成Solr&#xff08;一&#xff09;保存数据到Solr 添加依赖 <!--SpringBoot中封装过的Solr依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-solr</artifactId><ver…
阅读更多...
数组详解

数组详解

1. 一维数组的创建和初始化 1.1 数组的创建 数组是一组相同类型元素的集合。 数组的创建方式&#xff1a; type_t arr_name [const_n]; //type_t 是指数组的元素类型 //const_n 是一个常量表达式&#xff0c;用来指定数组的大小 数组创建的实例&#xff1a; //代码1 int a…
阅读更多...
STM32 PB9的外部中断

STM32 PB9的外部中断

STM32F103中&#xff0c;外部中断的IRQHandler&#xff0c;EXTI0至EXTI1都是单独的&#xff0c;如图1所示&#xff1b;而从EXTI5至9则共用一个&#xff0c;如图2所示。这些可以通过CtrlF在全工程内查找。 图1 图2 以PB9为例&#xff0c;宏定义可如下配置&#xff1a; // 定义…
阅读更多...
Vue2.7.14、vuecli@5.0.8 升级 vite@4.4.8

Vue2.7.14、vuecli@5.0.8 升级 vite@4.4.8

项目背景 Vue2.7.14、vuecli5.0.8、element-ui2.15.13、node14.18.3 vite安装 pnpm add vite4.4.8 -D 入口文件index.html 文件位置修改 将pulic里的index.html移到根目录下 根目录/public/index.html 到 根目录/index.html 文件内容修改 <link rel"icon"…
阅读更多...
《代码随想录》专题：二叉树2

《代码随想录》专题：二叉树2

翻转二叉树 对称二叉树
阅读更多...
【Lua】（一）VSCode 搭建 Lua 开发环境

【Lua】（一）VSCode 搭建 Lua 开发环境

前言 最近在找工作&#xff0c;基本所有的岗位都会问到 Lua&#xff08;甚至拼 UI 的都要求会 Lua&#xff09;&#xff0c;咱能怎么办呢&#xff0c;咱也只能学啊…… 工欲善其事&#xff0c;必先利其器。第一步&#xff0c;先来把环境配置好吧&#xff01; 当前适用版本&a…
阅读更多...
图数据库_Neo4j学习cypher语言_常用函数_关系函数_字符串函数_聚合函数_数据库备份_数据库恢复---Neo4j图数据库工作笔记0008

图数据库_Neo4j学习cypher语言_常用函数_关系函数_字符串函数_聚合函数_数据库备份_数据库恢复---Neo4j图数据库工作笔记0008

然后再来看一些常用函数,和字符串函数,这里举个例子,然后其他的 类似 可以看到substring字符串截取函数 可以看到截取成功 聚合函数 这里用了一个count(n) 统计函数,可以看到效果 关系函数,我们用过就是id(r) 可以取出对应的r的id来这样..
阅读更多...
学习电工有哪些好处？在哪学习电工？

学习电工有哪些好处？在哪学习电工？

学习电工有哪些好处&#xff1f;在哪学习电工&#xff1f;学习电工可以做什么&#xff1f;优势有哪些&#xff1f; 学习电工可以做什么&#xff1f;学习电工有哪些好处&#xff1f; 就业去向&#xff1a;可在企业单位从事电气设备的安装、调试、操作、维护等工作&#xff0c;…
阅读更多...
面试题--redis篇

面试题--redis篇

一、Redis支持的数据类型&#xff1f; String (字符串) Hash (哈希) List (列表) Set (集合) zset (sorted set&#xff1a;有序集合) 1. String&#xff08;字符串&#xff09; 格式: set key value string 类型是二进制安全的&#xff0c;意思是 redis 的 string 可以包含任…
阅读更多...
opencv特征提取、梯度计算

opencv特征提取、梯度计算

阅读更多...
最新文章

Copyright @ 2022~2023