前端
关注
分享
扫一扫
统计前端的各种知识点
张振涛，代码界的搬运工
这个作者很懒，什么都没留下…
展开
-
vue项目中实现点击回顶部的效果
<template> <div class="center"> <div class="btnTop" v-if="btnFlag" @click="backTop()">回顶部</div> </div></template><script> import Vuex from "vuex"; export default { data(){ .原创 2022-01-23 01:23:00 · 193 阅读 · 0 评论 -
清除浮动的方式
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题第一种：额外标签法。在最后一个浮动标签后，新加一个标签，给其设置clear：both；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-27 19:57:27 · 106 阅读 · 0 评论 -
页面动画效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css" /> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg">.原创 2022-02-27 20:20:28 · 201 阅读 · 0 评论 -
数组去重的三种方法
第一种利用Map数据结构去重创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果function a(arr) { let map = new Map(); let array = new Array(); // 数组用于返回结果 for (let i = 0; i < ar...原创 2022-02-08 14:18:04 · 720 阅读 · 0 评论 -
盒模型详解
1.什么是盒模型在html任意一个元素都可以看作为一个盒子，而这个盒子被分为内容区（content），填充区（padding）, 边框区（border）, 外边距（margin）四个部分组成2.盒子模型有哪两种标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）原创 2022-02-21 11:25:13 · 266 阅读 · 0 评论 -
vue固化插件
下载 npm i vuex-persist --save引入import vuexPersist from "vuex-persist";使用export default new Vuex.Store({ state: { userlist: [], }, mutations: { setuser(state, val) { state.userlist.push(val); }, }, actions: {}, modules: {原创 2022-01-12 16:22:59 · 268 阅读 · 1 评论 -
vue项目中的拖拽
<template> <div class="drag"> <div ref="element" class="content" v-drag draggable="false"> <p>文字网页</p> </div> <div style="height:2000px;width:100%"></div> </div>.原创 2022-01-12 13:31:01 · 282 阅读 · 0 评论 -
小程序es6promise的封装
1.在项目的根文件夹中创建一个文件夹 request里面新建一个js文件//cons一个请求的公共部分const baseUrl = 'https://api-hmugo-web.itheima.net/'const request = (params) => { return new Promise((resolve,rejects)=>{ wx.request({ url: baseUrl + params.url, ..原创 2021-12-08 10:17:36 · 156 阅读 · 0 评论 -
JS中数组和字符串的方法大全
一、ECMScript 3的Array.prototype中定义的方法1、join()定义：将数组中所有的元素都转化为字符串拼接在一起，返回最后生成的字符串。注意：不改变原数组var a = [1,2,3];console.log(a.join()); //1,2,3 默认使用逗号分隔console.log(a.join("")); //123 转化为字符串的常用方法console.log(a.join("-")); //1-2-3 自定义...原创 2022-01-04 17:19:54 · 515 阅读 · 0 评论 -
axios的封装
1.下载好axios npm i axios2.src问价夹中创建一个文件夹问价夹中,index.js是封装的axios,home是首页的所有请求index.js里面是//1.首先引入 axiosimport axios from 'axios'//2.创建一个实例const api = axios.create({ baseURL: '', // 所有请求的公共地址部分 timeout: 3000 // 请求超时时间 这里的意思是当请求时间超过5秒...原创 2021-12-08 09:48:49 · 357 阅读 · 0 评论 -
vue项目的初始化样式
/* http://meyerweb.com/eric/tools/css/reset/ *//* v1.0 | 20080212 */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,sm.原创 2021-11-12 19:27:13 · 565 阅读 · 0 评论 -
vuex固化数据插件的用法
刷新页面，vuex里面数据丢失清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化1.下载插件//需要先下载插件npm install vuex-persistedstate --save2.引入 使用//在vuex初始化时导入插件import persist from 'vuex-persistedstate'//并使用export default new Vuex.Store({ state: { .原创 2021-11-23 08:43:22 · 546 阅读 · 0 评论 -
css实现吸顶
<div class="topbox"> 需要吸顶的部分</div>//下面样式.topbox { position: sticky; top:0; z-index:999; height: 30px; width: 100%; text-align: center; background:green;}原创 2022-01-23 01:28:17 · 491 阅读 · 0 评论 -
vue实现移动端上拉加载更多
<!-- 容器 --> <div ref="cont" @scroll.passive="scrollEvent"></div>export default { name: "Demo", data() { return { flag :0, // 定义一个flag变量 充当节流阀 wait:1000, // 定义一个wait变量 延迟多长时间触发 }; }, methods...原创 2022-03-04 07:52:26 · 1039 阅读 · 0 评论 -
vue+vant移动端适配
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值1.安装依赖yarn add amfe-flexible//或者使用npm i amfe-flexible然后在 main.js 中加载执行该模块：import 'amfe-flexible'2.安装postcss-pxtorem依赖：原创 2022-02-24 13:45:18 · 329 阅读 · 0 评论 -
vue跨域
// 这个文件是vue的配置文件// 一些额外的配置都放在这里// 比如 跨域 自动打开浏览器 输出目录module.exports = { publicPath: "./", devServer: { open: true, proxy: "http://106.15.179.105:3000/", // 可以直接设置跨域的地址 // proxy: { // "/api": { // target: "https://sug.s.原创 2022-02-06 22:43:59 · 332 阅读 · 0 评论 -
vuex的工作流程
每一个 Vuex 应用的核心就是 store，里面又包括:（1）state（数据）：用来存放数据源，就是公共状态;（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；（3）actions（事件）：要执行的操作，可以进行同步或者异步事件（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块拥有本身的 state、原创 2022-02-08 17:15:07 · 3426 阅读 · 0 评论 -
文本超出显示省略号
1.单行overflow:hidden; //超出隐藏text-overflow:ellipsis; //溢出显示用省略号white-space:nowrap; //溢出不换行2.多行overflow: hidden;//超出隐藏text-overflow: ellipsis;//溢出显示用省略号display:-webkit-box; //作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式 从上到下垂直.原创 2021-12-08 23:04:55 · 325 阅读 · 0 评论 -
vue中如何引入自定义的组件（引入组件的懒加载）
<script> export default{ components:{ Header:() => import('@/components/header.vue') } }</script>原创 2022-03-20 09:38:29 · 1571 阅读 · 0 评论 -
前端javaScript高频面试题——持续更新
前端javaScript高频面试题原创 2022-10-31 17:48:02 · 446 阅读 · 0 评论 -
xhr如何发起请求
xhr如何发起请求原创 2022-11-17 15:04:46 · 1674 阅读 · 0 评论 -
i5ting_toc操作方法
i5ting_toc的使用流程原创 2022-04-25 09:55:46 · 413 阅读 · 0 评论 -
将一维数组按照指定长度转换成二维数组
将一维数组按照指定长度转换成二维数组原创 2022-09-05 15:21:21 · 337 阅读 · 0 评论 -
6位验证码输入框
6位验证码输入框原创 2022-11-08 16:03:47 · 951 阅读 · 0 评论 -
vue项目中实现浏览器全屏 - screenfull
浏览器中自带全屏功能，不过有兼容性问题，所以改用插件document.documentElement.webkitRequestFullScreen()使用screenFull插件来提供全屏功能安装插件npm i screenfull使用插件在全屏组件中引入 import screenfull from 'screenfull'给icon 添加点击事件<el-icon size="18px" @click="magnify">&l...原创 2022-04-16 10:55:25 · 1798 阅读 · 2 评论 -
element-plus表格中的formatter时间格式化
element-plus表格中的formatter时间格式化原创 2022-04-13 09:36:19 · 6241 阅读 · 3 评论 -
element-plus选中表格后删除按钮为可用状态，没有选中为禁用状态
element-plus选中表格后删除按钮为可用状态，没有选中为禁用状态原创 2022-04-13 15:38:52 · 867 阅读 · 0 评论 -
字面量创建对象和new创建对象有什么区别，new内部都实现了什么，手写一个new
字面量：字面量创建对象更简单，方便阅读 不需要作用域解析，速度更快new内部：创建一个新对象 使新对象的__proto__指向原函数的prototype 改变this指向（指向新的obj）并执行该函数，执行结果保存起来作为result 判断执行函数的结果是不是null或Undefined，如果是则返回之前的新对象，如果不是则返回result手写new: // 手写一个new function myNew(fn, ...args) { ...原创 2022-03-20 11:31:54 · 507 阅读 · 0 评论 -
给数组中的每个对象添加属性
给数组中的每个对象添加属性原创 2022-06-24 14:45:09 · 349 阅读 · 0 评论 -
初探 vue 2.0 自定义组件的 v-model
<template> <div class="home"> <my-input :placeholder="'请输入内容'" v-model="inpval"></my-input> {{inpval}} </div></template><script>import myInput from '../components/myInput.vue'export default { n.原创 2022-03-13 20:18:16 · 781 阅读 · 0 评论 -
初探 vue 3.0 自定义组件的 v-model
<template> <div class="home"> <my-input v-model="inpval" :placeholder="'请输入内容'"></my-input> {{inpval}} </div></template><script>import {ref} from 'vue'import myInput from '../components/myInput.vu.原创 2022-03-13 20:26:22 · 1470 阅读 · 2 评论 -
js数组中如何过滤empty 空值
js数组中如何过滤empty 空值原创 2022-07-14 12:02:23 · 828 阅读 · 0 评论 -
前端html,css高频面试题-持续更新中
html,css面试题原创 2022-11-02 17:57:51 · 538 阅读 · 0 评论 -
vue2 pc端调起支付二维码qrcode
什么是 QRCode.js？QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。1.qrcode翻译过来就是二维码的意思2.下载插件npm iqrcode<template> <div class="home"> <canvas ref="canvas"></canvas> <button @click.原创 2022-04-28 09:07:44 · 1265 阅读 · 0 评论 -
CSS中cursor的属性讲解
//样式里面加上cursor: pointer;原创 2022-04-07 19:47:32 · 1455 阅读 · 0 评论 -
html和JavaScript------实现省份二级联动
省份二级联动，city.js原创 2022-11-07 17:34:21 · 191 阅读 · 0 评论 -
js获取url中的参数
javascript获取url中的参数原创 2022-11-17 11:26:10 · 161 阅读 · 0 评论 -
vue脚手架更新
检查全局vue脚手架版本 vue -V升级vue脚手架 npm update -g @vue/cli安装vue脚手架 npm i -g @vue/cli卸载vue脚手架 npm uninstall -g @vue/cli原创 2022-03-19 08:56:07 · 2286 阅读 · 0 评论 -
Jquery模仿出打字效果出来
我们定好一段文字，然后让文字一个字一个字出来，像打字的效果一样，下面代码直接复制，然后直接看效果吧。原创 2023-12-18 15:15:24 · 575 阅读 · 0 评论 -
jquery实现中文转拼音
【代码】jquery实现中文转拼音。原创 2023-04-02 22:21:00 · 652 阅读 · 0 评论