自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

酷酷的旭

微信871943670

  • 博客(69)
  • 收藏
  • 关注

原创 (最新)video src测试在线地址 长期有效

http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4http://vjs.zencdn.net/v/oceans.mp4https://media.w3.org/2010/05/sintel/trailer.mp4

2019-11-08 18:01:35 11130 5

原创 (Vue)局部混入mixin混入用法

今天无意在百度上搜了一下mixins,然后哐哐得出来的都是mixin的概念,mixins的原理(几句话咱也没看懂),有几个是用法的,但是说的也是含含糊糊。。还有的画思维导图的。。挺简单的问题非要复杂化。。。 其实我就想知道咋用,能干什么,其他的我真不关心。。(最好带那种步骤的才好~ haha…)好了,步入正题,mixin官方文档上得解释是:官方文档介绍的。。有点官方。。。反正我第一遍是没看...

2019-10-30 18:12:01 7990

原创 margin-left实现左侧盒子固定右侧盒子自适应

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

2019-08-12 10:31:29 5880

原创 rem布局原理和实现

设计师一般会给我们一倍图640px,二倍图750px,三倍图1125px假设设计师给我们一个一倍图,那么如何将一倍图适配到不同手机端呢?设计图上有一个1616的盒子我们要把她显示在手机端,我们可以人为的把设计图分成20份,被分成的分数一份是640px/20=32px 那么这个1616占了几份/16/32=0.5份, 所以这个盒子在每个屏幕都是0.5份所以计算在320屏幕局中计算一份多大 所...

2019-06-06 03:01:41 6251

原创 iframe自动播放

今天遇到一个问题,如果在页面中想应用腾讯视频的视频并且在页面自动播放该怎么办?这里会有一个&lt;iframe&gt;&lt;/iframe&gt;地址,我们将它复制下来到当前页面,这样当前页面就显示了这个视频那么如何让这个视频自动播放呢?设置autoplay = true就可以了 , 但是在标签上设置后并没什么鸟用,是因为页面涉及到跨域,所以可以用地址栏拼接的方式就可以实现自动播放的功...

2018-12-14 17:00:35 24202

原创 nginx优点/功能/实验/特性/认证方法/源码下载/编译软件/本地启动命令

进入nginx目录,start nginx 启动nginxnginx -t 检查配置对不对如果没问题 nginx -s reload 重新加载配置文件退出nginx , nginx -s quit

2018-11-05 09:47:29 5413

原创 响应式背景图片的几种方式(举例padding-top实现响应式背景图)

我们都知道,在处理相应布局的时候,背景图片都是等比例缩放,使用引入的话,设置width:100%;height:100%;那么图片就会等比例缩放,这是图片,那么如果是背景图呢?我们之前的项目中常见的做法是根据css3媒体查询的方法来做的,根据不同手机的分辨率的不同,来等比例缩放背景图的高度,虽然这种方式是可以解决的,但是这种通过人肉的的方式来进行的设置并不好,也很繁琐,今天我们来学习使用paddi...

2018-09-25 11:56:39 10282

原创 CSS布局思路/CSS布局模型 并举例自适应布局(左右固定中间自适应或者右侧固定左侧自适应)

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。下面我们分别来学习下,当然我也是总结下而已,有如以下方法:一: 右侧固定宽度 左侧自适应第一种方法:左侧用margin-right,右侧float:right 就可以实现。HTML代码可以如下写...

2018-09-21 11:05:32 5399

原创 MarkDown简介(深度解析MarkDown用法)

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...

2018-09-14 17:13:53 6792 5

原创 vuex练习

npm install vuex --savenpm add vuexnpm install vuex@3npm i [email protected] --save-dev npm i [email protected] --save-dev// 和router同级创建store文件夹 index.js文件// 需要用到Vue变量引入import Vue from 'vue'//使用vuex //1 下载// 引入vuex暴漏函数对象import Vuex from 'vuex'/

2022-04-10 01:37:36 568

原创 echart双轴双柱双曲线

let list2020y = []let list2020q = []let list2021y = []let list2021q = [1,2,3,4,5,6,7,8,9,10,11,12] // for (let i = 0; i < datas.length; i++) { // // console.log( datas[i].rq.slice(0,4)) // if(datas[i].rq.slice(0,4) == '2020'){ // lis

