- 博客(109)
- 收藏
- 关注
RSS订阅原创 CSS3新增的属性
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：1.CSS3边框：border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。
2022-03-01 16:39:23
6367
原创 CSS技巧（一）：清除浮动
什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。引用W3C的例子，news容器没有包围浮动的元素。.news { background-color: gray; border: solid 1px black;
2022-03-01 16:11:20
4710
原创 CSS 关键字 initial、inherit 和 unset
经常会碰到，问一个 CSS 属性，例如 position 有多少取值。通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个极少人了解的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值：initialinheritunsetrevert{ position: initial; position: inherit; position: unset /* CSS Cascading and Inheritance
2022-02-13 14:43:22
563
原创 [class^=“ico-“],[class*=“ico-“]的含义和区别
[class^=“ico-”] 这个是选择class以ico-开始的对象 如 class=“ico-pic”[class*=“ico-”] 这个是选择class中含有ico-的对象 如 class=“pic-ico-pic”[class^="ico-"],[class*="ico-"] {display: inline-block;width: 48px;height: 48px;*margin-right: .3em;line-height: 48px;vertical-align:.
2022-02-13 14:15:22
347
原创 @keyframes详解
一、transform 和@keyframes动画的区别：@keyframes动画是循环的，而transform 只执行一遍.二、@keyframesCSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。通过 @k
2022-02-13 13:54:19
38167
原创 URL 与 URI的区别
URL 与 URI很多人会混淆这两个名词。URL：(Uniform/Universal Resource Locator 的缩写，统一资源定位符)。URI：(Uniform Resource Identifier 的缩写，统一资源标识符)（代表一种标准）。关系：URI 属于 URL 更高层次的抽象，一种字符串文本标准。就是说，URI 属于父类，而 URL 属于 URI 的子类。URL 是 URI 的一个子集。二者的区别在于，URI 表示请求服务器的路径，定义这么一个资源。而 URL 同时说.
2022-02-12 17:57:47
403
原创 为什么使用v-for时必须添加唯一的key?
v-for中的key使用v-for更新已渲染的元素列表时,默认用 就地复用 策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;举个?const list = [ { id: 1, name: 'test1', }, { id: 2, name: 'tes
2022-02-10 15:21:46
267
原创 el-table 删除行数据(犯错篇)
<el-table :data="dataList.data" style="width: 100%" stripe border :key="key" v-loading="loading" :max-height="550" > <el-table-column prop="id" label="ID" align="center" width="6
2022-01-26 11:04:13
2146
1
转载 前端Vue核心
前端Vue核心开发一个前端模块可以概括为以下几个步骤：（1）写静态页面、拆分为静态组件；（2）发请求（API）；（3）vuex（actions、mutations、state三连操作）；（4）组件获取仓库数据，动态展示；1、vue文件目录分析public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默
2022-01-21 14:29:35
346
转载 Vue技巧
1、将一个 prop 限制在一个类型的列表中我们在使用 prop 时，可能会有时候需要判断该 prop 是否在我们规定的范围内（或者说规定的值内），此时可以使用 prop 定义中的 validator 选项，将一个 prop 类型限制在一组特定的值中。export default { name: 'Test', props: { name: { type: String, }, size: { type: String, validat
2022-01-20 23:27:46
519
转载 认识Vue的过程
一. 认识Vue.js1.1. 认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全称是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；1.2. Vue的安装Vue是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。那么安装和使用Vue这个JavaScript库有哪些方
2022-01-12 12:07:35
126
原创 uniapp 微信小程序全局分享（二）
单个页面有定制化分享业务时，在需要分享的页面加入onShareAppMessage和onShareTimeline这两个方法，而onShareAppMessage这个分享到好友方法需要页面路径path，title标题，以及imageUrl封面，onShareTimeline分享到朋友圈方法需要页面路径及参数，用query字段接收，以及title标题和imageUrl封面。页面路径和参数可以根据页面栈获取，为此我们可以封装一个获取页面路径及参数的方式，方便各个需要分享功能的页面调用。以下是分享页sha.
2022-01-06 17:07:25
1614
原创 JavaScript高阶函数的使用、v-model、组件化
JavaScript高阶函数的使用、v-model、组件化JavaScript 高阶函数的使用1、 filter函数的使用filter中的回调函数有一个要求：不许返回一个boolean值（1）true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中（2）false：当返回false时，函数内部会过滤调这次的nconst nums = [10, 20, 111, 222, 333, 40, 50]let newNums = nums.filter(function (n) {
2022-01-06 13:39:16
779
原创 uniapp 微信小程序全局分享（一）
在全局配置文件 main.js 文件中配置 全局mixin分享业务逻辑export default { // 转发 onShareAppMessage(res) { return { path:'/pages/welcome/welcome', success(res) { uni.showToast({ title: '分享成功' }) }, fail(res) { uni.showToast({ title: '分享失
2022-01-05 17:25:37
790
转载 Vue中native的用法
Vue中native的用法nativenative在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：例子四个按钮，分别是普通标签不加native和加native，自定义标签不加native和加native<!DOCTYPE html><html><h
2022-01-05 14:41:19
3000
转载 vue2的12种组件间通信方式，父传子，子传父，兄弟传值
1、props传递数据在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed// Parent.vue 传送<template> <child :msg="msg"></child></template>// Child.vue 接收exp
2022-01-05 14:22:10
383
转载 vue中实现微信支付
vue实现微信支付有三种方式，第一种方式是PC端支付，第二种方式是H5支付，第三种方式是微信公众号支付。其中的pc端支付，其实就是调用后端的接口，给后端传一些签名校验，后端直接返回一个支付的二维码图片，H5支付就是手机浏览器的支付，而微信公众号里面的支付我们用的是JSAPI支付，JSAPI支付的调用需要在微信商户平台申请及配置，只有开通了JASPI才有权限实现H5支付。一、pc端支付关于pc端的支付，这块儿是由后端直接返一个支付二维码的图片，前端做展示就好了，关于支付成功的状态，通过轮询订单详情的一个接
2022-01-05 11:32:38
13033
原创 css实现页面遮罩
点击页面表格数据实现一个页面弹出，可以用遮罩来实现（#cover,#modal,可实现遮罩效果）<template> <el-row v-if="contractInfo.contract.cert_list && contractInfo.contract.cert_list.length"> <el-col :span="19">
2022-01-04 17:25:30
2013
原创 vue-router(二)
vue项目中如何封装一个路由，使vue路由代码更加简洁index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter)const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes}) //全局
2021-12-31 16:32:42
370
原创 vue-router(一)
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路
2021-12-31 11:35:13
101
原创 elementUI Upload 上传组件
在你在vue页面上传文件时，你需要上传多种类型的文件，或者固定格式的文件，这时你需要对elemenUI中upload组件上传文件格式做一些限制<template> <div class="upload-item-one"> <el-upload class="upload-demo" :accept="accepts" ref="upload" :action="`${axios.defaults.baseURL}
2021-12-30 15:00:56
209
转载 vue中使用vuex
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。那么，我们一起来看看vue项目怎么使用它吧。一、适合初学者使用，保存数据以及获取数据1、在store文件夹，新建个index.js文件在新建的js文件中写入如下代码:import Vue from "vue"import Vuex from "vuex" Vu
2021-12-30 10:53:35
158
转载 JS 基础语法
目标了解 JS 基础语法 1.了解掌握数学计算相关Api 2.了解掌握数组相关Api 3. 了解对象相关知识点 4. 掌握箭头函数的用法 5.掌握变量传递的原理 6.了解异步编程的基础数学计算Math 是一个内置对象，它拥有一些数学常数和数学函数方法，这里我们介绍几个常用的API。PIconsole.log(Math.PI) // 3.141592653589793圆周率常数，可以直接引用floor返回小于一个数的最大整数console.log(Math.floor(3.
2021-12-29 14:45:53
68
原创 vue封装axios的request请求
一、封装axiosimport axios from 'axios'import { getToken,removeToken } from '@/utils/auth'// 创建axios实例 axios.create({ baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url timeout: 12000 // 请求超时时间})//
2021-12-29 11:28:34
1077
原创 全局过滤器
全局过滤器当你在vue页面中经常需要处理一些后台返回的一些数据中，全局过滤器是一个比较好的选择，通过过滤器，你可以得到你想要的展现数据。1.首先你封装一个公共的过滤器方法，挂在到全局，给页面使用。filter.js// 获取性别const getSexStatus = (status) => status == 2 ? '男':'女'// 标签、按钮颜色const getColor = (color) =>{ switch(parseInt(color)%4){ ca
2021-12-28 15:24:06
1007
原创 非常值得让大家收藏的JavaScript高级-ES6
JavaScript高级-ES6一、ECMAScript简介·ECMA（European Computer Manufactures Association）中文名称为欧洲计算机制造商协会·ECMAScript是由ECMA国际通过ECMA-262标准化的脚本程序设计语言·Ecma国际制定了许多标准，而ECMA-262只是其中一个，所有标准列表查看http://www.ecma-international.org/publications/standards/Standard.htm 二、EC
2021-12-27 17:31:45
116
转载 vue生命周期解析
vue生命周期解析借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。语述了解之前，我们先贴上一张官网的生命周期图，从图上，我们再一步一步来理解vue生命周期我们先简单的来解说这张图，然后再通过例子来详看首先，从图上，我们可以看出，他的一个过程是new Vue()实例化一个vue实例，然后init初始化
2021-12-27 15:33:08
155
转载 小程序-原生及vue
小程序必背-13.小程序小程序官网：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html全局配置全局配置在根目录下的app.json文件 pages:创建文件和文件夹的 window:全局的默认窗口表现 tobBar:创建小程序的上边栏或下边栏标签 <view>:-><div> <text>:-><span>
2021-12-27 09:36:22
1366
原创 js判断对象是否为空对象的几种方法
js判断对象是否为空对象的几种方法1.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == “{}”);alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}return true;}alert(b());//true3.jquery的isE
2021-12-22 15:23:46
191
原创 前端如何优化
前端如何优化加载时的优化第一点：减少HTTP请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等等一系列复杂的过程。当你请求较多时，直接体现在了消耗性能上面，这就是为什么要将多个小文件合并为一个大文件，从而减少 HTTP 请求次数的原因。第二点：使用服务器端渲染我们知道，当客户端渲染时，他是获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。这个在无形之
2021-12-22 11:23:42
136
原创 JavaScript中this的指向
JavaScript中this的指向最简单的this在全局指向的是什么呢？全局指向的是window，不过在开发过程中this很少在全局使用，一般都是在函数内的this有几种绑定规则？绑定一：默认绑定// 1.案例一: function foo() { console.log(this) } foo()//window // 2.案例二:function foo1() { console.log(this)} function foo2() { console.l
2021-12-20 11:36:03
66
原创 HTML浮动以及清除方法
HTML浮动以及清除方法浮动造成的影响：父元素高度塌陷：父元素没有设置高，子元素浮动，脱离了文档流，不占位置，不能把父元素撑开，导致父元素高度塌陷，会影响后面版块的布局。方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
2021-12-20 11:13:19
199
原创 elementUI input框限制输入数字且可以输入小数点
elementUI中表单校验1.限制input输入框中只能输入数字，并且能输入小数点，超过两位小数点提示数据格式不正确<template> <el-input v-model="form.offer_price" size="mini" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入出价" maxlength="15" clearable @b
2021-12-17 16:48:20
3002
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人