yuan5801551的博客

原创 svg入门

提供一个模板 //数字都代表坐标 <svg width="700" height="1000"> //所有svg代码必须写在svg里 <defs> //隐藏defs内部的svg代码 <g id='leftalign'> //定义一个组合，应该写在defs里 <line x1="3" y1="3" x2="4...

原创 vue-router完整的导航解析流程

import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import BAR from './components/bar'import FOO from './components/foo'import HOME from './components/home'import ...

原创 ES5的继承与ES6的继承

function obj2(x,y){ this.name=x, this.age=y} 创建一个构造函数（构造方法用来产生对象）obj2.prototype.getName=function(){return this.name}//在obj2的原型链上加上一个方法getName//基础知识：ES5只有函数有prototypelet OBJ2 = new obj2('j...

原创 JavaScript核心之Array

勾代表会改变原数组

原创 JavaScript核心之Function(函数)

成为粉丝免费查看更多JavaScript核心库

原创 JavaScript核心之Object

原创 JavaScript核心之Number

原创 JavaScript核心之RegExp

原创 JavaScript核心之String（字符串）的方法

带小旗子的是正则方法

原创 JS中所有数组方法

√代表会改变原数组的方法

原创 移动端1px(transform解决)

.divpx:after{ display: inline-block; width: 200%; position: relative; border-top: 1px solid black; content: ''; transform:scale(.5); ...

原创 带有全选功能的多选框

技术：冒泡、change事件、checked属性冒泡change事件: checkbox 自带的事件在选项改变时触发checked属性: checkbox自带的属性选中时值为true 反之为false<div id='app'> <label for="num1"><input type="checkbox" name="num" id="...

原创 Vue2.x文档细读（基础篇）

一本好书就是一个好老师Vue官方提供的文档非常详细，我觉得有必要啃一啃，写一些自己的心得，减少遇坑，Vue文档里把很多坑都列出来了，写这篇是温习一下我看的基础篇，如果错误，请指正Vue官方文档Vue的特性：核心特性不用触碰DOM，所有操作DOM的都由VUE完成，我们只关注逻辑层即可（例：在methods中修改data）一个组件其实就是一个VUE实例，一个组件本质上是一个拥有预定义选项...

原创 JS中事件的冒泡以及会遇到的问题

冒泡的定义百度百科：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个...

原创 VUE2.x中key关键字的作用以及为什么不能用index做key（解读并展示官网说法）

直接上图本文适合人群：不懂为什么要加key<div class="content"> <ul> <li v-for="(list,index) in lists"> {{list.id}}-{{list.name}} <button @click='...

原创 CSS响应式布局加流式布局

CSS响应式布局div{ border:1px solid rebeccapurple; } .header{ width: 80%; height: 100px; margin: 0 auto; background-color: #4CAF50; } .content{ ...

原创 CSS中之高度坍塌及解决办法

高度坍塌是什么高度坍塌：在流式布局中十分常见。当父元素没有高度，子元素设置了float时。原因：子元素脱离文档流，无法撑开父元素高度坍塌的’症状’： <div class="content"> 123 <div class="content-middle"> 高度坍塌问题 </div...

原创 CSS3动画之行星运行轨迹（钟表也行）

CSS3动画之行星运行轨迹（钟表也行）先看一下我们要的效果当然圆球是可以动的，就像行星一样沿着轨迹动，手机里很多时间表也是这样动的是不是非常有意思!我们先介绍一下知识点 - CSS3动画-@keyframes - CSS3 2D旋转-transform:rotate(angle)用法@keyframes name{ from{somecode}to{somecode} ...

原创 CSS经典布局之垂直、水平居中(在宽，高已知的情况下)

CSS经典布局之垂直、水平居中垂直、水平居中是前端需求中很常见的在图中我们可以看到span’水平居中’实现了垂直、水平居中，那么怎么实现呢HTML代码<div class="content"> <span class="content-span"> 水平居中 </span></div&gt...

原创 CSS经典布局之双飞燕布局

CSS经典布局之双飞翼 布局双飞翼就是两边不变中间伸缩，看淘宝就知道了第一种实现方法:flex布局css代码 .content{ display: flex; } .content-left{ flex: 0 0 200px; width: 200px; hei...

原创 vue-cli3.x版本打包的项目配置到github上的流程以及遇到的问题解决方法（本地json的引入）

vue-cli3.x版本打包的项目配置到github上的流程以及遇到的问题解决方法流程：安装vue-cli、使用vue create （projectname）构建项目 、vue run build打包项目经过这一段流程我们的根目录产生一个webpack打包出来的dist目录我们直接用过双击打开index.html发现是一片空白，而且报错，这是因为我们项目的根路径默认是’/’我们应该修改...

原创 vue-router中用'*'指定默认组件的时候不加载router-link-exact-active的问题

vue-router中用’*'指定默认组件的时候不加载router-link-exact-active的问题在vue-router中，我们想要定义默认主页，就可以使用’*'通配符：优点:{1,可以解决404问题2,可以定义默认页面}缺点：{1,给页面带来未知的隐患}router-link-exact-active，关于这个我们知道，在vue-router中这个是可以直接使用而不用...

原创 vue2.x在模块化编程中子组件必须修改props值时

vue2.x在模块化编程中子组件必须修改props值在vue官方文档中明确规定props的数据是单向的,我们不应该试图在子组件中修改props！也给出了两个解决方案我们使用第一种方法 因为暂时数据不用变（其实两者差不多）当我们在父组件中传值之前，我们都会从后台异步获取数据。在这里有一个在浏览器查看效果时的注意事项（因为代码和官网相差无几就不贴了）如果你直接在子组件的页面中刷新，将导致...

原创 vue2.x中数组length属性报错的问题Error in render: cannot read property 'length' of undefined

vue2.x中代码使用length属性出现的报错时//这里是我的代码<div class="supports-count" @click="showDetail"> <span class="count">{{seller.supports.length}}个</span> <span class="icon-keyboard_arrow_...