2021-04-28 05:31:21 677

原创 echart多个扇形图圈

let dataPie2 = [{name: ‘其他井’,value: 100},{name: ‘占用’,value:20},{name: ‘占用’,value:15},{name: ‘占用’,value:1},];let dataColor2 = [ { os1: '#ffffff', os2: '#ffffff',}, { os1: '#fcb713', os2: '#fcb713',}, { os1: '#00eef

2021-04-19 13:20:19 685

原创 echart飞线地图

<template> <div id="myChart" :style="{width: '1000px', height: '500px'}"></div></template><script>export default { data() { return { geoJson: { type: "FeatureCollection", features: [

2020-11-17 17:41:01 1528

原创 模拟动态数据累计增加

<template> <div> <button @click="getAdd">点击增加一百</button> <h1>数值:{{ num }}</h1> <input type="text" v-model="num" />' <input type="text" v-model="num2" /> </div></template>&lt

2020-11-17 17:36:43 487 2

原创 Vue清除定时器优化方案

this.clock = setInterval(()=>{ this.nums = this.nums+1 console.log(this.nums) },1000) beforeDestroy(){ clearInterval(this.clock) this.clock223 = null }一个定时器,然后在beforeDestroy中清除,今天看到有一个优化方案.

2020-10-26 17:22:12 1761 2

原创 h5 animation 旋转动画

<template> <div id="wrapper"> <div class="aaa"></div> <div class="bbb"></div> <div class="ccc"></div> </div></template><script>export default {};</script><st.

2020-07-08 15:46:52 2396

原创 淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2020-06-04 09:44:19 1009

原创 数组去重排序

// 去重 var obj = {}; this.list = this.list.reduce(function(item, next) { obj[next.id] ? '' : obj[next.id] = true...

2019-11-26 16:06:48 2652

原创 小程序

app.json{ // 小程序公共设置 // app。json可以对五个功能进行设置 配置页面路径 窗后表现 配置标签导航 配置网络超时 配置debubg模式 // 页面路径 "pages": [ // 配置页面路径 页面路径定义了一个数组 存放的访问路径 她是进行页面访问的必要条件 /*如果在这里没有配置页面的访问路径,页面被访问时就会报错 如果在这里定义了页...

2019-11-13 09:13:19 3322

原创 git新建分支切换

2019-11-05 12:12:13 3455

原创 vue非父子传值 创建公共文件bus.js

<template> <div> <h1>app</h1> <one></one> <two></two> </div></template><script>import one from "./one.vue"...

2019-11-04 18:11:27 3885 4

原创 provide inject越级得实例

<template> <div> <child ref="chil"> <span slot-scope="props" ref="span"> {{props.value}} {{props.aaa}} {{value}}</span> </child> val...

2019-11-04 15:45:44 3759

原创 this.$refs

给组件加 ref打印结果 this.$refs.comp 是 vue 组件,this.$refs.span 打印出来的是 html 节点,这也是 ref 用在组件和 html 原生标签上的区别。可以通过 $refs 得到组件,进而调用组件的变量和方法,如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容(推荐用 props ...

2019-11-04 14:04:09 29991 1

原创 scoped slot插槽模板使用的属性是组件中的属性

如果希望插槽模板中使用的属性是组件中的属性时,就用到了 scoped slot。<template> <div> <child> <h1 slot="asd" slot-scope="props">{{props.value}}</h1> <h2 slot="dsa" sl...

2019-11-04 13:55:16 4580

原创 作用域插槽slot

通常,插槽内使用的属性,使用的是引用组件的组件的属性值。<template> <div> <child v-model="value"> <span>{{value}}</span> </child> </div></template><scrip...

2019-11-04 13:30:08 3883

原创 slot具名插槽 VUE子组件自定义事件在父组件显示

slot具名插槽 通过 slot 的 name 属性可以指定插入多个内容。VUE子组件自定义事件在父组件显示<template> <div> <h3>父组件</h3> 输入得显示:{{value}} <child v-on:huoQuNums="aaa"> <span slot="hea...

2019-11-04 11:18:11 4690

原创 slot 插槽 简单使用

<template> <div> <comp-one v-model="value" :aaa="value"> <span>this is content</span> <div>hahah</div> </comp-one> </div>...

2019-11-04 10:10:09 3780

原创 vue-cli生成项目地址去掉#号

vue的路由在默认的hash模式下,url会带有一个#去掉的话加上mode: 'history', 板成history模式就可以了如果改变之后样式出现问题可以把./换成/修改前:<link rel="stylesheet" href="./static/css/base.css">修改后:<link rel="stylesheet" href="/static/cs...

2019-11-01 16:24:39 6455

原创 react入坑(三)选中未选中

// import React from 'react';// import ReactDOM from 'react-dom';// import './index.css';// import App from './App';// import * as serviceWorker from './serviceWorker';// ReactDOM.render(<App...

2019-10-31 19:54:35 6037

原创 react入坑 this.prop (二)

我今天刚看react,也不知道理解的对不对,然后画了一个图。。我觉得就是 ReactDOM.render先去在页面id为root的地方用.render方法渲染,那么渲染什么呢,就是这个Counter组件。这个组件里更新页面的方式就是组件里的reder()方法,在调用Cunter组件的时候 , 可以加上name = “xxx” 当然也可以 写上 aaa=111 bbb=222 然后在组件内部用th...

2019-10-31 19:17:18 5870

原创 react入坑 脚手架搭建项目(起步)

先装脚手架npm install -g create-react-app创建项目create-react-app 你的项目名启动项目是npm run start我第一次安装的时候卡死了,,也不知道什么原因。。

2019-10-31 19:02:19 5398

原创 react入坑(一)点击按钮加减

// import React from 'react';// import ReactDOM from 'react-dom';// import './index.css';// import App from './App';// import * as serviceWorker from './serviceWorker';// ReactDOM.render(<App...

2019-10-31 18:56:05 7840

原创 axios 模块化管理接口

// Http.js// 在http.js文件中,处理axiosimport axios from 'axios'// 引入qs模块,用来序列化post类型的数据import QS from 'qs'import { Http2SecureServer } from 'http2';// 环境的切换// 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹...

2019-10-29 15:34:49 5687

原创 vue引入css js模块

<style lang="stylus" rel="stylesheet/stylus" scoped>@import '~src/stylus/mixin';@import '~src/styles/base.styl';@import '~src/styles/page-img.styl';@import '~src/styles/page-common.styl';&l...

2019-10-29 14:48:59 5765

原创 移动端meta标签积累中

<head> <meta charset="UTF-8"> //通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。IE = edge告诉IE使用最新的引擎渲染网页,chrome = 1则可以激活Chrome Frame 。 <meta http-equiv="X-UA-Compatib...

2019-10-29 13:58:30 5397

原创 vue项目适配手机端 lib-flexible px2rem-loader px转rem

在新公司熟悉项目时发现项目写的都是以px为单位,但是页面上显示的都是rem单位。。。这是什么鬼。。翻了项目结构也没找到在哪里适配的rem。。。然后也不好意思问别人。。。然后就。。。在网上查了一下,原来真的有一种方法可以直接把px转换成rem的方法,,是lib-flexible配合px2rem-loader插件然后自己就试着做了一下,真的很好用。。1.首先是安装:lib-flexible...

2019-10-28 18:09:07 5691 4

原创 vuex

npm install vuex --save//main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'imp...

2019-10-28 15:57:06 5398

原创 vue v-bind:class

<template> <div> <h3>styleDemo</h3> <div v-bind:class="{ active: isActive }"></div> </div> </template><script>expor...

2019-10-28 13:36:59 5440

原创 vue父传子 子传父 prop定义方法

简单的例子 没有多余代码,父传子<template>//父组件 引用子组件aaa 两种写法传递num1,num2 <div> <aaa v-bind:father1="num1" :father2="num2"></aaa> </div></template><script>import ...

2019-10-27 11:53:25 10819

原创 ps界面布局及性能优化

左侧为工具栏,选中每种工具上边都会出现对应属性如果窗口变乱可以点击上方 窗口 - 工作区 - 复位基本功能编辑-首选项-常规 可以进行设置

2019-09-02 10:20:30 4636

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除