前端框架学习 Vue(3)vue生命周期,钩子函数,工程化开发脚手架CLI,组件化开发,组件分类

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

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

生命周期四个阶段 :(1)创建 (2)挂载 (3)更新 (4)销毁

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

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

四个阶段,八个钩子 -> 三个常用 created , mounted , beforeDestroy

created应用

响应式数据准备好了,可以发送初始化渲染请求(配合axios得到从服务器传输的数据)

data:{list:[]},created () {console.log('响应式数据准备完毕,开始初始化渲染请求')const res = await axios.get(url,{params:{creator:''}})this.list  = res.data.data}

mounted应用

模板渲染完成,可以开始操作DOM(获取输入框焦点)

data:{list:[]},mounted () {console.log('模板渲染完成,开始操作DOM')}

工程化开发&脚手架CLI

开发Vue的两种方式:

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

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

基础介绍:

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

可以帮助我们快速创建一个开发Vue项目的标准化基础

好处:

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.josn)

脚手架目录文件介绍

 

// 文件核心作用:导入App.vue,基于App.vue创建结构渲染index.html
// 1.导入 vue核心包
import Vue from 'vue'
// 2.导入App.vue 根组件
import App from './App.vue'// 提示:当前处于什么环境(生成/开发)
Vue.config.productionTip = false// 3.Vue实例化,提供render方法 - > 基于App.vue创建结构渲染index.html
new Vue({// el:'#app',作用:和$mount('选择器')作用一致,用于指定Vue所管理的// render: h => h(App),render: (h) =>{// 基于App创建元素结构return h(App)}
}).$mount('#app')

组件化开发&根组件

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

好处:便于维护,利用复用 ->提升开发效率

组件分类:普通组件,根组件

(2)根组件:整个应用最上层的组件,包裹所以普通小组件

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

1.语法高亮插件:

2.三部分组成:

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

script:js逻辑

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

3.让组件支持less

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

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

普通组件的注册使用

组件注册的两种方式:

1.局部注册

        只能在注册的组件内使用

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

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

 使用:

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

注意:

组件名规范 ->大驼峰命名法,如:HmHeader

2.全局注册

所有组件内都能使用

使用:

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

        (2)main.js中进行全局注册

综合案例-组件拆分-开发思路

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

2.根据设计图,编写html结构 css样式

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

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

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

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

相关文章

【云原生kubernetes系列】---亲和与反亲和

1、亲和和反亲和 node的亲和性和反亲和性pod的亲和性和反亲和性 1.1node的亲和和反亲和 1.1.1ndoeSelector&#xff08;node标签亲和&#xff09; #查看node的标签 rootk8s-master1:~# kubectl get nodes --show-labels #给node节点添加标签 rootk8s-master1:~# kubectl la…

用GOGS搭建GIT服务器

GOGS官网 Gogs: A painless self-hosted Git service 进入文件所在目录 cd /usr/local/develop 解压文件 tar -xvf gogs_0.13.0_linux_amd64.tar.gz 解压之后 进入gogs 目录 cd gogs 创建几个目录 userdata 存放用户数据 log文件存放进程日志 repositories 仓库根目…

19113133262(微信同号)【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024)

【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024) 2024 International Conference New Materials and Applied Chemistry(ICNMAC 2024) 一、【会议简介】 会议背景&#xff1a;随着科技的飞速发展&#xff0c;新材料与应用化学领域的研究成果日益丰富。为…

MySQL进阶45讲【12】为什么你的MySQL偶尔会卡一下

1 前言 平时的工作中&#xff0c;不知道大家有没有遇到过这样的场景&#xff0c;一条SQL语句&#xff0c;正常执行的时候特别快&#xff0c;但是有时也不知道怎么回事&#xff0c;它就会变得特别慢&#xff0c;并且这样的场景很难复现&#xff0c;它不只随机&#xff0c;而且持…

事件驱动架构:使用Flask实现MinIO事件通知Webhooks

MinIO的事件通知可能一开始看起来并不激动人心&#xff0c;但一旦掌握了它们的力量&#xff0c;它们就能照亮您存储桶内的动态。事件通知是一个全面、高效的对象存储系统中的关键组件。Webhooks是我个人最喜欢的工具&#xff0c;用于与MinIO集成。它们在事件的世界中就像一把瑞…

基于NSGA-II的深度迁移学习

深度迁移学习 迁移学习是一种机器学习技术&#xff0c;它允许一个预训练的模型被用作起点&#xff0c;在此基础上进行微调以适应新的任务或数据。其核心思想是利用从一个任务中学到的知识来帮助解决另一个相关的任务&#xff0c;即使这两个任务的数据分布不完全相同。这种方法…

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤,从而可以造成命令执行,目录遍历等.首先存在漏洞的web服务一定是存在xml传输数据的,可以在http头的content-type中查…

