![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化
yuange11111
不积跬步无以至千里
展开
-
centeros7 安装node
node js 安装和使用原创 2022-07-12 11:23:24 · 749 阅读 · 1 评论 -
HTMLCanvans 使用指南
1 普通截取屏幕,没有滚动条一般直接按照教程使用就可以,不会出问题2 有滚动条长截图1) //页面滚动到顶部 document.body.scrollIntoView() setTimeout(function() { const targetDom = document.getElementById("scrollW"); //copy dom 到body .原创 2020-08-22 21:03:00 · 978 阅读 · 0 评论 -
直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题
初学Vue遇到的问题,尝试了几个小时才搞明白,大佬应该一眼就能看出什么问题吧……需要注意,不要直接在JS中操作一个Vue data对象中不存在的属性,如果同时有通过v-model绑定到该对象的不存在的属性时,会出现诡异的行为表现,console中不会报出任何warn或error。需求是,实现三个复选框,第一个复选框初始为选中状态,一开始写出来是这样的——HTML 12345 <div id="app" style="margin: 10p...原创 2020-08-19 17:19:34 · 5586 阅读 · 1 评论 -
promise
export const request = (params) =>{ let count =0; return new Promise((resolve,reject)=>{ //开启一个等待框 wx.showLoading({ title:'请稍等...' }); count++; wx.request({ //...相当于去掉了对象的{}大括号 .原创 2020-06-29 17:12:55 · 178 阅读 · 0 评论 -
axios 传递参数
axios.post(hostUrl+"/order/addOrder?payWay="+type,list)//第一个参数是请求url//第二个参数是请求体,可以在里面放任何东西,//如果是单个参数的请款下一般外面有一个大括号//比如name:"yuange",age:18原创 2020-06-02 18:34:52 · 807 阅读 · 0 评论 -
前端nuxt 项目部署
两种部署方式:1 静态部署2 启动一个nuxt 服务器npm run build 之后,赋值以下文件到服务器//本地npm run build//服务器npm install -productionnpm run start...原创 2020-05-30 16:24:51 · 437 阅读 · 0 评论 -
vue 操作其他页面的数据的方法
vue 操作其他页面的数据的方法1 可以直接在当前组件中用ref 属性获取到子组件,然后调用其中的方法2 也可以直接dom 操作,子组件3 没有关系的两个组件,可以直接引入另外的一个组件,然后调用其中的方法,获取其中的数据。 但是是以当前组件的名义来调用的,就是其中的this 是指向当前组件的,而不是被引用的组件。4 搜索头和搜索数据列表分离的解决方案1)搜索头点击搜索...原创 2020-04-30 20:03:51 · 6045 阅读 · 0 评论 -
vue 调用非父子组件的方法
今天用vue2 折腾spa的时候,遇到了这样的一个问题,有两个组件A和B,A和B不是父子组件,但是我需要在B组件中调用A组件的方法,官方文档找不到合适的答案,网上的相关资料也很少(原谅我懒得去翻墙Google)。一番折腾之后,我想到ES6的基本语法,可以通过引入模块去调用方法,于是,我在B组件中以模块的方式引入了A组件,然后直接调用B组件的方法,成功了!举个例子,A组件的methods里有...原创 2020-04-26 17:05:58 · 2212 阅读 · 4 评论 -
nuxt 中scss 全局变量的配置
1.插件安装:npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev2.在项目的assets目录下新建一个css目录,然后在该目录下新建一个index.scss文件,用这个文件作为scss的入口文件,在这个文件里引入其他的scss即可,例如:...原创 2020-04-16 15:06:57 · 1563 阅读 · 0 评论 -
关于nuxt 图片路径问题
1 如果是使用的http 路径没有什么问题2 如果你直接在src 里面使用本地图片,并且是相对路径,那么编译的时候会自动帮你编译成绝对路径3 如果你使用的是本地图片,并且图片的路径是写在变量里面的,那么编译完成后路径不会被改变, 所以编译过后会中不到图片。4 查看一下 2 里面的图片被编译后的路径,会发现前面多了一个 /_nuxt, 这个是根目录的意思,所以如果你使用本地...原创 2020-04-13 17:36:14 · 6740 阅读 · 2 评论 -
input 输入优化
input(e){ // 如果1s 之内有input 事件,那么上一个输入事件会被取消 // 每一次的输入事件都会被延迟1s 执行,然后如果没有输入事件了就会继续执行, // 如果有了新的输入事件,那么之前的输入事件就被取消掉 clearTimeout(this.data.flag); let flag = ...原创 2020-04-03 15:06:33 · 441 阅读 · 0 评论 -
vue实现indexlist 组件
<template> <div> <scroll class="scroll" :data='singerList' :pullUpLoad=true @pullUpLoad='pullUpLoad' :pullDownRefresh={s...原创 2020-02-22 03:19:08 · 1653 阅读 · 0 评论 -
js 保留2位小数
Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77https://www.jb51.net/article/134067.htm原创 2020-02-16 07:13:31 · 143 阅读 · 0 评论 -
js 中 foreach,map ,filter, findIndex , every ,some区别
map foreach filter 返回值 有 没有 有 返回类型 返回一个新数组 无 返回原来的数组 "message": [ { "cat_id": 1, "cat_n...原创 2020-01-31 22:50:05 · 254 阅读 · 0 评论 -
nuxt vue中刷新vuex state 数据丢失解决方案
nuxt1 配置插件(),太简单就不说了。注意:要禁止服务端运行,不然会报错,这个事件是在客户端添加的,不是在服务端小渲染的时候添加的。2 写代码,如下。export default function(ctx){ // 离开页面 window.addEventListener('beforeunload', ()=> { ...原创 2020-01-18 18:39:11 · 3166 阅读 · 2 评论 -
对 nuxt 插件的理解
nuxt 没有main.js 文件了,所以要想在根实例里面的钩子函数中添加代码就很麻烦,比如,你想添加一个监听刷新的事件,这个事件只能在根实例的钩子函数里面添加。为什么呢?因为,如果是网页的话,你不是监听的当前这个组件的刷新事件,你是监听整个app 的刷新事件,不论哪个组件显示在屏幕上都应该存在这个监听事件。所以应该在app 初始化完成后(根实例的mounted)的mouted 中添加...原创 2020-01-17 16:10:14 · 1059 阅读 · 0 评论 -
父子组件的生命周期执行顺序
父子组件的执行顺序为,父组件beforeCreated ->父组件created ->父组件beforeMounted ->子组件beforeCreated ->子组件created ->子组件beforeMounted ->子组件mounted -> 父组件mounted。知道了这个以后,在一些父子组件的接口中,那些强依赖于顺序的接口调用顺序就引刃...原创 2020-01-17 14:30:44 · 1490 阅读 · 0 评论 -
vue 组件强制刷新的几种方式
1 用 v-if ,让组件消失,又出现2 路由跳转,然后立即返回到当前页3 跳转到当前页,但是用query 给当前页传递一个不同的值,一般用时间戳4this.$forceUpdate...原创 2020-01-17 11:54:20 · 1708 阅读 · 0 评论 -
vue 生命周期做了哪些事
beforecreated: data,method 还没有初始化,不能使用,不能调用 createed :data,method 初始化,能使用,能调用 beforemounted,模板初始化,没有渲染 mounted:模板渲染到页面上 beforeupdate:更新数据之前做的事情 update:更新完数据会调用这个方法,每次都会。...原创 2020-01-17 09:23:19 · 1220 阅读 · 2 评论 -
vue 路由传递参数,刷新页面 数据变成 [Object object]
原因:刷新页面的时候,我才框架会默认的把数据存放在本地,刷新完成后会把数据取出来,但是存储普通的字符串还好一旦存储数组,或者对象,如果不用JSON.stringify()方法把对象转换成字符串的话,再次取出来,数据就会变成一个奇怪的东西,无法parse ,也不能直接使用数据就变成 [Object object] 了,估计这个是vue 的一个bug,所以在传输数据的之前要提前把数据JSO...原创 2020-01-17 09:05:03 · 6943 阅读 · 0 评论 -
vue 监听页面滚动事件解决方案
mounted(){ let self = this; //添加滚动事件 window.addEventListener('scroll',this.scrollHandle) }, destroyed(){ //单页面应用,当切换路由,当前组件被销毁,但是滚动事件是添加在window 上的,并不会被销毁 ...原创 2020-01-16 15:53:42 · 2872 阅读 · 0 评论 -
vue params 和 query 传递参数的区别
query1 query 传递参数的时候可以使用 name 属性跳转,要给路由设置设置这个属性,2 query 传递参数的时候可以使用path 跳转,路由不需要经过特别的设置。3 query 类似get 请求, 会在状态栏显示参数。params 传递参数1 param 传递参数只能配合name,2 要在path上配置要传递的参数,参数是路由的一部分,如果跳转的时候不...原创 2020-01-16 14:28:03 · 395 阅读 · 0 评论 -
js 获取当前元素距离窗口的距离
获取dom到body左侧和顶部的距离-getBoundingClientRect平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查,有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次,算出来了一堆错误答案。下面我要分享的这个方法,兼容性很好(ie4都ok),而且很方便,不会算错。这个方法就是 ge...原创 2020-01-15 11:29:40 · 22556 阅读 · 1 评论 -
vue 页面传值的几种方式
1 拼接url传值2 query 传值(类似get请求,URL显示在地址栏)3 params 传值(类似post请求)https://blog.csdn.net/chenzlyan/article/details/83306199原创 2020-01-14 11:26:57 · 2026 阅读 · 0 评论 -
vue 子组件调用父组件的方法
https://blog.csdn.net/zgrkaka/article/details/100528714原创 2020-01-04 14:39:34 · 129 阅读 · 0 评论 -
vuex 中 action 的使用
今天是要来说一下action函数的参数一般在使用actions方法时我们会像下面的书写方式:actions:{ add_num({commit}){ console.log({commit}) setTimeout(() => { commit('change',100); },2000) }...原创 2020-01-04 11:34:17 · 3555 阅读 · 0 评论 -
css 网页缩放的两种情况
win10 触控板缩放相当于图片的缩放,初始化的网页的布局是什么样,缩放完之后还是什么样。只是大小变了。浏览器对网页进行缩放1 如果你设置的是百分比,1.1 如果外层没有别的dom,那么当前dom是相对于浏览器的窗口进行缩放的,无论你怎么缩放都不会改变当前dom的宽度和高度,但是里面的文字会跟随缩放变大变小,甚至会超出dom1.2 如果有外层的存在,那么会...原创 2019-12-09 13:45:29 · 3045 阅读 · 0 评论 -
js 数组高效去重方法
/**去重的原理 * var array = [] * 1 var set = new Set(array); set元素具有唯一性,自动去除多余的数组 * 2 Array.form(set) 把set 方法变成一个数组 * * **/ var array = Arra...原创 2019-12-03 19:32:44 · 196 阅读 · 0 评论 -
js中 charCodeAt
str="ling" return str.charCodeAt(0) //返回str 的第0个字符的编码号:108; return str.charCodeAt(0) //返回str 的第0个字符的编码号:105; ...原创 2019-12-02 19:49:07 · 755 阅读 · 0 评论 -
js 汉字转换成拼音
//npm install js-pinyin// main.js 引入import pinyin from 'js-pinyin' //使用组件内let pinyin = require('js-pinyin'); pinyin.setOptions({checkPolyphone: false, charCase: 0}); console.log(pinyin.getFu...原创 2019-12-02 15:39:27 · 1350 阅读 · 0 评论 -
js 字母大小写转换
1.转换成大写:toUpperCase()2.转换成小写:toLowerCase()原创 2019-12-02 15:17:32 · 671 阅读 · 0 评论 -
js 对象 . 和 [] 的方式回去属性区别
//假设一种情况//如果你想通过一个变量来获取对象里的值的话var a = ‘test’var array = {‘test’:“value”}array.a //什么也获取不到,因为数组里没有a这个属性array[a] //可以获取到,因为array 里面有test 这个字符串属性// 也就是说 [] 里面可以放一个动态的值,他可以是一个形参,而不是一个具体的值。...原创 2019-12-01 15:44:37 · 102 阅读 · 0 评论 -
nuxt.js 使用axios
https://www.cnblogs.com/hughes5135/p/10398920.html原创 2019-11-29 15:48:15 · 593 阅读 · 0 评论 -
mongoose 简单入门(连接、 增删改查)
// 下载mongoose// 引入mongooseconst mongoose = require('mongoose');// 链接mongoose// 开启这两个配置 的意思是使用两个新的什么东西,因为在以后的新版本中旧的会被抛弃掉,所以使用新的,不开启的话会有提示条信息很难看mongoose.connect("mongodb://localhost:27017/yuange"...原创 2019-11-18 16:22:46 · 273 阅读 · 0 评论 -
passport 登录和注册
https://www.w3cschool.cn/passport_js_note/xiysfozt.html原创 2019-10-31 10:31:07 · 2748 阅读 · 0 评论