<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[tyoubinn的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/tyoubinn</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; tyoubinn]]></copyright><item><title><![CDATA[在vue-element-admin项目中Post 请求带参数 报请求超时]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109314161</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109314161</guid><author>tyoubinn</author><pubDate>Tue, 27 Oct 2020 16:44:59 +0800</pubDate><description><![CDATA[Axios 如果发送Post请求，并且带上请求参数时，会一直报请求超时，如下
// src/api/test.js
import request from '@/utils/request'

export default {
  test () {
    return request({
      url: '/test',
      method: 'post',
      data: {
        "name": "张三"
      }
    })
  }
}


这个问题是因为mo]]></description><category></category></item><item><title><![CDATA[在vue-element-admin项目中解决跨域问题]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109313618</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109313618</guid><author>tyoubinn</author><pubDate>Tue, 27 Oct 2020 16:30:30 +0800</pubDate><description><![CDATA[在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置

devServer: {
 	// ...
    before: require('./mock/mock-server.js'),
    //  开发环境代理配置 解决跨域问题
    proxy: {
      [process.env.VUE_APP_BASE_API]: { //  是.env.development 文件的 /dev-api
        target: ' https://w.]]></description><category></category></item><item><title><![CDATA[面试题（八）vuex常见面试题]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109293892</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109293892</guid><author>tyoubinn</author><pubDate>Tue, 27 Oct 2020 14:34:12 +0800</pubDate><description><![CDATA[1. vuex 是什么？怎么使用？哪些功能场景使用它？
答：vue框架中状态管理。在 main.js 引入 store，注入。
新建了一个目录store.js，…export。
场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车
2.vuex有哪几种属性？
答：有五种，分别是 State、Getter、Mutation、Action、Module
state =&gt; 基本数据（数据源存放地）
getters =&gt; 从基本数据派生出来的数据
mutations =&gt; 体积更改数]]></description><category></category></item><item><title><![CDATA[面试题（七）vue路由相关]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109292255</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109292255</guid><author>tyoubinn</author><pubDate>Mon, 26 Oct 2020 17:11:26 +0800</pubDate><description><![CDATA[1. mvvm框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向数据绑定技术，就说View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
2.vue-router是什么？它有哪些组件？
答：vue用来写路由的一个插件。router-link、router-view
3.active-class是哪个组件的属性？
答：vue-router模块的router-link组件。children数组用来定义子路]]></description><category></category></item><item><title><![CDATA[面试题（六）vue生命周期函数]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109240984</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109240984</guid><author>tyoubinn</author><pubDate>Mon, 26 Oct 2020 16:17:04 +0800</pubDate><description><![CDATA[1. 什么是 vue 生命周期？有什么作用？
答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。（生命周期钩子就说生命周期函数）例如，如果要通过某些插件操作 DOM 节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted中进行。
2. 第一次页面加载会触发哪几个钩子？
答：beforeCreate，crea]]></description><category></category></item><item><title><![CDATA[面试题（五）常见vue相关面试题总结]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109202704</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109202704</guid><author>tyoubinn</author><pubDate>Fri, 23 Oct 2020 13:29:55 +0800</pubDate><description><![CDATA[1.vue 优点
答：

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解]]></description><category></category></item><item><title><![CDATA[vue自定义指令 —— directive的用法]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109225673</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109225673</guid><author>tyoubinn</author><pubDate>Thu, 22 Oct 2020 17:16:13 +0800</pubDate><description><![CDATA[Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。
在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。
1. 注册
假设我们需要自定义一个 v-focus 指令，即在  或  标签初始化时获得焦点。
注册自定义指令分为全局注册与局部注册两种：
全局注册：
// 注]]></description><category></category></item><item><title><![CDATA[vue中数组变动更新检测]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109223527</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109223527</guid><author>tyoubinn</author><pubDate>Thu, 22 Oct 2020 16:42:51 +0800</pubDate><description><![CDATA[Vue包含两种观察数组的方法分别如下：
1. 变异方法
变异方法会改变被这些方法调用的原始数组，它们也将会触发视图更新，这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2.非变异方法
非变异方法与变异方法的区别就说，非变异方法不会改变原始数组，总书返回一个新数组，当使用非变异方法时，可以用新数组替换旧数组，非变异方法大致有：filter() , concat(), slice()
arr = arr.filter(item]]></description><category></category></item><item><title><![CDATA[面试题（四）兼容性问题之1px边框变粗问题]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109148106</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109148106</guid><author>tyoubinn</author><pubDate>Sun, 18 Oct 2020 18:31:35 +0800</pubDate><description><![CDATA[造成边框变粗的原因
其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

1. 0.5px边框
retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和]]></description><category></category></item><item><title><![CDATA[面试题（三）DIV水平居中]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109147949</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109147949</guid><author>tyoubinn</author><pubDate>Sun, 18 Oct 2020 18:15:27 +0800</pubDate><description><![CDATA[方法一
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
&lt;style&gt;
	.container{
		position: relative;
	}
	.inner{
		position:absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50% -50%);
	}
&lt;/style&gt]]></description><category></category></item><item><title><![CDATA[面试笔记（二）BFC及其应用]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109147880</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109147880</guid><author>tyoubinn</author><pubDate>Sun, 18 Oct 2020 17:54:15 +0800</pubDate><description><![CDATA[一、常见定位方案
我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案：

普通流(normal flow)


在普通流中，元素按照其在HTNL中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染成完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。


浮动(float)


在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或者右边偏移]]></description><category></category></item><item><title><![CDATA[面试题笔记(一）]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109147836</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109147836</guid><author>tyoubinn</author><pubDate>Sun, 18 Oct 2020 17:52:06 +0800</pubDate><description><![CDATA[浏览器的运行机制：

构建DOM树
构建渲染树
布局渲染树
绘制渲染树

重绘
触发重绘的条件：改变元素外观属性。如：color background-color
重排（重构/回流/reflow)
元素的规模尺寸，布局，隐藏等属性改变时会触发重排，所以重排必定会引发重绘，但重绘不一定会引发重排。
触发条件：

页面渲染初始化
添加或删除可见的DOM元素
元素位置的改变，或者使用动画
元素尺寸的改变——大小，外边距，边框
浏览器窗口尺寸的变化（resize事件发生时）

重绘重排的代价：耗时，导致浏览器卡慢
]]></description><category></category></item><item><title><![CDATA[webpack热更新原理]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109115571</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109115571</guid><author>tyoubinn</author><pubDate>Fri, 16 Oct 2020 14:16:13 +0800</pubDate><description><![CDATA[文章首发于@careteen/webpack-hmr
目录

HMR是什么

使用场景


配置使用HMR

配置webpack
解析webpack打包后的文件内容
配置HMR


HMR原理
debug服务端源码

服务端简易实现
服务端调试阶段


debug客户端源码

客户端简易实现
客户端调试阶段


问题
总结

HMR是什么
HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉]]></description><category></category></item><item><title><![CDATA[uni-app视频播放及下载功能]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109099739</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109099739</guid><author>tyoubinn</author><pubDate>Thu, 15 Oct 2020 16:32:02 +0800</pubDate><description><![CDATA[视频列表页

&lt;template&gt;
  &lt;view class="video_main"&gt;
    &lt;view
      class="video_item"
      v-for="item in list"
      :key="item.id"
      @click="handleGoVideo(item)"
    &gt;
      &lt;image
        mode="widthFix"
        :src="item.img"
   .]]></description><category></category></item><item><title><![CDATA[uni-app中定义全局数据]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109098178</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109098178</guid><author>tyoubinn</author><pubDate>Thu, 15 Oct 2020 15:32:26 +0800</pubDate><description><![CDATA[1. 可以将参数挂载到Vue.prototype上
// main.js
// Vue.prototype.baseURL = 'http://uniapp.dcloud.io' // 全局参数

在 pages/index/index.vue 中调用
&lt;script&gt;  
    export default {
        onLoad(){  
            console.log(this.baseURL);  
        }
    }  
&lt;/script&]]></description><category></category></item><item><title><![CDATA[uni-app下载图片到系统相册]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109078436</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109078436</guid><author>tyoubinn</author><pubDate>Wed, 14 Oct 2020 17:04:51 +0800</pubDate><description><![CDATA[使用到的 API 有 :
uni.downloadFile
uni.saveImageToPhotosAlbum
&lt;template&gt;
  &lt;view&gt;
    &lt;view class="download"&gt;
      &lt;view
        class="download_btn"
        @click="download"
      &gt;下载图片&lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&]]></description><category></category></item><item><title><![CDATA[uni-app项目中封装手势滑动组件]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109057823</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109057823</guid><author>tyoubinn</author><pubDate>Wed, 14 Oct 2020 11:15:07 +0800</pubDate><description><![CDATA[小程序原生api中没有封装手势滑动组件
手势封装的思路

给容器绑定两个触屏事件 touchstart 和 touchend
用户按下屏幕事件
按下时间: Date.now() 时间戳
按下坐标: clientX 和 clientY
用户离开屏幕事件
离开时间: Date.now()
离开坐标: clientX 和 clientY
根据两个时间运算判断用户按下屏幕时长是否合法
根据两对坐标判断距离是否合法 判断用户滑动方向

&lt;!-- demo.vue--&gt;
&lt;template&gt;
 ]]></description><category></category></item><item><title><![CDATA[uni-app自定义组件的使用]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109056204</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109056204</guid><author>tyoubinn</author><pubDate>Tue, 13 Oct 2020 17:37:35 +0800</pubDate><description><![CDATA[以查看专辑详情为例：
步骤

在 src 根目录下新建 components目录，存放公共组件

&lt;!-- src/components/goDetail.vue --&gt;
&lt;template&gt;
  &lt;view @click="handleClick"&gt;
    &lt;slot&gt;&lt;/slot&gt; &lt;!-- 插槽占位 --&gt;
  &lt;/view&gt;
&lt;/template&gt;
&lt;script&gt;
export defau]]></description><category></category></item><item><title><![CDATA[uni-app中使用第三方日期插件moment.js]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109013353</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109013353</guid><author>tyoubinn</author><pubDate>Sun, 11 Oct 2020 16:31:52 +0800</pubDate><description><![CDATA[官方地址： http://momentjs.cn/
安装
npm install moment --save

引用
import moment from 'moment'

export default {
  data () {
    return {
      stime: 1584720182000
    }
  },
  mounted () {
    console.log(moment(this.stime).format('MM')) // 获取月份
    console.log(]]></description><category></category></item><item><title><![CDATA[axios在vue-cli构建项目中的使用]]></title><link>https://blog.youkuaiyun.com/tyoubinn/article/details/109008092</link><guid>https://blog.youkuaiyun.com/tyoubinn/article/details/109008092</guid><author>tyoubinn</author><pubDate>Sun, 11 Oct 2020 09:49:11 +0800</pubDate><description><![CDATA[1. 安装
npm install --save axios vue-axios

2. 引入
// main.js
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import axios from 'axios' // 1. 引入

// 2. 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'

// 3. 通过axi]]></description><category></category></item></channel></rss>