web前端
GQ_cyan
怀揣着大神梦的菜鸟小白(2016),慢慢长大(2020) 【承接网站,小程序,H5等一系列前端相关外包】
展开
-
【Vue基础知识再巩固】--混入,自定义指令,过滤器
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 · 230 阅读 · 0 评论 -
【Vue基础知识再巩固】--动态组件和异步组件
动态组件 标签切换v-bind:is控制模板切换,但是模板切换前后重新加载,无法保持切换前状态,故引入keep-alive对组件实例进行缓存,以保持其状态:<keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>异步组件 暂时用到的场景,大量组件引入时候会导致页面有一定延迟,因此引入异步组件,当组件使用实被引入注册ne...原创 2020-11-17 13:41:57 · 170 阅读 · 0 评论 -
【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 · 243 阅读 · 0 评论 -
【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 · 285 阅读 · 0 评论 -
【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 · 168 阅读 · 0 评论 -
【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 · 152 阅读 · 0 评论 -
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 · 180 阅读 · 0 评论 -
最新99道前端面试题
前言:7月份的第一天,毕业马上两年了,居安思危,为后边儿做个准备吧 “即便不跳,也始终保持跳的能力”1.vue优点?答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代...原创 2020-07-01 09:28:14 · 782 阅读 · 0 评论 -
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 · 889 阅读 · 0 评论 -
前端实用小工具
图片处理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 · 218 阅读 · 0 评论 -
微信小程序--引入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 · 809 阅读 · 0 评论 -
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 · 2564 阅读 · 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 · 738 阅读 · 0 评论 -
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 · 561 阅读 · 0 评论 -
Bootstrap中的栅格系统所用类
1,普通栅格: .raw:栅格容器 .span1~12:栅格宽度等级 .offset1~12:栅格移动位置 响应式栅格: .row-fluid:容器 其他相同2,布局 固定式(.containter)流视布局(.containter-fluid) 响应式布局 使用时,需要引入文件即可( )原创 2016-09-07 19:40:48 · 592 阅读 · 0 评论 -
SCSS学习
一,什么是SCSS?答:最近才算系统的了解道路Sass,scss这些名词, Sass:是CSS3的一种扩展,增加了变量,嵌套,扩展,混合,颜色等特殊语法。通过命令行工具或者是web框架来使其转为标准的CSS。 Scss则是Sass的新语法,是CSS3的超集。 对我而言,Scss与Css语法形式极为相似,也正是最近在练习react+webpack小原创 2017-06-25 15:04:10 · 671 阅读 · 0 评论 -
vue制作分页效果
首先js效果: var pagitation=new Vue({ el:'#app', data: { // 省略的符号 sign:'...', // 省略号位置 signIndex:3, // 总页数原创 2017-09-13 12:03:06 · 5897 阅读 · 0 评论 -
Vue学习巩固(上)
利用去哪儿网项目的搭建学习,最大的收获就是在项目中实现了自己之前的所学所想,同时也将很多知识运用到了最近一个项目上,让自己所学所看真正有了落地。当然学无止境,刚好趁热打铁,利用饿了么搭建课程对Vue进一步巩固。方便后续对reactjs等相关框架的进一步学习,话不多说,加油喽! 1,Get到的新知识 <1>.http://cssreset....原创 2018-08-15 23:53:03 · 192 阅读 · 0 评论 -
跨域与正则
跨域和正则,算是我一直遗留的问题了,一直在想跨域服务器端配置不就好了,但是这个问题却要求前端必须处理,无所谓既然定义为遗留,我就总要弄清楚;正则就不用讲了,一致认为很重要但是一直觉得使用到的就那几个,搜出来用就好了,其实早晚都要明白的,如果毕业快两个月实习一年多了还不弄明白就有点说不过去了(因为我是一个怀揣大神梦的菜鸟)。 跨域: 1.广义上的跨域 ...原创 2018-09-19 00:34:13 · 506 阅读 · 0 评论 -
前端进阶能力
css预处理框架的学习(简单易懂网址)1.Less的学习:https://less.bootcss.com/,简单理解路线:基于javascript的css预处理器,两种方式运用(node.js中,浏览器中外联引入);主要语法:变量,混合,函数,运算,嵌套,maps,作用域,Namespace and Accessors【使用其他元素内部混合的样式】2,stylus学习:https...原创 2018-10-19 11:31:35 · 419 阅读 · 0 评论 -
常用----音乐切换
音乐按钮自动以旋转以及音乐切换【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 · 916 阅读 · 0 评论 -
跟着阮一峰老师学习React.js
算算自己学的东西虽然实战很少但是也该学这个了,起码我要认识它呀!1,如果有跟我一样想要入门reactjs的同样可以跟着阮老师走走看阮老师的REact.js,2,当然对于英文阅读水平较高的同学可以看官方文档reactjs官方手册原创 2017-06-08 19:32:05 · 1138 阅读 · 0 评论 -
包管理工具学习
包管理:自动下载东西 解决依赖一,npm(Node Package Manager)工具 常用命令:npm istall xxx(安装) ,npm uninstall xxx(卸载) npm上传自己的模块: 注册登录官网账户:npm adduser ,原创 2017-05-25 16:08:05 · 389 阅读 · 0 评论 -
vue进阶
一,过渡效果1,对过渡的理解,在vue中定义了过渡组件,vue自动检测组件中的过渡效果2,过渡方式:css-transition css-animition javascript方法 过渡的状态:v-enter v-enter-active v-leave v-leave-active css-t原创 2017-05-25 16:03:40 · 379 阅读 · 0 评论 -
Ajax----了解及概念介绍
Ajax:1,全称Asynchronous Javascript and XML(异步的javascript和xml),2,Ajax 不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。3,使用了ajax技术的网页通过在后台跟服务器进行少量的数据交换,网页就可以实现异步局部更新。同步:原创 2016-10-30 17:09:32 · 900 阅读 · 0 评论 -
Bootstrap---导航条响应式
导航条: .navbar .navbar-fixed-top .navbar-fixed-bottom .navbar-inverse .navcollapse data-target="#example-navbar-collapse" data-toggle="collapse" class="navbar-toggl原创 2016-09-08 21:47:37 · 885 阅读 · 0 评论 -
Bootstrap组件---下拉菜单,多级菜单 ,按钮
下拉菜单 ,dropdown(.dropup改变这个是上显示) data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right 注意: .dropdown-submenu(多级导航中,可能bootstrap中没有)自行添加: .dropdo原创 2016-09-08 19:32:51 · 22043 阅读 · 2 评论 -
Bootstrap中css优化
分类描述CSS优化内容;1,文本:.muted:提示 .text-warning:警告 .text-error:错误 .text-success:成功 .text-info:信息 位置:.text-left .text-right .text-center 缩略语:(cite 也可以实现) 地址: 引用:...原创 2016-09-07 19:58:18 · 899 阅读 · 0 评论 -
Bootstrap概述
1,下载bootstrap文档:https://github.com/twbs/bootstrap2,文档描述:docs文件是参考文档 (2)js文件是js库 (3)img文件里是图标 (4)less文件是css脚本文件 (5)dist文件中有css,js等 最重要的是其内部的bootstrap.min.js bootstrap.min.css jquery.mi原创 2016-09-07 18:59:22 · 514 阅读 · 0 评论 -
我的个人博客--前端管理篇
我的前端可是满满的少女心呢!首先网页logo是我弄的哦,页面的图片也是我选的我做的呢,网页除了导航部分有六个,分门别类的收藏者我的博文记录;每一个对应一个控制器;首页部分相对而言难度不带,控制器实例化数据表,通过前端呈现出来,首页下部分主要呈现的是我每个大类的阐述和感悟;在各个分页中点击是其下部分存在二级导航,而正文中所列的是给类别下的文章及文章的概言。几个页面的右侧部分是公用原创 2016-09-04 16:15:25 · 1053 阅读 · 1 评论 -
web前端实战总结.
一,首先,拿到设计图后进行分析划分。 利用从上到下,先整体后局部的规则进行工作顺序的确定。二,创建网站文件夹:css,js,jmage,index.html三,进行CSS初始化,其目的是消除固有元素的格式使网站更为协调 雅虎css初始化代码:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code原创 2016-08-21 16:50:58 · 777 阅读 · 0 评论 -
Bootstrap---标签,徽章,缩略图,警告文字,进度条,媒体工具,列表,面板
1,标签 labellabel-default label-primary label-success label-info label-warning label-danger2,徽章badge 42 3,缩略图.thumbnail4,警告.alter.alert-success、.alert-info、.ale原创 2016-09-08 23:13:59 · 670 阅读 · 0 评论 -
Ajax+php的例子
首先要介绍一个监听ajax请求的工具Fiddler。可以测试网页请求。服务端内容略去就客户端页面内容: 查询例子: html部分:查询请输入编号:查询 js部分: document.getElementById("search").onclick = function() { var request = new XMLHtt原创 2016-10-31 16:21:27 · 451 阅读 · 0 评论 -
JSON的了解,解析与检测
一,介绍 1,json是javascript对象表示法,(Javascript Object Notation ); 2,存储与交换文本信息的语法。采用键值对表示 3,是独立于语言,何语言都可以采用其进行解析。二,与XML比较 1,长度较为短小 2,读写速度快 3,直接javascript解析,转为javascript对象三,语法原创 2016-10-31 20:20:31 · 718 阅读 · 0 评论 -
vue component组件小结
了解完vue的一些必须知道的事情,就该看看vue的组件了,本部分我们以代码进行分析。什么是组件? 就我而言,组件就是按照自己的需求自定义的元素,充分体现了打代码的重用性。官方文档如下: 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊原创 2017-04-15 12:52:09 · 6475 阅读 · 0 评论 -
Vue学习
前言:对于没有接触过这个框架的人,面对一个框架可能不知道从何入手,看官方文档和前辈们的博客以及git 上的项目或许是最好的选择,当然我也是这样学习的,作为一个没有 接触过正式工作的我而言,一度对这个红极一时的框架产生敬畏,但是尝试了才知道,这个框架很好用也不难学。安装:对于Vue的安装,以npm下载安装:npm install vue,这是一种比较简单的方法;对于我们这种小白在做联系时这需要引原创 2017-04-15 10:31:03 · 564 阅读 · 0 评论 -
css清除浮动
浮动,简言之就是父元素因子元素的浮动无法撑开;清除浮动: (1)给父元素设置一定高度(一般不适用,对于固定高度容器使用) (2)用clear:both,在父元素后加一子层并设clear:both: 上述例子为说明clear:both清除浮动的用法原创 2017-04-10 08:55:40 · 386 阅读 · 0 评论 -
Jquery图片自动幻灯片效果
效果如图:首先Html文件: 1 2 3 4 5 其次css文件: body,div,ul,li{margin:0;padding:0;}ul{list-s原创 2017-03-20 17:36:06 · 1134 阅读 · 0 评论 -
jQuery鼠标滑过展示层效果
本效果就是小米官网首页鼠标滑过显示层级效果:首先,Html文件代码: 在html中需要明白的是在大div框架下,导航与要显示内容包裹在一个层级标签中序列显示。 手机 数码 合约机 荣耀3X 单反 智能设备 电脑装机原创 2017-03-20 17:01:50 · 675 阅读 · 0 评论 -
处理跨域的方法
一,跨域介绍: 二,处理方法一代理,在后台console中进行 概念: 三,处理放法---JSONP该方法只支持get请求在JQuery.a原创 2016-10-31 23:01:42 · 332 阅读 · 0 评论