1. vue3.0 子组件向父组件传递事件

需求：子组件有个点击事件，需要将该点击事件传递给父组件

// son.vue
<template><button @click='success'></button><button @click='fail'></button>
</template><script setup>const emit = defineEmits(['clickBtnAction','clickBtnAction2'])function success() {emit('clickBtnAction', true)}function fail() {emit('clickBtnAction2')}
</script>

// father.vue
<template><son @clickBtnAction="clickBtnFunction" @clickBtnAction2="clickBtnFunction2"></son>
</template><script setup lang="ts">function clickBtnFunction(canShow:Boolean){if(canShow){// code}}function clickBtnFunction(){//code}
</script>

2.image的object-fit属性详解

object-fit属性测试
下面我们来测试一下每一个属性值显示的效果每个img标签都设置的 width:200px 和 width:200px，再加上设置的object-fit属性的不同值，效果图如下：

3.让3个盒子垂直居中排布

效果图：

<template><div class="father"><div class="son son1"><img :src="staticImg('company-wechat.png')" alt=""></div><div class="son son2">请扫描二维码</div><div class="son son3">关注我们的微信公众号</div></div>
</template><style scoped lang="less">
.father {margin: 0px;width: 300px;height: 250px;align-items: center;.son{width: 100%;}.son1{height: 70%;display: flex;justify-content: center;img{text-align: center;width: 94px;height: 94px;}}.son2{text-align: center;height: 15%;}.son3{text-align: center;height: 15%;}
}
</style>

4. 实现如下效果：

左边是图片，右边是文字，并且左右两边平分,居中
圆角
四周有阴影

<div class="m-time-content"><div class="quarter-div blue"><img id="time-content-img" src="../assets/logo.png" alt=""></div><div class="quarter-div green">公司于2019.01在广州市成立</div>
</div><style>
.m-time-content {height: 150px;margin-left: 0px;overflow: hidden;// 边框+阴影border-radius: 20px;box-shadow: 0px 0px 10px rgb(200, 200, 200);.quarter-div {width: 50%;height: 100%;float: left;display: flex;align-items: center;justify-content: center;}.green {color: #000;font-size: larger;}
}#time-content-img {width: 100%;height: 100%;
}
</style>

注意点：

设置四周阴影，可以设置：水平方向 0px 垂直方向0px
box-shadow: 0px 0px 10px rgb(200, 200, 200);

为了防止圆角被子元素覆盖，可以在父元素上设置：
overflow: hidden;

如果想让2个子元素水平平分父元素，可以设置：
{
width: 50%; // 宽度各占一半
height: 100%; // 高度铺满
float: left;
display: flex; // 采用flex布局
align-items: center;
justify-content: center;
}

5. CSS中rem、em、vh、px各自代表的含义

rem：是全部的长度都相对于根元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em：子元素字体大小的em是相对于父元素字体大小,元素的width/height/padding/margin用em的话是相对于该元素的font-size
vh:全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
px: px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920 * 1024}等不同的分辨率
1920 * 1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

Web项目知识点积累相关推荐

python Web项目知识点分析
django项目知识点分析 1.异步任务celery和中间人rabbitmq 1.1 celery提供异步任务,遇到耗时操作的任务都可以交给celery来完成 1.2 通信过程是,生产者(任务 ...
2、MyEclipse和Eclipse调优，MyEclipse配置(tomcat和jdk的内存设置)，jar引入相关知识点,将Java项目编程web项目的办法
1.WindowàPreferenceàGeneralàWorkspaceàText file encoding都改成UTF-8 2.WindowàPreferenceàGeneralàEdito ...
Java Web项目开发灵感和知识点总结
关于项目开发技术方案基本骨架: A:DB(Mysql.Oracle)+ JDBC +javaBean+JSP (M1模型:视图与控制层混合) 打单 B:JSP(JSTL/EL)(AJAX) + se ...
微信WEB开发知识点手册-柴神-专题视频课程
微信WEB开发知识点手册-3195人已学习课程介绍从"初级"开始讲解,讲解基于web的微信开发基础知识点. 课程收益熟悉微信基础开发.微信web(微网 ...
web项目答辩总结_web实战项目遇到问题总结探索
最近在写一个django的web项目,后端代码基本都已经写好了,主要是前端,以前学过一段前端,只是对一些基本的方法知道,但还有很多东西不熟练,问题是在遇到表单数据时候,如何对参数整体打包发送后端接口, ...
IntelliJ IDEA WEB项目的部署配置
1.前言虽说Intellij IDEA已经用了四个多月,里面大部分功能还是比较熟悉的,但是很多细节地方还是搞不清楚,这几天公司另一个小组也换成了Intellij IDEA,帮他们迁移项目的时候,因为 ...
spring boot构建基础版web项目(一)springboot、thymeleaf控制层基础构
原文作者:弥诺R 原文地址:http://www.minuor.com/147852147/article 转载声明:转载请注明原文地址,注意版权维护,谢谢! 写前说明根据个人在各篇博文中看到的信息 ...
基于koajs的web项目构建-心得篇
2019独角兽企业重金招聘Python工程师标准>>> 根据基于koajs的web项目构建-入门篇所描述的,建立了项目的基本目录结构,接下来的工作便是编码,编译,测试,发布.做为 ...
web项目打包到上线教程_手把手教你在 IntelliJ IDEA 中部署 Web 项目
关注逆锋起笔学习资源.工具不用愁「逆锋起笔」公号读者福利 ☞ 程序员进阶必备资源免费送「21种技术方向!」 ☜本文地址:www.cnblogs.com/deng-cc/p/6416332.ht ...

Web项目知识点积累

1. vue3.0 子组件向父组件传递事件

2.image的object-fit属性详解

3.让3个盒子垂直居中排布

4. 实现如下效果：

5. CSS中rem、em、vh、px各自代表的含义

Web项目知识点积累相关推荐

最新文章

热门文章