- 博客(69)
- 收藏
- 关注
RSS订阅
原创 （最新）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
11111
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
6250
原创 iframe自动播放
今天遇到一个问题，如果在页面中想应用腾讯视频的视频并且在页面自动播放该怎么办？这里会有一个<iframe></iframe>地址，我们将它复制下来到当前页面，这样当前页面就显示了这个视频那么如何让这个视频自动播放呢？设置autoplay = true就可以了 ， 但是在标签上设置后并没什么鸟用，是因为页面涉及到跨域，所以可以用地址栏拼接的方式就可以实现自动播放的功...
2018-12-14 17:00:35
24193
原创 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
5397
原创 MarkDown简介（深度解析MarkDown用法）
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...
2018-09-14 17:13:53
6790
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
682
原创 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
1526
原创 模拟动态数据累计增加
<template> <div> <button @click="getAdd">点击增加一百</button> <h1>数值：{{ num }}</h1> <input type="text" v-model="num" />' <input type="text" v-model="num2" /> </div></template><
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
2394
原创 数组去重排序
// 去重 var obj = {}; this.list = this.list.reduce(function(item, next) { obj[next.id] ? '' : obj[next.id] = true...
2019-11-26 16:06:48
2651
原创 小程序
app.json{ // 小程序公共设置 // app。json可以对五个功能进行设置 配置页面路径 窗后表现 配置标签导航 配置网络超时 配置debubg模式 // 页面路径 "pages": [ // 配置页面路径 页面路径定义了一个数组 存放的访问路径 她是进行页面访问的必要条件 /*如果在这里没有配置页面的访问路径，页面被访问时就会报错 如果在这里定义了页...
2019-11-13 09:13:19
3321
原创 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
29988
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
4689
原创 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
3779
原创 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
6454
原创 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
5685
原创 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
5690
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
4634
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人