VUE
每周练习一个例子,总结一些知识点
无物勿吾
项目经理、全栈工程师,丰富的前端开发经验。
展开
-
配置alias(设置别名@)
【代码】配置alias(设置别名@)原创 2024-01-31 11:02:28 · 1273 阅读 · 0 评论 -
css实现虚线和点的平移动画
【代码】css实现虚线和点的平移动画。原创 2023-12-15 14:51:30 · 542 阅读 · 0 评论 -
封装axios实现基础网路请求
【代码】封装axios实现基础网路请求。原创 2023-12-13 10:22:18 · 356 阅读 · 0 评论 -
二维码生成
1,uni-app的二维码生成器https://www.npmjs.com/package/tki-qrcode原创 2021-06-05 09:11:48 · 213 阅读 · 0 评论 -
处理uni-app打包webview的app返回键处理
<template> <view class="content"> <uni-nav-bar class="nav-bar" fixed :status-bar="true" :left-icon="back" :left-text="leftText" @clickLeft="onLeft" color="#ffffff" background-color="#2F78E4"> <view class="title">{{ title ? ti.原创 2021-05-21 15:10:55 · 1736 阅读 · 0 评论 -
css省略号...的实现
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。overflow: hidden;text-overflow:ellipsis;white-space: nowrap;接下来重点说一说多行文本溢出显示省略号,如下。display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hid原创 2021-01-05 14:47:09 · 259 阅读 · 0 评论 -
图文混排模板HTML
后台使用的图文混排插件如:editor、Markman等,得到的页面,前端使用v-html显示的不美观,所以有时候需要前端自己出一个,后端替换文字和图片部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />原创 2020-10-14 21:16:54 · 3693 阅读 · 0 评论 -
微信公众号、微信小程序调用第三方api(百度人脸实名认证),设置回调页面,页面交互处理
使用场景在做人脸识别认证时,使用的是H5版,需要传给插件两个回调页面,一个成功认证后回调,一个失败后回调。这两个页面是要放在服务器的,此时页面与手机端的页面不好做数据和功能交互,于是就需要下面的处理方式。首先是服务器需要的回调页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatibl原创 2020-10-14 20:54:34 · 3970 阅读 · 2 评论 -
Web面试题整理
问:Doctype作用是什么? 严格模式与混杂模式如何区分?它们有何意义?答:Doctype位于整个文档的最前面,用于告知浏览器解析器用什么文档类型来解析该文档;严格模式:使得排版和JS运作以浏览器支持的最高标准运行混杂模式:使得排版和JS运作以向后兼容的方式运行,防止比较老的站点无法工作的问题;问:tcp三次握手,一句话概括答:客户端发起请求连接服务端确认,服务端也发起连接客户端确认,每次握手的作用:第一次握手:服务端只可以确认 自己可以接受客户端发送的报文段;第二次握手:客户端可以确原创 2020-09-21 16:49:07 · 180 阅读 · 0 评论 -
web开发工具包
http://youmightnotneedjquery.com/1,动画库Velocity.js move.js animate.css2,正则表达式https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24https://c.runoob.com/front-end/854原创 2020-09-21 16:19:31 · 122 阅读 · 0 评论 -
pc浏览器的适配
1,窗口尺寸var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var hight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;2,原创 2020-09-21 15:37:03 · 503 阅读 · 0 评论 -
vue3.0本地调试,设置代理(解决跨域)
1,在项目根目录创建vue.config.jsmodule.exports = { devServer: { open: true, proxy: { '/api': { target: 'http://localhost:3000',//要代理的本地api地址,也可以换成线上测试地址 changeOrigin: true,//允许跨域原创 2020-09-15 20:25:26 · 4706 阅读 · 1 评论 -
Ecma Script 6入门
1,关于let和var的区别,请先看下面的实例var a = [];for(var i = 0 ; i < 10 ; i++){ a[i] = function (){ console.log(i); };}a[6]();//10上面的代码,变量i是var生命的,在全局内都有效,所以每循环一次,新的i值都会覆盖旧值,导致最后执行方法时,输出的都是最后一轮的i值。var a = [];for (let i = 0 ; i < 10 ; i++原创 2020-08-05 09:20:03 · 194 阅读 · 0 评论 -
BFC
BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。在解释什么是BFC之前,我们需要先知道Box、Formatting Context的概念。Box:css布局的基本单位Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属转载 2020-08-03 15:10:22 · 92 阅读 · 0 评论 -
vue-router路由的元信息meta
使用场景:有些页面需要登录判断,在路由配置的时候,在meta对象属性中加上需要登录的标识{ path: '/index', name: 'index', component: Index, meta: { login_require: false },},{ path: '/orders', name: 'orders', component: Orders, meta: { login_require: true }, children原创 2020-07-30 09:33:19 · 297 阅读 · 0 评论 -
box-shadow属性详解
#### 1.box-shadow属性语法>box-shadow 属性接受值最多由五个不同的部分组成。 >box-shadow: offset-x offset-y blur spread color position;>换句说: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }>不像其它的属性,比如 border,它们的接受值可以被拆分为一系列子属性,box-shadow 属性没...原创 2020-07-30 08:34:27 · 999 阅读 · 0 评论 -
css实现menu菜单
效果如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>menu菜单</title> <style type="text/css" media="all"> #menu{ display: block; box-siz...原创 2020-07-29 14:51:04 · 1190 阅读 · 0 评论 -
小程序引入中文字体
做小程序的时候,有时候会遇到,设计的UI中出现了特殊的字体,而单独的导入一个中文字体库是很大的,而且容易经常加载失败。这个时候我们可以想办法将字库中用到的字单独提取出来,这样就会减少体积,保证使用了。具体步骤如下:1)在线提取字体https://www.fontke.com/tool/subfont/比如上图,我的小程序只需要7个字,单独提取出来只有几K2)再到这个网站https://transfonter.org/转成base64只有十几k3)在小程序中引入使用即可原创 2020-07-21 20:35:41 · 3786 阅读 · 0 评论 -
CSS 百分比 margin & padding
转载:https://swordair.com/css-persentage-margin-and-padding/?utm_source=tuicool&utm_medium=referralmargin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度。引用标准(2.1)原来的表达:The percent.转载 2020-07-11 07:57:58 · 197 阅读 · 0 评论 -
网页布局高度不满时,实现布局置底
问题:如果网页内容不够长,让网页的footer部分始终在浏览器窗口的底部。方法一:将内容部分的margin-bottom设为负数(兼容所有浏览器)<div class="wrapper"> </div><div class="footer">footer</div>html, body { margin: 0; padding: 0; height: 100%;}.wrapper { min-height: 10..原创 2020-07-11 07:47:00 · 635 阅读 · 0 评论 -
JavaScript基础知识2
7,在 JavaScript 编程中,函数表达式是一种非常有用的技术。使用函数表达式可以无须对函数命名, 从而实现动态编程。匿名函数,也称为拉姆达函数,是一种使用 JavaScript 函数的强大方式。以下总结 了函数表达式的特点。 函数表达式不同于函数声明。函数声明要求有名字,但函数表达式不需要。没有名字的函数表 达式也叫做匿名函数。 在无法确定如何引用函数的情况下,递归函数就会变得比较复杂; 递归函数应该始终使用 arguments.callee 来递归地调用自身,不要使用函原创 2020-07-05 09:54:20 · 135 阅读 · 0 评论 -
html使用JavaScript动态添加资源
参考下面的示例代码:EventUtil.addHandler(window, "load", function(){ var script = document.createElement("script"); EventUtil.addHandler(script, "readystatechange", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event);原创 2020-07-04 20:54:04 · 361 阅读 · 0 评论 -
浏览器兼容事件处理
要保证处理事件的代码能在大多数浏览器下一致地运行,只需关注冒泡阶段。 第一个要创建的方法是 addHandler(),它的职责是视情况分别使用 DOM0 级方法、DOM2 级方 法或 IE 方法来添加事件。这个方法属于一个名叫 EventUtil 的对象,本书将使用这个对象来处理浏览 器间的差异。addHandler()方法接受 3 个参数:要操作的元素、事件名称和事件处理程序函数。 与 addHandler()对应的方法是 removeHandler(),它也接受相同的参数。这个方法的职责原创 2020-07-04 20:35:03 · 154 阅读 · 0 评论 -
JavaScript知识系列1
1,把 JavaScript 插入到 HTML 页面中要使用<script>元素。使用这个元素可以把 JavaScript 嵌入到 HTML 页面中,让脚本与标记混合在一起;也可以包含外部的 JavaScript 文件。而我们需要注意的地方有: 在包含外部 JavaScript 文件时,必须将 src 属性设置为指向相应文件的 URL。而这个文件既可 以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。 所有<script>元素都会按照它们在页原创 2020-07-04 10:21:28 · 89 阅读 · 0 评论 -
Mac下node和npm安装及环境配置
一,官网下载地址:http://nodejs.cn/download/二,安装双击安装包,一直下一步,直到最后一步,记住你的安装路劲,一会环境配置需要。三,环境配置打开命令行工具:输入:node -v输入:npm -v现在的新版本安装后基本上不用配置了...原创 2020-06-07 12:55:38 · 6392 阅读 · 0 评论 -
vue引入微信jssdk,完美实现
1.安装SDKnpm install weixin-js-sdk --save2.微信分享的封装工具类(wxShare.js)/* eslint-disable */import Vue from 'vue';import wx from 'weixin-js-sdk';//存储服务器授权链接 const jsSDKAuth = 'XXX/wx_jssign_package.json'; //存储各个链接的签名信息const signMap = new Map(); // 设置默原创 2020-05-18 15:48:56 · 14794 阅读 · 1 评论