GQ_cyan-优快云博客

原创 vue 父子组件生命周期执行顺序

父子组件在加载的时候，执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2021-04-15 10:08:08 246

1. 混入Mixin 混入类似于公共参数或者方法的初始化，使一些公共的变量或方法定义到组建中，与vuex功能类似却不相同。（混入中可以定义vue的各个变量入craeated,methods等，但是合并后，重复的以组件内为主）var mixin = { data: function () { return { message: 'hello', foo: 'abc' } }}new Vue({ mixins: [mixin], ...

2020-11-18 11:32:54 285

原创【Vue基础知识再巩固】--动态组件和异步组件

动态组件标签切换v-bind:is控制模板切换，但是模板切换前后重新加载，无法保持切换前状态，故引入keep-alive对组件实例进行缓存，以保持其状态：<keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>异步组件暂时用到的场景，大量组件引入时候会导致页面有一定延迟，因此引入异步组件，当组件使用实被引入注册ne...

2020-11-17 13:41:57 212

原创 vue 流加载下拉分页，隐藏域复制

流加载下拉分页以及移动端隐藏域复制功能（copyCode）<template> <div class="hello"> <div class="container"> <div class="mv-banner-comp" id="header-box"></div>  <input type="hidden" value="http://www.baidu.com

2020-10-14 16:15:58 312

原创 Vue自定义组件使用v-model实例

实现目标：分模块添加时候组件封装1.父组件内容<template> <div> <article> {{ tmpjson.id }}:{{ tmpjson.name }} <button @click="reWriteToChild">点击</button> <form-child v-model="tmpjson"></form-child> </ar

2020-09-08 16:17:04 535 1

原创 vue组件的依赖注入（父组件异步数据后传）

1.初始父组件provide给出：data(){ return { //后传数据 stepCanAdd: {} }},provide () { return { getChangeNew: () => this.stepCanAdd };},methods: { //获取异步数据 getStep () { apiGet.ProductPlanApi.GetStep({ getPara

2020-09-08 15:41:42 670 2

原创【Vue基础知识再巩固】--Vue的边界情况（依赖注入等）

1，元素，组件的访问根元素：this.$root.XXX (真实项目中多用VueX对全局的状态进行管理) 父元素：this.$parent.XXX （多层父级this.$parent.$parent.XXX寻找，无法很好扩展到更深层级的嵌套组件，引依赖注入）子组件元素： this.$refs.XXX （渲染后才可以取到，多结合this.$nextTick()使用）依赖注入：父元素设置可访问方法provide；子组件设...

2020-07-13 16:01:43 285

原创【Vue基础知识再巩固】--插槽v-solt

1，普通插槽组件：<button type="submit"> <slot>Submit</slot></button>引用：<submit-button>Save</submit-button>渲染后：<button type="submit">Save</button>2，具名插槽<div class="container"> <header>

2020-07-13 14:18:31 333

原创【Vue基础知识再巩固】--不成块容易忘记内容

1，不要在选项 property 或回调上使用箭头函数，比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，会出现错误。2，动态绑定class与style1>.<div class="static" v-bind:class="{ active: isActive, 't...

2020-07-10 09:41:51 216

原创【Vue基础知识再巩固】--计算属性computed与侦听器watch

以下形式对比均采用此例：<div id="demo">{{ fullName }}</div>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }

2020-07-09 16:58:12 187

原创 Axios--基础知识

下载使用方式：npm: $ npm install axioscdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>案例（GET以及POST请求）：GET请求：// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }

2020-07-02 09:59:44 217

原创最新99道前端面试题

前言：7月份的第一天，毕业马上两年了，居安思危，为后边儿做个准备吧 “即便不跳，也始终保持跳的能力”1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代...

2020-07-01 09:28:14 825

原创 stylus引入公共变量及方法文件

目的：写一份公共变量以及样式方法，使VUE中所有页面以及组件公用。以修改变量改变全局风格。方法环境：（vue项目中如下） 1，修改如下文件（combase.styl是我写得公共文件）var stylusOptions = { // variables.styl是我单独定义的stylus公共变量的文件，注意地址要引入正确 import: [path.join(__dirname, "../src/assets/combase.styl"), ] } 2，...

2020-06-29 10:14:13 991

原创前端实用小工具

图片处理1、生成随机图片https://source.unsplash.com/https://source.unsplash.com/user/erondu/1600x900通过修改图片尺寸来获取不同大小的随机图片，尺寸可以修改，1600x900可以修改2、在线图片压缩https://tinypng.com/通过修改图片尺寸来获取不同大小的随机图片，尺寸可以修改，/1920/1080 可以修改开发1、地图数据http://datav.aliyun.com/t...

2020-06-22 13:39:04 258

原创微信小程序--引入WeUI基础样式以及组价（Icon为例子）

微信小程序引入weui1.进入目录复制weui.axss所有内容（当然也可以下载，地址：https://github.com/Tencent/weui-wxss/tree/master/dist/style）2.拷贝进你的小程序项目中，路径位置如下：3.进入项目app.wxss，进行weui.wxss的引入...

2020-06-19 09:34:00 929

原创 Promise 解决for循环中异步请求获取数据

描述：根据集合ID循环获取详情并push进一个详情数组resultlist。getPlanDetail (ids) { let tmpplandatas = [] console.log() ids = ['9C549ACCB9B24E4AA785A8CB3D97F2D9', '9C549ACCB9B24E4AA785A8CB3D97F2D9'] for (let i in ids) { tmpplandatas.push(new Pro

2020-05-29 13:34:45 2677 1

原创 vue图表点击联动展示z-tree&echarts

1.点击表格展示对应扇形统计图，效果如下：2.统计图组件Statistics .vue代码如下：<template> <div> <div :id="idname" :style="{width: '100%', height: allheight+ 'px'}"></div> </div></tem...

2019-12-25 08:43:28 821

原创 rem移动端计算

1.根元素设置font-size='npx'；默认为16px* rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小；所以1rem*16(这个是html的fontsize)=16px; 2rem*16=32px; 要想让rem和px成100倍的关系，即1rem*100=100px；则html的字体大小就应该...

2019-12-24 09:31:56 670

原创 // 获取起始日期获取周以及对应日期段

formatDig (num) { return num > 9 ? '' + num : '0' + num }, formatDate (mill) { var y = new Date(mill) let raws = [ y.getFullYear(), this.formatDig(y....

2019-11-14 09:19:38 315

原创获取某年第几周

isLeapYear (year) { return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0) }, getMonthDays (year, month) { return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 3...

2019-11-14 09:18:24 313

原创区间日历（带时分控制）

效果：前后有控制，时分联动控制伪代码（利用了element组件）：<template> <el-container> <el-header style="height:62px;">{{overtimetitle}}</el-header> <el-container> <el-main...

2019-07-30 11:30:25 278

原创常用---vue-cli中使用页面切换库vue-awesome-swiper以及动画库animate.css

vue-awesome-swiper以及animate.css使用安装下载：npm install --save vue-awesome-swiper animate.css 文件入口main.js中引入：import vueAwesomeSwiper from 'vue-awesome-swiper'import animate from 'animate...

2018-12-05 10:29:23 2850

原创常用----音乐切换

音乐按钮自动以旋转以及音乐切换【mu1.png和mu2.png对应音乐播放按钮切换，music为音乐资源】HTML:(bf为音乐以及效果切换函数)<audio controls="controls" loop="loop" id="music1" autoplay hidden> <source src="img/music.mp3" type="audio

2018-12-04 20:21:54 1035

原创记第一次用node-express+mysql+vue的小项目

1，建立项目文件夹nodevue,文件内建立server文件夹2，进入server此次执行以下命令搭建expressnpm install express --savenpm install body-parser --savenpm install cookie-parser --savenpm install multer --savenpm list express...

2018-11-30 09:51:43 709

原创 veux--页面刷新更新后数据状态无法保存问题

以登陆退出为例，我这里使用的是sessionStorage去处理（具体用localStorage（手动清除，数据消失）还是sessionStorage（会话窗口关闭，数据消失），可根据具体需求而定，处理方法流程同） 1.在改变state时候改变sessionStorage里面的值，使其值与state中更新后的值一致//loginState传入true与false判定执行登...

2018-11-25 15:47:02 1046

原创 Vuex ----超简单详细使用手册

之前在项目用到过Vuex,但用的时候都是前辈写好的结构，知其然而不知所以然，看了几篇博客以及官网的内容打算小小的整理一下，首先来抛玉引砖，推荐几个我觉得通俗易懂的博客：未将状态使用Modules进行表达的：https://blog.youkuaiyun.com/u011068996/article/details/80216154 使用Modules进行表达的：https://segmentfa...

2018-11-24 21:50:55 3226 6

原创 Sequel pro 始终出于loading状态，无法切换到数据库

一，打开软件，切换数据库长时间显示“loading database '数据库名称'” https://sequelpro.com/test-builds, 升级版本sequelpro，先使用测试版 https://github.com/sequelpro/sequelpro/issues/2699 报错原因。 mysql8.0升级后造成的...

2018-11-23 00:51:56 3290

原创微信小程序poster封面闪逝以及自定义播放按钮

小程序中poster封面闪消失，以及用图片自定义播放按钮，注意下面是以组件的形式来写非页面如下：wxml:<view > <video id='myvedio' bindended="endvedio" style="width: 100%;height=400px;margin:1px;" src="{{data}}" binderror="videoErrorCa...

2018-10-25 14:28:19 3788 7

原创 vue中实现二维码生成

安装： npm install --save qrcodejs2js部分：<script> import QRCode from 'qrcodejs2' export default { methods: { qrcode () { let qrcode = new QRC...

2018-10-23 15:38:54 1226 1

原创 JS的一个封装和继承知识

面向对象的封装html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{

2018-10-19 16:53:07 277

原创前端进阶能力

css预处理框架的学习（简单易懂网址）1.Less的学习：https://less.bootcss.com/，简单理解路线：基于javascript的css预处理器，两种方式运用（node.js中，浏览器中外联引入）；主要语法：变量，混合，函数，运算，嵌套，maps，作用域，Namespace and Accessors【使用其他元素内部混合的样式】2，stylus学习：https...

2018-10-19 11:31:35 469

原创 vue-router学习汇总

*红色标注为功能主要点1·路由嵌套{ path:"/", name:'hello', component:hello, children:[{ {path:'/one',component:one}, {path:'/two',component:two} }]}2·vue推荐传参方式（两种）name传参数[实际开发中不常用]app.vu...

2018-10-15 15:07:35 349

原创 vuex流程简单示例

在vue-cli中使用vuex（个人理解实现数据的公用）:1.安装vuex，在vue-cli目录下的src文件下建立vuex目录=》vuex文件夹下建立store.js文件，文件如下： import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const state={ count:1}const muta...

2018-10-14 23:49:54 1791

原创 flex布局

弹性布局flex container flex-item1,布局容器设置display:flex【容器内子元素的块状布局已经被消除，因此不需要再在内部元素设置inline-block】2,flex相关属性容器上：flex-direction: row | row-reverse| column | column-reverse【reverse不仅是元素排列的颠倒，在容器...

2018-10-08 14:48:48 316

原创跨域与正则

跨域和正则，算是我一直遗留的问题了，一直在想跨域服务器端配置不就好了，但是这个问题却要求前端必须处理，无所谓既然定义为遗留，我就总要弄清楚；正则就不用讲了，一致认为很重要但是一直觉得使用到的就那几个，搜出来用就好了，其实早晚都要明白的，如果毕业快两个月实习一年多了还不弄明白就有点说不过去了（因为我是一个怀揣大神梦的菜鸟）。跨域： 1.广义上的跨域 ...

2018-09-19 00:34:13 604

原创工作中踩过的坑

踩过的坑：1.input实现maxlength且字符长度识别中英文【jquery】：function getstrlen(arr) { var len = 0; var lenn={ truelen:0, truen:0 }; f...

2018-09-17 13:24:11 355

原创 Vue学习巩固（上）

利用去哪儿网项目的搭建学习，最大的收获就是在项目中实现了自己之前的所学所想，同时也将很多知识运用到了最近一个项目上，让自己所学所看真正有了落地。当然学无止境，刚好趁热打铁，利用饿了么搭建课程对Vue进一步巩固。方便后续对reactjs等相关框架的进一步学习，话不多说，加油喽！ 1,Get到的新知识 <1>.http://cssreset....

2018-08-15 23:53:03 231

原创学习Vue实现去哪儿网（下）-----项目进行流程总结

第四部分vue-cli进行项目开发 4.1项目准备 1>.目录了解与搭建，最好在src中新建pages来存放对应页面组件; 2>.引入reset.css重置不同端的默认样式；文件下载链接后续补全 3>.引入border.css解决移动端1像素边框问题；文件下载链接后续补全 ...

2018-08-08 18:07:48 1100 2

原创学习Vue实现去哪儿网（上）-----基础知识总结

第一部分基础知识学习：（1）vue挂载渲染基础；（2）生命周期；（3）计算，方法与监听；computed中get与set；（4）vue进行样式渲染：<1>class的对象（true or false）或数组绑定；<2>style的绑定数组数据（data中定义styleobj用于样式绑定改变）（5）vue的条件渲染：v-if(不...

2018-08-06 17:36:07 1325 1

vuex基础梳理

空空如也