前端(vue)学习笔记(CLASS 3):生命周期工程化开发入门

1、生命周期

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

生命周期四个阶段:创建、挂载、更新、销毁

1、创建阶段:响应式数据

2、挂载阶段:渲染模板

3、更新阶段:数据修改、更新视图(执行多次)

4、销毁阶段:销毁实例

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

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

每个阶段都有两个钩子函数,其中主要的为:beforeCreate、created、beforeMount、mounted

例如:

        const app=new Vue({el:'#app',data:{num:100},methods:{add() {this.num++},de() {this.num--}},beforeCreate() {console.log('创建开始')},created() {console.log('创建结束')},beforeMount() {console.log('挂载开始')},Mounted() {console.log('挂载结束')}})

执行结果:

(代码中有个小错误,mounted函数不需要首字母大写,导致挂载结束的日志加载不出)

 2、工程化开发&脚手架Vue CLI

开发Vue的两种方式:

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

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

基本介绍:

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

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

好处:开箱即用,零配置,内置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)

* 脚手架目录文件介绍&项目运行流程

创建出来的包如下:

主要需要聚焦于index.html、main.js、APP.vue三个文件

其中app.vue文件用于进行编辑 

* 组件化开发& 根组件

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

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

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

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

APP.vue文件(单文件组件)的三个组成部分:结构(html)、行为(js)、样式(css)

1、语法高亮插件:vetur

2、三部分组成:

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

script:js逻辑

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

3、让组件支持less

style标签,lang="less"开启less功能

装包:yarn add less less-loader

例如:

<template><div @click="fn2" class="APP"><div @click.stop="fn1" class="box"></div></div>
</template><script>export default {methods:{fn1(){alert('创建了一个vue项目')},fn2() {alert('冒泡了')}}}
</script><style>
.APP {width: 400px;height: 400px;background-color: pink;
}.box {width: 200px;height: 200px;background-color: blue;
}
</style>

效果:

* 普通组件的注册使用

注册组件的两种方式:

1、局部注册:只能在注册的组件内使用

创建.vue文件(三个组成部分)、在使用的组件内导入并注册

2、全局注册:所有组件内都能使用

创建.vue文件(三个组成部分)、main.js中进行全局注册

使用:

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

注意:

组件名规范,大驼峰命名法

局部注册,例如:

<template><div class="App"><!-- 头部组件 --><XxHeader></XxHeader><!-- 主体组件 --><XxMain></XxMain><!-- 底部组件 --><XxFooter></XxFooter></div>
</template><script>
import XxHeader from'./components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'export default {components:{XxHeader,XxMain,XxFooter}
}
</script><style>
.App {width: 400px;height: 400px;margin: 0 auto;background-color: skyblue;padding-left: 50px;padding-top: 5px;padding-bottom: 5px;box-sizing: border-box;
}
</style>

省略其他组件的样式代码

效果为:

全局注册,例如,在以上代码的基础上添加一个按钮:

main.js代码:

import { createApp } from 'vue'
import App from './App.vue'
import XxButton from './components/XxButton.vue'createApp(App).component('XxButton',XxButton).mount('#app')

组件代码:

<template><button class="xx-button">通用</button>
</template><script>
export default {}
</script><style>
.xx-button {width: 50px;height: 20px;background-color: green;
}
</style>
<template><div class="xx-header">我是xx-header<XxButton></XxButton></div></template>

最终结果:

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

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

相关文章

【C++】每日一练(有效的括号)

本篇博客给大家带来的是用C语言来解答有效的括号&#xff01; &#x1f41f;&#x1f41f;文章专栏&#xff1a;每日一练 &#x1f680;&#x1f680;若有问题评论区下讨论&#xff0c;我会及时回答 ❤❤欢迎大家点赞、收藏、分享&#xff01; 今日思想&#xff1a;不服输的少年…

一文讲清楚CUDA与PyTorch、GPU之间的关系

CUDA&#xff08;Compute Unified Device Architecture&#xff09;是由NVIDIA开发的一个并行计算平台和编程模型。它允许软件开发人员和研究人员利用NVIDIA的GPU&#xff08;图形处理单元&#xff09;进行高性能计算。CUDA提供了一系列API和工具&#xff0c;使得开发者能够编写…

Linux:基本指令与内涵理解

1.文件操作指令 1.1 ls ls指令用于查看指定层级文件夹下的文件或文件夹 基本格式&#xff1a;ls (选项) (查看层级&#xff09; 其中选项处不写就默认是显示文件名&#xff0c;查看层级默认是当前层级 选项1&#xff1a; -l 作用&#xff1a;将查找文件的详细信息显示出来 我们…

手机屏幕摔不显示了,如何用其他屏幕临时显示,用来导出资料或者清理手机

首先准备一个拓展坞 然后 插入一个外接的U盘 插入鼠标 插入有数字小键盘区的键盘 然后准备一根高清线&#xff0c;一端链接电脑显示器,一端插入拓展坞 把拓展坞的连接线&#xff0c;插入手机充电口&#xff08;可能会需要转接头&#xff09; 然后确保手机开机 按下键盘…

Unity学习日志番外:简易行为树

Unity简单行为树 参考与代码来自b站-ANVER-大佬教学视频以下都是一种固定模板结构&#xff0c;便于外部以及新项目引用。1.BehaviorTree类2.Node类3.composite4.Sequence5.Selector6.Task7.Blackboard8.实例①兔子行为树②巡逻任务③探测萝卜任务③吃萝卜任务 个人对行为树的理…

【SpringBoot】MD5加盐算法的详解

