vue-生命周期+工程化开发(三)

生命周期

Vue 生命周期 和 生命周期的四个阶段

思考:

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

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

生命周期四个阶段:① 创建 (初始化动态数据)② 挂载 (渲染模板)③ 更新 ④ 销毁

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

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

 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><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('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段(渲染模板)beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作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>
</body>
</html>

 小黑记账清单

功能需求:

1. 基本渲染

2. 添加功能

3. 删除功能

4. 饼图渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input type="text" v-model="name" class="form-control" placeholder="消费名称" /><input type="text" v-model.number="price" class="form-control" placeholder="消费价格" /><button type="button" class="btn btn-primary"   @click="add()">添加账单</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}}</td><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr></tbody><tfoot><tr><td colspan="4" class="red">消费总计: {{totalPrice.toFixed(2)}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文档地址:* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求:* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: '#app',data: {list: [],name: '',price: null},computed: {totalPrice(){let total = this.list.reduce((sum,item)=>sum+item.price,0)return total}},methods: {async getList(){// 使用ajax发送请求const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{params: {creator: 'jack'}})// console.log(res);this.list=res.data.data// console.log(this.list);//更新图表this.Chars.setOption({series: [{// data: [//   { value: 1048, name: 'Search Engine' },//   { value: 735, name: 'Direct' },//   { value: 580, name: 'Email' },//   { value: 484, name: 'Union Ads' },//   { value: 300, name: 'Video Ads' }// ]data: this.list.map(item=>{//返回一个对象return {value: item.price, name: item.name}})}]})},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: 'jack',name: this.name,price: this.price})//重新渲染this.getList()//重置输入框this.name = ''this.price = null},async del(id){const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)//重新渲染this.getList()}},// 在数据动态化后执行的钩子函数created(){//数据出初始化完成后,获取数据this.getList()},//在视图渲染完成后执行mounted(){//初始化echarts对象this.Chars = echarts.init(document.querySelector('#main'))this.Chars.setOption({// 标题title: {text: '消费账单列表',left: 'center'},// tooltip: {trigger: 'item'},// 小图标legend: {orient: 'vertical',left: 'left'},series: [{name: '消费账单',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)'}}}]})}})</script></body>
</html>

案例总结:

 

工程化开发入门

开发 Vue 的两种方式:

1. 核心包传统开发模式:基于 html / css / js 文件,直接引入核心包,开发 Vue。

2. 工程化开发模式:基于构建工具(例如:webpack ) 的环境中开发 Vue

工程化开发 & 脚手架 Vue CLI 

基本介绍:

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.vue 文件(单文件组件)的三个组成部分 

 普通组件的注册使用

组件注册的两种方式:
1. 局部注册:只能在注册的组件内使用
    ① 创建 .vue 文件 (三个组成部分)
    ② 在使用的组件内导入并注册
2. 全局注册:所有组件内都能使用

局部注册

 全局注册

小结:

(1) 组件化:
页面可拆分成一个个组件,每个组件有着独立的结构、样式、行为
     ① 好处:便于维护,利于复用 → 提升开发效率。
     ② 组件分类:普通组件、根组件

(2) 根组件:
整个应用最上层的组件,包裹所有普通小组件。
一个根组件App.vue,包含的三个部分:
        ① template 结构 (只能有一个根节点)
        ② style 样式 (可以支持less,需要装包 less 和 less-loader )
        ③ script 行为 

 两种注册方式:
         ① 局部注册:
                (1) 创建.vue组件 (单文件组件)
                (2) 使用的组件内导入,并局部注册 components: { 组件名:组件对象 }
        ② 全局注册
                (1) 创建.vue组件 (单文件组件)
                (2) main.js内导入,并全局注册 Vue.component(组件名, 组件对象)
 使用:
<组件名></组件名>
技巧:
一般都用局部注册,如果发现确实是通用组件,再抽离到全局。

综合案例:小兔鲜首页

 

页面开发思路:

1. 分析页面,按模块拆分组件,搭架子 (局部或全局注册)

2. 根据设计图,编写组件 html 结构 css 样式 (已准备好)

3. 拆分封装通用小组件 (局部或全局注册)

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

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

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

相关文章

【办公类-23-02】20240212徐迟《江南小镇(南浔古镇)》“水晶晶”和景物”数量提取66个

作品展示 背景需求&#xff1a; 2024年春节前夕&#xff0c;我与家人前往浙江湖州、南浔旅行。探寻母亲、外婆外公、曾外婆的祖籍南浔的风土人情。在古镇上看到了”著名诗人“徐迟”的介绍。 母亲说&#xff1a;我的姑母就是在南浔读了小学和中学&#xff0c;她小学时的老师就…

PKI - 借助Nginx 实现Https_使用CA签发证书

文章目录 Pre概述操作步骤1. 生成 CA 密钥对2. 生成自签名的 CA 证书3. 生成服务器密钥对和证书签名请求 (CSR)4. 使用 CA 签署服务器证书 Nginx Https 自签证书1. 生成自签名证书和私钥2. 配置 Nginx 使用 CA签发的 HTTPS 证书3. 重启 Nginx 服务4. 直接访问5. 不验证证书直接…

Junit5基础教程

文章目录 一&#xff0c;导入依赖二&#xff0c;基本功能一、常用断言二、执行顺序和常用注解1、通过BeforeAll类的注解来保证顺序2、通过order注解来保证执行顺序 三、依赖测试四、参数化测试五、测试套件SelectPackages、IncludePackages、SelectClasses、IncludeTags等注解的…

Spark MLlib

目录 一、Spark MLlib简介 &#xff08;一&#xff09;什么是机器学习 &#xff08;二&#xff09;基于大数据的机器学习 &#xff08;三&#xff09;Spark机器学习库MLlib 二、机器学习流水线 &#xff08;一&#xff09;机器学习流水线概念 &#xff08;二&#xff09…

第5集《佛说四十二章经》

和尚尼慈悲、诸位法师、诸位居士&#xff0c;阿弥陀佛&#xff01; 请大家打开讲义第五面&#xff0c;第三章、割爱去贪。 蕅益大师他把《四十二章经》的内涵分成两个部分&#xff1a;第一部分是第一章、第二章的正道法门&#xff1b;其次&#xff0c;第三章之后共有四十章都…

Java图形化界面编程—— ImageIO 笔记

2.8.4 ImageIO的使用 在实际生活中&#xff0c;很多软件都支持打开本地磁盘已经存在的图片&#xff0c;然后进行编辑&#xff0c;编辑完毕后&#xff0c;再重新保存到本地磁盘。如果使用AWT要完成这样的功能&#xff0c;那么需要使用到ImageIO这个类&#xff0c;可以操作本地磁…

【MATLAB】GA_BP神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 GA_BP神经网络回归预测算法结合了遗传算法&#xff08;Genetic Algorithm, GA&#xff09;和BP神经网络&#xff08;Backpropagation Neural Network, BPNN&#xff09;&#xff0c;用于解…

分享88个文字特效,总有一款适合您

分享88个文字特效&#xff0c;总有一款适合您 88个文字特效下载链接&#xff1a;https://pan.baidu.com/s/1Y0JCf4vLyxIJR6lfT9VHvg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…

Gemini VS GPT-4,当前两大顶级AI模型实测

随着谷歌在AI军备竞赛中急起直追&#xff0c;“有史以来最强大模型”Gemini Advanced终于上线&#xff0c;AI爱好者们总算等来了一款号称能够匹敌GPT-4的大语言模型。 月费19.99美元&#xff08;包含Google One订阅&#xff09;的Gemini Advanced实际表现如何&#xff1f;究竟…

C++进阶(十五)C++的类型转换

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、C语言中的类型转换二、为什么C需要四种类型转换三、C强制类型转换1、static_cast2、reint…

[office] excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 #笔记#学习方法

excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 在日常工作中经常会到用excel&#xff0c;有时需要计算毛重和皮重的时间间隔&#xff0c;具体的计算方式是什么&#xff0c;一起来了解一下吧 在日常工作中经常会到用excel&#xff0c;在整理编辑过磅数据…

Linux--基础开发工具篇(2)(vim)(配置白名单sudo)

目录 前言 1. vim 1.1vim的基本概念 1.2vim的基本操作 1.3vim命令模式命令集 1.4vim底行命令 1.5 异常问题 1.6 批量注释和批量去注释 1.7解决普通用户无法sudo的问题 1.8简单vim配置 前言 在前面我们学习了yum&#xff0c;也就是Linux系统的应用商店 Linux--基础开…

2024牛客寒假算法基础集训营2-c Tokitsukaze and Min-Max XOR

来源 题目 Tokitsukaze 有一个长度为 n 的序列 a1,a2,…,an和一个整数 k。 她想知道有多少种序列 b1,b2,…,bm满足&#xff1a; 其中 ⊕\oplus⊕ 为按位异或&#xff0c;具体参见 百度百科&#xff1a;异或 答案可能很大&#xff0c;请输出  mod1e97 后的结果。 输入描述…

问题排查利器 - 分布式 trace

在分布式系统开发中&#xff0c;系统间的调用往往会横跨多个应用之间的接口。负责的调用链路也导致了&#xff0c;当线上环境出现问题时&#xff0c;例如请求失败、延迟增加或错误发生&#xff0c;我们无法第一时间确定是哪个环节出了问题&#xff0c;这给故障排查和修复带来了…

AI:125-基于深度学习的航拍图像中地物变化检测

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…

中国电子学会2020年12月份青少年软件编程Scratch图形化等级考试试卷三级真题(编程题)

编程题(共3题&#xff0c;共30分) 36.绘制图形 1. 准备工作: &#xff08;1&#xff09;保留默认小猫角色&#xff0c;隐藏角色&#xff1b; &#xff08;2&#xff09;背景为白色背景。 2. 功能实现: &#xff08;1&#xff09;绘制如下图所示的图案&#xff1b; &…

从汇编角度解释线程间互斥-mutex互斥锁与lock_guard的使用

多线程并发的竞态问题 我们创建三个线程同时进行购票&#xff0c;代码如下 #include<iostream> #include<thread> #include<list> using namespace std; //总票数 int ticketCount100; //售票线程 void sellTicket(int idx) {while(ticketCount>0){cou…

内网安全-内网穿透

目录 内网渗透 Nc使用详解 Nc监听和探测 Nc传文件 termite内网穿透工具 ssh代理内网穿透 ssh配置socket代理 MSF多级网络穿透 内网渗透 Nc使用详解 Nc监听和探测 Nc传文件 termite内网穿透工具 1、termite 之前叫ew &#xff08;可以进行正向连接&#xff0c;可以…

JVM学习记录

JVM基础概念 JVM是一个运行在计算机上的程序&#xff0c;负责编译java字节码文件&#xff0c;支持跨平台特性。 java语言为了通过实时解释实现多平台支持&#xff0c;性能相对于C等语言较低&#xff0c;而JVM提供了JIT即时编译进行性能优化。 JVM与JIT JVM负责解释和执行Ja…

LLaMA 入门指南

LLaMA 入门指南 LLaMA 入门指南LLaMA的简介LLaMA模型的主要结构Transformer架构多层自注意力层前馈神经网络Layer Normalization和残差连接 LLaMA模型的变体Base版本Large版本Extra-Large版本 LLaMA模型的特点大规模数据训练 LLaMA模型常用数据集介绍公共数据来源已知的数据集案…