![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web
js css html vue
fengchengwu2012
做技术就要追求卓越
展开
-
css grid实现九宫格布局
常见的九宫格布局可以使用flex布局实现,但是flex布局有个致命的缺陷,比如3行3列的布局,当第不足3个元素的时候,元素依然是平局平铺的,这样就不满足九宫格的效果,这种情况,使用grid布局可以轻松搞定这个问题。原创 2024-06-22 23:09:06 · 461 阅读 · 0 评论 -
css响应式布局左、右上、右中布局
【代码】css响应式布局左、右上、右中布局。原创 2024-05-03 15:54:26 · 335 阅读 · 0 评论 -
Js使用Promise实现阻塞任务
Promise异步编程原创 2024-03-29 17:24:24 · 568 阅读 · 0 评论 -
flex弹性盒子平分布局
【代码】flex弹性盒子平分布局。原创 2024-03-14 00:02:38 · 673 阅读 · 0 评论 -
flex弹性盒子实现左中右居中布局
【代码】flex弹性盒子实现左中右居中布局。原创 2024-03-13 18:09:44 · 805 阅读 · 0 评论 -
avue-crud中el-select的使用
Avue的v2版本是一个基于element-ui低代码前端框架,Avue的v3是一个基于element-plus低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。原创 2024-02-05 10:07:44 · 842 阅读 · 1 评论 -
input 上传多张图片前端界面js交互
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <link原创 2018-03-23 23:13:15 · 2940 阅读 · 2 评论 -
Vue父子组件、子父组件、非父子组件通信
1、父子组件传值通信,在子组件中使用props属性,静态或者动态传递父组件的变量值<template> <div id="app"> <div> <div style="display: inline-block;"> <div class="btn-div btn-bg">{{msg}}&l...原创 2019-10-09 23:58:04 · 207 阅读 · 2 评论 -
js时间格式化函数
1、将时间戳格式化成字符串 /** * @param now 时间戳 1567491849760 * @returns {string} yyyy-MM-dd dd:HH:mm */ const formatDate = (now) => { let nowTime=new Date(now); ...原创 2019-09-03 17:07:56 · 471 阅读 · 2 评论 -
初识Vue多路由
Vue当下最火爆的前端框架之一,之前一直在使用jquery,最近一直听到Jquery已经过时的声音,为了跟上步伐,最近抽空要恶补一番Vue的知识。本文简单学习一下Vue的路由,Vue.js 路由允许我们通过不同的 URL 访问不同的内容,通过 Vue.js 可以实现多视图的单页Web应用(SPA)。 1、学习成果及项目结构 单页效果webpack项目目录...原创 2019-07-24 16:04:04 · 507 阅读 · 2 评论 -
Vue全局组件与局部组件
全局注册组件,组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用,局部注册的组件只能在指定父组件下使用,作用域小。<template> <div id="app"> <div> <div>{{msg}}</div> <child-one></child-one>...原创 2019-09-27 17:31:01 · 201 阅读 · 2 评论 -
Flex布局实现div内部子元素垂直居中
1、Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex ...原创 2019-01-04 10:56:25 · 18539 阅读 · 0 评论 -
input复选checkbox多选删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <link r原创 2018-03-18 23:59:25 · 2245 阅读 · 2 评论 -
select实现三级联动
一、先练习一下select option标签的使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0原创 2018-03-17 11:50:44 · 6738 阅读 · 1 评论 -
前端jquery实现商城sku效果
商城项目的两大核心,商品sku和订单,其中sku的实现还是有点复杂,尤其是在处理元素的监听事件,通过规格属性的id组合获取单品商品信息。一般思路是现获取sku的规格和属性,动态创建dom元素,然后请求后台接口数据获取单品,此文已本地json数据模拟全sku的情况,如果非全码的情况下,罗机处理非常复杂,还需考虑商品单品不存时候,元素置灰,不可点击得人情况:1、css...原创 2018-08-28 16:34:36 · 4881 阅读 · 2 评论 -
vue路由传参
vue路由跳转页面传参1、使用路由url携带参数传递 主页Main.vue模板脚本<template> <div class="hello"> <h1>{{msg}}</h1> <h2>Essential Links</h2> <div @click="toSlotComo()">Go to SlotTest</div> </div></t...原创 2020-08-21 23:06:06 · 126 阅读 · 2 评论 -
npm安装yarn
Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载, 同时利用并行下载以最大化资源利用率,安装速度快。有时候使用npm构建项目,拉取第三方库的时候很慢不稳定,而yarn就是解决这一痛点的利器。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。Yarn 会通过算法校验每个安装包的完整性。原创 2024-01-23 13:06:00 · 3996 阅读 · 0 评论 -
node多版本管理工具nvm安装
点击可执行程序下一步即可,中间有两个选择目录的地方需要注意。这里安装15.14.0和18.16.0两个版本用于测试。官网下载适合自己电脑操作系统的可执行文件。查看node版本可以看到当前的版本为18.16.0。这两个路径都可以根据自己的实际需要选择。通过nvm use可以随意切换本地node版本环境。如图所示表示安装成功。原创 2024-01-25 16:29:46 · 582 阅读 · 0 评论