sql求解连续两个以上的空座位

Q&#xff1a;查找电影院所有连续可用的座位。 返回按 seat_id 升序排序 的结果表。 测试用例的生成使得两个以上的座位连续可用。 结果表格式如下所示。 A:我们首先找出所有的空座位&#xff1a;1&#xff0c;3&#xff0c;4&#xff0c;5 按照seat_id排序&#xff08;上面已…

Android studio使用svg矢量图

https://www.iconfont.cn/ https://www.jyshare.com/more/svgeditor/ https://editor.method.ac/ https://inloop.github.io/svg2android/ Pattern Monster - SVG 图案生成器 Android studio使用svg矢量图自适应不同的分辨率&#xff0c; svg矢量图绘制以及转换为And…

前端小案例——动态导航栏文字(HTML + CSS, 附源码)

一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景&#xff0c;并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素&#xff0c;包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时&#xff0c;选项的文本颜色…

IntelliJ IDEA - 5 个相见恨晚的 IDEA 使用技巧,能让你的代码飞起来!

日常开发中&#xff0c;相信广大 Java 开发者都使用过 IntelliJ IDEA 作为开发工具&#xff0c;IntelliJ IDEA 是一款优秀的 Java 集成开发环境&#xff0c;它提供了许多强大的功能和快捷键&#xff0c;可以帮助开发者提高编码效率和质量。除了一些常见的技巧&#xff0c;如自动…

LLM - Qwen-72B LoRA 训练与推理实战

目录 一.引言 二.模型简介 1.Qwen-Model 总览 2.Qwen-Chat-72B - PreTrain - Tokenizer - Base Line - SFT / RLHF 3.Qwen-72 模型架构 - Config.json - c_attn/c_proj - Attention Forward - ROPE - Qwen MLP - Qwen Block 三.QLoRA 与 Infer 实战 1.SFT 指…

连州直播大赛:培训新主播,用直播连接农产品与市场

摘要:在广东省连州市,一场别开生面的直播大赛不仅为当地特色农产品打开了销售新渠道,更重要的是,它通过赛中学习的机制,为参与者提供了宝贵的线上营销培训,培育了一批具备电商直播技能的新型农商人才,开启了电子商务促进连州农业经济发展的新篇章。 正文: 广东省连州市最近举…

神经网络激活函数到底是什么?

激活函数 其实不是很难啦&#xff0c;归结一下就是大概这样几个分类&#xff0c;详情请参考【神经网络】大白话直观理解&#xff01;_哔哩哔哩_bilibili神经网络就是干这个事的~ 如果队伍不长&#xff0c;一个ykxb就可以了&#xff0c;如果 如果 队伍太长 就加一个激活函数也…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Radio组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Radio组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Radio组件 单选框&#xff0c;提供相应的用户交互选择项。 子组件 无。 接口 …

【数据结构 10】位图

一、位图 在海量数据的标记的时候&#xff0c;比如数十亿上百亿上千亿的数据&#xff0c;我们要统计数据是否出现&#xff0c;直接存储数据的话对内存的消耗太大了&#xff0c;这时我们可以通过位图来标记出现过的数据&#xff0c;位图可以标记0~42亿之间的整型数据&#xff0…

SpringBoot 过滤器Filter 拦截请求 生命周期

介绍 当用户请求接口时&#xff0c;请求会先到过滤器&#xff0c;在到处理逻辑的接口&#xff0c;在过滤器中可以可以判断用户权限&#xff0c;如&#xff1a;是否登录&#xff0c;或请求前的一些操作&#xff0c;完成一下比较通用的操作&#xff0c;如&#xff1a;前端的AXIO…

threejs之常用贴图

在三维图形和游戏开发中&#xff0c;高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术&#xff0c;用于增加虚拟物体表面的细节和真实感&#xff0c;而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。 高光贴图&#xff08;Sp…

console.log导致内存泄露 打包时自动去掉console.log方法

webpack通过工具&#xff1a;terser 使用前需要先安装一下 vue.config.js const { defineConfig } require(vue/cli-servise); module.exports defineConfig({transpileDependencies:true,terser:{terserOptions:{compress:{drop_console:true,drop_debugger:true,},},},}…

vue3中ts的基本用法

定义类型&#xff08;src/types/index.ts&#xff09; &#xff1f;代表可有可无 export interface Persons {id: number,name: string,age?: number }定义Person子组件&#xff08;src/components/Person.vue&#xff09; <template><ul><li v-for"item …