目录 一、什么是加盐算法 二、如何实现加盐算法 2.1 加盐算法代码实现 2.2 注册页面中进行密码加盐 2.3 登录页面进行加盐的解密 2.4 注册和登录 一、什么是加盐算法 加盐算法是一种用于增强密码安全性的技术。这种技术通过在密码存储过程中添加一个随机生成的盐值&…

【Linux学习笔记】Linux用户和文件权限的深度剖析

【Linux学习笔记】Linux用户和文件权限的深度剖析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;Linux学习笔记 前言 文章目录 【Linux学习笔记】Linux用户和文件权限的深度剖析前言一. Linux权限管理1.1 文件访问者的分类&#xff08;人)…

MinIO问题总结(持续更新)

目录 Q: 之前使用正常&#xff0c;突然使用空间为0B&#xff0c;上传文件也是0B&#xff08;部署在k8s中&#xff09;Q: 无法上传大文件参考yaml Q: 之前使用正常&#xff0c;突然使用空间为0B&#xff0c;上传文件也是0B&#xff08;部署在k8s中&#xff09; A: 1、检查pod状态…

c语言经典基础编程题

c语言经典基础编程题 一、输出输出1.1温度输出1.2排齐数据1.3进制转换 二、选择分支2.1求最大值2.2成绩评定2.3分段函数求值2.4 利润计算2.5判断闰年2.6二次方程根 三、循环结构3.1倒数求和3.2最大数3.3判断素数3.4判断完全数3.5打印菱形&#x1f680;&#x1f680;&#x1f68…

[多线程]基于阻塞队列(Blocking Queue)的生产消费者模型的实现

标题&#xff1a;[多线程]基于阻塞队列(Blocking Queue)的生产消费者模型的实现 水墨不写bug 文章目录 一、生产者消费者模型特点&#xff1a;二、实现2.1详细解释1. 成员变量2. 构造函数3. Isfull 和 Isempty4. Push 函数5. Pop 函数6. 析构函数7. GetSize 函数 三、总结与多线…

在vs中无法用QtDesigner打开ui文件的解决方法

解决方法 右键ui文件&#xff0c;选择打开方式&#xff0c;弹出如下界面。 点击添加&#xff0c;弹出如下界面 点击程序后边的三个点&#xff0c;去电脑查找designer.exe,我的位置为D:\Qt\Qt5.9.9\5.9.9\msvc2015_64\bin\designer.exe。 名称可以自己起一个名字&#xff0c…

[内网渗透] 红日靶场2

环境配置 靶场地址: http://vulnstack.qiyuanxuetang.net/vuln/wiki/ 环境配置可以看这个: https://www.bilibili.com/video/BV1De4y1a7Ps/?spm_id_from333.337.search-card.all.click&vd_sourcecf73ac8de9b7c0322b1bccf77de91c5dNAT模式分配111段, DHCP也要更改 再添加…

第八节:红黑树(初阶)

【本节要点】 红黑树概念红黑树性质红黑树结点定义红黑树结构红黑树插入操作的分析 一、红黑树的概念与性质 1.1 红黑树的概念 红黑树 &#xff0c;是一种 二叉搜索树 &#xff0c;但 在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是 Red和 Black 。 通过对 任何…

基于Spring Boot的网上蛋糕售卖店管理系统的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

哈尔滨算力服务器托管推荐-青蛙云

哈尔滨年平均气温3.5摄氏度&#xff0c;有发展云计算和算力数据中心的天然优势 &#xff0c;今天为哈尔滨算力服务器托管服务商&#xff1a;青蛙云&#xff0c;黑龙江经营17年的老牌IDC服务商。 先来了解下算力服务器&#xff1a; 算力服务器&#xff0c;尤其是那些用于运行人…

关于Linux contOS 7 的防火墙

centos7 通过firewall-cmd命令添加防火墙白名单 。 查看防护墙状态 firewall-cmd --state 或 systemctl status firewalld active (running)-->表示防火墙已经开启&#xff1b;inactive (dead)-->表示防火墙已经关闭 开关防火墙命令 启动防火墙&#xff1a;systemctl …

【openGauss】物理备份恢复

文章目录 1. gs_backup&#xff08;1&#xff09;备份&#xff08;2&#xff09;恢复&#xff08;3&#xff09;手动恢复的办法 2. gs_basebackup&#xff08;1&#xff09;备份&#xff08;2&#xff09;恢复① 伪造数据目录丢失② 恢复 3. gs_probackup&#xff08;1&#xf…

MySql学习_基础Sql语句

目录 1.数据库相关概念 2.SQL 2.1 SQL通用语法 2.2 SQL分类 2.3 DDL&#xff08;数据库定义语言&#xff09; 2.4 DML&#xff08;数据操作语言&#xff09; 2.5 DQL&#xff08;数据查询语言&#xff09; 2.6 DCL&#xff08;数据控制语言&#xff09; 3. 函数 3.1 字…

MAE:Masked Autoencoders Are Scalable Vision Learners——论文学习

论文地址&#xff1a;https://arxiv.org/pdf/2111.06377.pdf 官方源码&#xff1a;https://github.com/facebookresearch/mae 一、主要内容 本文证明了掩码自编码器(MAE)是一种可扩展的计算机视觉自监督学习算法。本文的MAE方法很简单:屏蔽输入图像的随机补丁并重建缺失的像素…

【C++标准库类型】深入理解C++中的using声明:从基础到实践

目录 一、using声明基础 1.1 基本语法形式 1.2 典型应用场景 1.3 作用域规则 二、关键注意事项 2.1 命名冲突处理 2.2 头文件使用规范 2.3 与typedef的对比 三、面向对象中的应用 3.1. 解除派生类名称隐藏&#xff08;核心应用&#xff09; 3.2. 构造函数继承&#…