news 2026/3/11 16:46:26

Vue生命周期和工程化开发

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue生命周期和工程化开发
vue生命周期:
一个Vue实例从创建到销毁的整个过程
生命周期的四个阶段:
1创建,2挂载,3更新,4 销毁
创建阶段:new Vue 创建响应式数据
挂载阶段:渲染模版
更新阶段:修改数据,更新视图
创建和挂载只执行一次,更新多次执行
销毁阶段:销毁实例
什么时候可以发送初始化渲染请求,(创建的最后
什么时候操作DOM(挂载的最后
Vue生命周期函数(钩子函数
八个钩子分别是:
创建阶段before Create created
挂载阶段:before Mount mounted
更新阶段:before Update updated
销毁阶段:before Destroy destroyed
工程化开发&脚手架
开发Vue两种方式:核心包传统开发模式,工程化开发模式
VueCLI 是Vue官方提供的一个全局命令工具,可以帮助我们快速创建一个开发Vue项目的标准化基础架子
好处:开行即用,零配置,内置Babel等工具,标准化
使用步骤:
  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文件的三个组成部分:
template:结构 ,script:js逻辑,style:样式
style标签,lang=“less“开启less功能
(1) 组件化:
页面可拆分成一个个组件,每个组件有着独立的结构、样式、行为
① 好处:便于维护,利于复用→ 提升开发效率
② 组件分类:普通组件、根组件。
(2) 根组件:
整个应用最上层的组件,包裹所有普通小组件。
一个根组件App.vue,包含的三个部分
template结构 (只能有一个根节点)
style样式 (可以支持less,需要装包 less 和 less-loader )
script行为
普通组件的注册方式:
1:局部注册:只能在注册的组件内使用
(1)创建Vue文件(三个组成部分)
(2)在使用的组件内都能使用
全局注册:所有组件内都使用
① 创建 .vue 文件 (三个组成部分)
② main.js 中进行全局注册
使用:
◆ 当成 html 标签使用 <组件名>
注意:
◆ 组件名规范 → 大驼峰命名法,如:HmHeader
技巧:
◆ 一般都用局部注册,如果发现确实是通用组件,再定义到全局。
总结:
普通组件的注册使用:

1.两种注册方式:

① 局部注册

(1) 创建.vue组件 (单文件组件)

(2) 使用的组件内导入,并局部注册 components: { 组件名:组件对象 }
② 全局注册:
(1) 创建.vue组件 (单文件组件)
(2) main.js内导入,并全局注册 Vue.component(组件名, 组件对象)
2. 使用:
<组件名>
技巧:
一般都用局部注册,如果发现确实是通用组件,再抽离到全局。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/9 20:57:44

AI地质勘探:地震波反演模型在油气识别的准确率测试实践

AI地质勘探的热度与测试挑战 当前&#xff0c;AI技术正重塑油气勘探行业&#xff0c;地震波反演模型作为核心工具&#xff0c;能通过分析地震波数据预测地下油气储层分布&#xff0c;提升勘探效率。2025-2026年间&#xff0c;相关应用热度飙升&#xff0c;主因是其准确率突破性…

作者头像 李华
网站建设 2026/3/10 3:20:19

openpnp - 关于4个关键点高度必须等高的官方资料

文章目录openpnp - 关于4个关键点高度必须等高的官方资料概述笔记官方文档资料地址官方文档关于4点等高的出处3D-Units-per-Pixel.md摘录1摘录2Nozzle-Tip-Calibration-Setup.md摘录1Vision-Solutions.mdENDopenpnp - 关于4个关键点高度必须等高的官方资料 概述 和同学讨论问…

作者头像 李华
网站建设 2026/3/1 11:35:17

用 XinServer,我的项目上线速度快了 N 倍

用 XinServer&#xff0c;我的项目上线速度快了 N 倍 兄弟们&#xff0c;不知道你们有没有经历过这种场景&#xff1a;产品经理拍着桌子说“这个功能下周必须上线”&#xff0c;你看着前端页面已经写得七七八八&#xff0c;但后端接口连个影儿都没有。或者&#xff0c;你是个移…

作者头像 李华
网站建设 2026/3/9 10:48:50

工资不上涨,一只给我实习工资,该怎么破局?时机就是你在承担了大项目的时候,你是主导者的时候,并且在外面试过,自己是有性价比的

工资不上涨,一只给我实习工资,该怎么破局? 别一遇问题就内耗:先分清「敌人」与「盟友」 目录 工资不上涨,一只给我实习工资,该怎么破局? 别一遇问题就内耗:先分清「敌人」与「盟友」 先矫正核心误区:理解的「敌人」和「盟友」,全错了 以为的: 真正解决问题的定义(理…

作者头像 李华
网站建设 2026/3/10 10:44:01

‌NBA交易动态应用中的数据一致性测试场景构建

当体育数据遇上软件系统‌NBA交易窗口期是职业体育界最具冲击力的事件之一。一笔交易的达成&#xff0c;往往在数秒内触发数十个系统的数据更新&#xff1a;球队 roster 系统更新球员归属、薪资帽计算器重新核算、票务系统调整座位标签、Fantasy 球员池同步、媒体内容平台推送新…

作者头像 李华