<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[makemoreefforts的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/makemoreefforts</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; makemoreefforts]]></copyright><item><title><![CDATA[echarts折线图：X、Y轴单位、去掉折线点]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/119784395</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/119784395</guid><author>makemoreefforts</author><pubDate>Wed, 18 Aug 2021 17:58:05 +0800</pubDate><description><![CDATA[全部代码：
x轴每个数据的单位：
 xAxis: {
        show:true,
        type: 'category',
        boundaryGap: true,
        name:"月",
        data: ['1', '2', '3', '4', '5', '6', '7',"8","9","10","11","12"],
        axisLabel: {
            // 每个数据后面都会带有单位
            // f]]></description><category></category></item><item><title><![CDATA[echarts饼图 饼图分隔线、图例的位置、图例的类型、图例后面带数据]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/119783201</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/119783201</guid><author>makemoreefforts</author><pubDate>Wed, 18 Aug 2021 16:54:59 +0800</pubDate><description><![CDATA[先看下实现之后的效果：

饼图的分隔线：实际上是通过给边框宽度和边框色实现的
series:[
	itemStyle:{
            // 间隔
              borderWidth:2,
              borderColor:'#000'
          }
]

注意：上图并没有分隔线 是因为图例是环形（环形是通过给图例的color设置透明色和borderWidth实现的） 图例也使用了borderColor（会继承饼图的） 所以当饼图设置了borderCol]]></description><category></category></item><item><title><![CDATA[Vue父子、兄弟、无关组件传值]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/118659449</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/118659449</guid><author>makemoreefforts</author><pubDate>Sun, 11 Jul 2021 22:18:18 +0800</pubDate><description><![CDATA[组件传值
一、基本的组件传值
1、父子组件(是两个组件同时都在页面上展示着（都在内存中）)
//父子组件的代码格式（标签的嵌套）

父组件模板里面有子组件使用
     &lt;Son&gt;&lt;/Son&gt;


1）、父给子
①、props
②、vuex
//子组件
&lt;template&gt;
     ....
&lt;/template&gt;
&lt;script&gt;
    export default{
    	props:['name'],//子组件的属性
   }
&lt]]></description><category></category></item><item><title><![CDATA[VUE哔哩哔哩移动端项目使用vant 实现发布功能（上传文件）]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/118329564</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/118329564</guid><author>makemoreefforts</author><pubDate>Tue, 29 Jun 2021 22:58:02 +0800</pubDate><description><![CDATA[bilibili发布页面主要有：发布按钮、多行文本框、一个上传图片的按钮（此处使用了vant插件）

组件里面的头部有：左返回按钮（使用vant）、发布按钮
&lt;div class="top"&gt;
      &lt;van-icon name="arrow-left" class="top-lef" @click="go" /&gt;
      &lt;!-- 给按钮绑定一个class 如果computed返回的是true 就调用rel-highlight 这个css样式--&gt;
     ]]></description><category></category></item><item><title><![CDATA[缓动动画原理]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114952093</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114952093</guid><author>makemoreefforts</author><pubDate>Wed, 17 Mar 2021 22:07:07 +0800</pubDate><description><![CDATA[缓动动画原理
4.4 缓动效果原理

&lt;button&gt;点击夏雨荷才走&lt;/button&gt;
    &lt;span&gt;夏雨荷&lt;/span&gt;
    &lt;script&gt;
        // 缓动动画函数封装obj目标对象 target 目标位置
  
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行  每次点击按钮执行时 都先清除上次的定时器 否则会加快]]></description><category></category></item><item><title><![CDATA[动画原理]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114951412</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114951412</guid><author>makemoreefforts</author><pubDate>Wed, 17 Mar 2021 21:57:54 +0800</pubDate><description><![CDATA[4. 动画原理
4.1 动画实现原理

&lt;style&gt;
        div {
            /* 此元素需要添加定位，才能使用 element.style.left */
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    ]]></description><category></category></item><item><title><![CDATA[mouseenter和mouseover的区别]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114951242</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114951242</guid><author>makemoreefforts</author><pubDate>Wed, 17 Mar 2021 21:44:13 +0800</pubDate><description><![CDATA[mouseenter 鼠标事件

var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseover', function() {
            console.log(11); //经过子盒子 父盒子都会触发
         father.addEventListener('mous]]></description><category></category></item><item><title><![CDATA[元素滚动 scroll系列]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114939070</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114939070</guid><author>makemoreefforts</author><pubDate>Wed, 17 Mar 2021 17:26:17 +0800</pubDate><description><![CDATA[scroll 系列

 &lt;style&gt;
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            /* 添加滚动条 */
            overflow: auto;
        }
  ]]></description><category></category></item><item><title><![CDATA[元素可视区 client系列]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114905839</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114905839</guid><author>makemoreefforts</author><pubDate>Tue, 16 Mar 2021 23:04:59 +0800</pubDate><description><![CDATA[client

client 宽度 和我们offsetWideth 最大的区别就是 不包含边框
&lt;style&gt;
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    &lt;/style&gt;]]></description><category></category></item><item><title><![CDATA[元素偏移量offset系列]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114808599</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114808599</guid><author>makemoreefforts</author><pubDate>Sun, 14 Mar 2021 23:05:14 +0800</pubDate><description><![CDATA[元素偏移量offset系列
offset系列属性
offset 就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移  位置 返回的不带单位的数值
        console.log(father.offsetT]]></description><category></category></item><item><title><![CDATA[location对象]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114710172</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114710172</guid><author>makemoreefforts</author><pubDate>Fri, 12 Mar 2021 22:16:08 +0800</pubDate><description><![CDATA[location对象
5.1 什么是location 对象
Window 对象给我们提供了一个 location属性 用于 获取或设置窗体的URL，并且可以用于 解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。

案例：5秒之后跳转页面
1.点击按钮跳转
 btn.addEventListener('click', function() {  
            // console.log(location.href);
            locati]]></description><category></category></item><item><title><![CDATA[定时器（倒计时）]]></title><link>https://blog.youkuaiyun.com/makemoreefforts/article/details/114679484</link><guid>https://blog.youkuaiyun.com/makemoreefforts/article/details/114679484</guid><author>makemoreefforts</author><pubDate>Thu, 11 Mar 2021 23:14:15 +0800</pubDate><description><![CDATA[BOM 即浏览器对象模型
它提供了独立于内容而与 浏览器窗口进行交互的对象 ，其核心对象是window.
DOM 和 BOM的区别：
DOM

文档对象模型；
DOM就是把 文档 当做一个对象来看待；
DOM的顶级对象是 document ；
DOM主要学习的是操作页面元素；
DOM是W3C标准规范；

BOM

浏览器对象模型；
把 浏览器 当做一个对象来看待；
BOM的顶级对象是 window ；
BOM学习的是浏览器窗口交互的一些对象；
BOM是是浏览器厂商在各自浏览器上定义的，兼容性较差；

BOM]]></description><category></category></item></channel></rss>