![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 52
aら 淼
这个作者很懒,什么都没留下…
展开
-
ppt插入html(用office而不是wps)
用Microsoft Office PowerPoint打开ppt,插入html原创 2022-07-20 14:21:00 · 7141 阅读 · 7 评论 -
js 实现拖拽滚动、滚轮缩放元素函数和案例
js拖动滚动、滚轮缩放元素原创 2022-04-15 17:31:04 · 2582 阅读 · 0 评论 -
Object defineProperty
Object defineProperty一、简介1. 属性表2.互斥性3. get、set的简单使用二、深入三、应用一、简介defineProperty可以详细的配置一个对象的属性的特性和值赋值的两种方式:var test = {}// 第一种test.kind1 = 1; // var test = {kind1:1}// 第二种Object.defineProperty(test,"kind2",{ value:2})// ===========================原创 2022-03-23 13:40:24 · 1429 阅读 · 0 评论 -
vue引入postcss-plugin-px2rem,px转rem
npm install --save-dev postcss-plugin-px2remvue.config.jsmodule.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 16, //换算基数, 默认100 ,1 / fontsize(html) = x原创 2021-06-28 12:12:18 · 680 阅读 · 0 评论 -
vue集成iconfont、fontawesome和图标选择器(含fontawesome、el-icon和加入的iconfont)
一、将图标加入购物车阿里巴巴矢量图标库:二、新建(添加至)项目右上角的购物车 → 添加至项目 → 进入到项目页面三、下载后项目中引入点击下载至本地,解压缩包,只需要这四个文件此时.ttf和.woff文件已经保存了前面步骤的图标,将其复制于 src/assets/iconfont (看个人爱好)然后main.js全局引入这个css就行// 引入自定义iconfontimport "@/assets/iconfont/iconfont.css";在iconfont.css文件中原创 2021-06-23 10:06:41 · 2644 阅读 · 0 评论 -
vue element form中input等组件不能输入值
<el-input v-model="form[item.prop]" />此时form只是一个空对象{},当主动设置 form.inputVal = “” 后input却无法输入值,这是因为属性没有get和set,需要用vue内置属性设置:this.$set(this.form, item.prop, "");...原创 2021-04-23 17:30:19 · 983 阅读 · 0 评论 -
js正则判断输入密码强度
onChange(val) { this.mark = new Set( val .replace(/[a-z]+/g, "a") .replace(/[A-Z]+/g, "b") .replace(/[0-9]+/g, "c") .replace( /[\`\~\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]\\\;\'\,\.\/\{\}\|...原创 2021-04-16 09:55:30 · 294 阅读 · 1 评论 -
vue使用process.env搭建自定义运行环境
一、vue-cli项目下默认有三种模式:development:在 vue-cli-service serve 时使用。production:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。test:在 vue-cli-service test:unit 时使用。对应的 NODE_ENV 值分别为 development、production、test。二、可以通过环境文件来指定环境变量,环境文件有一下几个类型:.env: 在所原创 2021-04-12 17:01:17 · 4739 阅读 · 0 评论 -
axios把post的RequestPayload格式转为formdata
方法一:配置transformRequest,缺点:其他请求格式的数据也会被重新格式话const service = axios.create({ //设置axios为form-data 方法1 // headers: { // post: { // "Content-Type": "application/x-www-form-urlencoded" // }, // get: { // "C原创 2021-03-26 16:43:00 · 1204 阅读 · 0 评论 -
vue3打包后无法加载页面
1、配置输出路径// vue.config.jsmodule.exports = { publicPath: './'}2、不能使用history路由// ...export default new Router({ // mode: 'history', routes: [ { path: '/', name: 'home', component: Home } ]})...原创 2021-03-17 14:25:23 · 803 阅读 · 0 评论 -
js滚动条滚动到指定元素
this.$nextTick(() => { let item = document.getElementById("card-item"); // 指定的元素 let wrapper = item.parentElement.parentElement; // 其父元素 - 必须是产生滚动条的元素 // el.focus(); // 元素聚焦法定位 , 有时定位不全, 可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的元素需要主动原创 2021-03-04 17:38:06 · 9198 阅读 · 1 评论 -
自定义v-drag指令(横向拖拽滚动)
Vue.directive('drag', { // 钩子函数,被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。 inserted: (el, binding, vnode, oldVnode) => { console.log(el, binding, vnode, oldVnode) let drag = el; // 要拖拽的元素...原创 2021-03-04 17:01:38 · 1038 阅读 · 1 评论 -
让动画每次重复前都有延迟
动画不从0%开始即可@keyframes textmove { 20% { transform: translateX(0); } 100% { transform: translateX(-100%); }}原创 2021-03-02 11:17:09 · 422 阅读 · 0 评论 -
内联元素居中
父元素:height:100px;line-height:100px; // 与高相同text-align:center;子元素:display:inline;vertical-align: middle;适用图片、文字转载 2021-01-26 13:45:56 · 149 阅读 · 0 评论 -
vue 监听路由变化
1.watch监听$route($router的对象)// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},===========================================================// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console原创 2021-01-11 11:17:04 · 1834 阅读 · 2 评论 -
vue-router query,parmas,meta传参
1.query,显示在导航栏?后,相当于get请求传参this.router.push({path:'/login',query:{ 'redirect':'/home'}})this.router.push({name:'Login',query:{ 'redirect':'/home'}})2.parmas,不会显示,相当于post请求传参this.router.push({name:'Login',parmas:{ 'redirect':'/home'}}) // 目前测试没有query不行原创 2021-01-11 11:08:09 · 1881 阅读 · 0 评论 -
vue mock模拟后台接口数据
一、Json server轻量级,将已有的json文件跑在服务器上供前端调用npm install -g json-server启动JSON数据服务器:json-server --watch json文件名或json-server --watch json文件 --port 指定端口二、Mock 服务很多前端框架,如 Reactor、 Angular、Vue 等都带有 mock 服务,将已有的json文件跑在服务器上供前端调用。支持 GET / POST / PUT支持返回 j原创 2021-01-08 15:16:13 · 415 阅读 · 0 评论 -
Vuex使用总结
仓库主仓库// store/index.jsimport Vue from "vue";import Vuex from "vuex";// 引入子仓库import home from './modules/home.js'Vue.use(Vuex);const state = { //要设置的全局访问的state对象,赋予初始属性值 index: 'home', isIndex: false,};const getters = { //实时监听state值的变化(最原创 2021-01-07 12:13:20 · 294 阅读 · 1 评论 -
Progressive Web App(PWA)
Progressive Web App一、 PWA 宣传 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可参与的 )二、什么是Progressive三、为什么我们需要Progressive Web App一、 PWA 宣传 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可参与的 )Reliable : 为什么他是可靠的呢,当用户从手机主屏幕启动时,不用考虑网络的状态是如何,都可以立刻加载出 PWA。Fast:这一点应该都很熟悉了原创 2020-12-30 18:25:29 · 1729 阅读 · 0 评论 -
vue目录结构
这里写目录标题参考一参考二参考三参考一目录一级二级bulid项目构建的一些 js 文件config配置文件项,index.js 比较重要,打包上线需要修改配置dist项目打包后的文件node_modulesnpm安装包位置src项目的开发目录-assets图片、字体等资源-components公共组件部分-config开发分支和生产分支的切换配置,以及 fetch.js 对于前后台数据交互的封装-pl原创 2020-12-30 17:53:34 · 172 阅读 · 0 评论 -
vue/cli4 创建vue项目选项详解
多版本创建项目一、vue-cli@2.x二、vue-cli@3.x三、vue-cli@4.xtips:1.查看 vue 版本:项目中,找到package.json文件夹 找"dependencies"中的vue ;若无项目,在cmd中输入 where vue,cd到vue目录下输入 npm list vue ,即可看到。2.查看 vue-cli脚手架 版本:vue -V (很多人会把这个认为是查看vue版本)3.安装最新版本 vue 和 cli :npm install vue -g (-g原创 2020-12-30 17:46:49 · 4629 阅读 · 0 评论 -
把angular(vue等)项目部署在局域网上
一、在cmd中输入 ipconfig , 复制自己电脑的ipv4地址二、在启动项目的时候加上 == --host 192.167.8.100 ==三、在同一局域网下(wifi)其他设备即可访问此项目原创 2020-11-04 16:00:15 · 308 阅读 · 0 评论 -
rimraf 秒删 node_modules
npm install rimraf -g //第一次需要安装删除指令 rimraf node_modules //进入对应目录后卸载node依赖库原创 2020-11-04 11:38:50 · 435 阅读 · 0 评论 -
原生js打印指定节点元素
很简单:<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>打印</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div> <span s原创 2020-10-25 16:07:00 · 1510 阅读 · 3 评论 -
为什么element的el-backtop会不管用,来看这里
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop></template>把target指向你要产生“回到顶部”按钮的组件,这个组件一定要是产生滚动条的组件!这个组件一定要是产生滚动条的组件!这个组件一定要是产生滚动条的组件!举原创 2020-05-23 16:55:22 · 5791 阅读 · 2 评论 -
Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果
一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex原创 2020-05-22 17:27:53 · 431 阅读 · 0 评论 -
ES6实用方法Object.assign、defineProperty、Symbol
文章目录合并对象Object.assign()介绍进阶注意用途Object.defineProperty(obj, prop, descriptor)Symbol合并对象Object.assign()介绍assign方法可以将多个对象(字典),语法:Object.assign(srcObj,obj1,obj2…)对于重复的键将会被覆盖(尤其注意对象被覆盖),对于可枚举(迭代)参数(被合并对象)若不是对象则自动转换成对象合并(如string,[]),对于不可枚举参数(undefined,null)会原创 2020-05-22 12:38:17 · 556 阅读 · 0 评论 -
Vue使用Vuex一步步封装并使用store
文章目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. this.\$store.getters(this.\$store.state的升级)5. this.$store.commit('mutations')6. this.\$store.dispatch('actions')(this.\$store.commit('mutations')的升级)三、modules 模块化四、原创 2020-05-12 23:38:48 · 9058 阅读 · 3 评论 -
vue项目将token存在(vuex)store和localstorage中
文章目录一、准备工作和token1、准备工作1、介绍token用法二、创建storage,store,request1、src目录:2、创建storage(可选)3、创建store4、创建request三、配置代理,封装路由router、设置路由守卫,在main.js中引入router一、配置代理二、封装路由router,并设置路由守卫三、在main.js中引入router四、登录页面实际使用仔......原创 2020-02-19 23:58:14 · 21747 阅读 · 15 评论 -
工程化,模块化,组件化,规范化
一、工程化在配置初始项目文件结构和基本文件依靠命令行(工具)自动生成, 代码构建: webpack,脚手架:*cli,用于创建项目目录结构。确定代码规范,缩进,换行,以及各种预编译工具less,coffee,保证输出代码的标准一致对JS文件是否规范化,进行单元测试。不用手动复制到jshint上去检测,现在配置grunt监听文件变动自动检验显示检验结果还可以通过配置构建工具自动刷新浏览器实现...原创 2019-12-30 15:45:17 · 521 阅读 · 0 评论 -
jQuery杂项进阶(四)
一、$ 的替换二、使用JSONP实现跨域三、jQuery 杂项方法、实用工具、回调对象、延迟对象参考 ☆四、jQuery 自身属性参考 ☆五、jQuery 插件介绍和参考 ☆原创 2019-12-20 16:51:21 · 165 阅读 · 0 评论 -
jQuery对Ajax的封装应用(三)
一、Ajax二、load三、ajax(参数),get,set$.ajax$.ajax的get、post简写形式四、ajax全部方法参考 ☆原创 2019-12-20 16:10:43 · 162 阅读 · 0 评论 -
jQuery 对HTML的操作(二)
一、jQuery获取、设置HTML标签的内容和属性获得内容 - text()、html() 以及 val()获取属性 - attr(),prop()二、增删 HTML 的内容增加删除三、操作CSSaddClass 添加removeClass 删除toggleClass 切换css 获取与设置所有操作html、css方法参考 ☆四、操作元素和浏览器窗口的尺寸五、遍历DOM元素父辈查找同辈查找后代查找过滤查找所有遍历方法参考 ☆原创 2019-12-20 12:25:58 · 264 阅读 · 0 评论 -
jQuery初识和常用事件(一)
一、jQuery二、入口函数三、选择器四、常用的 jQuery 事件方法五、效果事件参考 ...原创 2019-12-19 16:52:15 · 247 阅读 · 0 评论