AliveSeven's Blog

前言：很多时候，我们业务中需要对鼠标点击的元素进行拖拽，使用原生JS实现这个方法，主要用到鼠标事件和监听。 onmousedown：鼠标按下事件 onmousemove：鼠标移动事件 onmouseup：鼠标抬起事件 注意： 被拖拽的元素一定要是绝对定位，脱离文档流才可以移动 绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。 实现思路 先获取被拖拽元素所能移动的最大距离，超过这个距离就移动不了 给元素的onmousedown绑定一个function(e)事件 获取鼠标按下的原点距离盒子边缘的距离diffX和diffY 设置onmousemove事件，将被拖拽元素的left和top设置 left的值是拖拽之后的那个位置的鼠标的x值减去diffX top的值是拖拽之后的那个位置的鼠标的y值减去diffY 设置鼠标松开事件onmouseup 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555 ...

前言：ref和reactive是干什么用？就是把数据变成「响应式」的 Vue3中实现数据响应式，用到的是组合式API中的ref和reactive函数，不同的是ref函数一般定义基本类型数据，而reactive函数用于定义一个对象类型的响应式数据。 Vue2和Vue3中的响应式vue2的响应式是通过Object.defineProperty（数据劫持）方法，针对对象和数组有两种处理： 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持 ref函数 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） JS中操作数据： xxx.value，因为ref 接收参数并将其包裹在一个带有 value property 的对象中返回 模板中读取数据: 不需要.value，直接：<div>{{xxx}}&l ...

前言：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定，this最终指向调用它的对象。 全局作用域或函数调用下 全局作用域或者普通函数中 this 指向全局对象 window。 123456789//直接打印console.log(this) //windowfunction A(){ var a = 'HelloWorld' console.log(this.a) // undefined console.log(this) // window}A() 方法调用下 方法调用中谁调用了，this 指向谁 当函数被保存为一个对象的属性时，它就可称为这个对象的方法。当一个方法被调用时，this被绑定到这个对象上 1234567var A = { a : 'Hi', sayHi : function(){ console.log(this.a) // Hi }}A.sayHi() 因为是A.b调用的这个函数 ...

前言：很多时候我们在开发的时候需要动态引入图片，在Vue2中可以用require()来实现这个，但是Vue3中却不支持require()。 方法一 给scr绑定一个函数 1<img :src="getImageUrl(img)" alt="" /> 获取照片的函数 123function getImageUrl(img : any) { return new URL(`../assets/Img/${img}.jpg`, import.meta.url).href;} new URL() 用于创建一个新 URL 对象 1new URL(url, [base]) url —— 完整的 URL，或者仅路径（如果设置了 base） base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。 import.meta.url是base url（根链接）

我们在进行组件化开发的时候，可能想让当前类有不同的样式，或者是多种样式。 亦或是我们想要通过props来进行父组件给子组件传值，然后子组件根据传过来的值进行判断，不同的值对应不同的样式（有点像组件库中的size） 这时候就引出上题了 操作方法其实很简单，只需要给class加上{ '类名' : '条件' }即可，比如 1<div class="pop" :class="{ popB : popAct == true}" > 这里就给盒子加入pop 和 popB的类名了，popB是**(popAct == true)**这个条件为true的时候才触发，也就是popAct == false的时候，这个时候就没有popB这个类名了。 即： 当popAct == true的时候，class = “pop popB” 当popAct == false的时候，不满足触发popB的条件，class = “pop” 多个条件的情况下1<div :class=&quo ...

定义和用法animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。 默认值： none 0 ease 0 1 normal 继承性： no 版本： CSS3 JavaScript 语法： object.style.animation=”mymove 5s infinite” 属性 属性 描述 值 @keyframes 使用@keyframes可以规定动画 animation-name 规定动画的名称 keyframename animation-duration 规定动画完成一个周期花费的秒或毫秒 time animation-timing-function 规定动画的速度曲线 linear ...

前言：博主在香港之前买了一部POCO X3 PRO，本来想着想试试小米的国外产品，整体来说在境外的体验还不错，但是回到大陆的时候，连接国内的WIFI出了个问题，网络连接受限，而且网速被限制了，这样就让我很难受，而且手机是小米的，也不好Root，为了解决这个问题，我也是费尽心思，去下载了一个叫ADB的工具包，然后对其进行修复。 解决方法这里主要讲述一下手机没有ROOT的情况下的解决方案，有ROOT的暂时不做讨论 先到网上下载ADB工具包，然后解压到C盘或者随便某个盘的位置。 这里我直接放链接吧！ 链接: https://pan.baidu.com/s/1mfrgDH5q_tedQnfGYbV91A 提取码: tha6 复制这段内容后打开百度网盘手机App，操作更方便哦 然后解压之后，需要打开电脑环境配置一些adb命令，比如我这里放在C盘的adb文件夹下面 那么我就要把这个adb.exe的所在路径C:\adb，配到系统环境变量里面去，类似于配JAVA的JDK，Vue的Node环境一样差不多而已。 配置好之后，手机打开开发者模式，具体操作就是点击我的手机→全部参数→多次点击MIUI版 ...

Linux目录和文件 pwd //显示当前工作目录 mkdir mydir //创建工作目录 cd mydir //更改工作目录 rmdir mydir //删除工作目录 touch myfile //创建文件 mv myfile mydir //移动目录或文件 cp myfile myfir //复制目录或文件 rm -rf mydir //删除目录或文件 ls //列出所有文件和目录 ls -a //查看所有文件 ls -l //详细显示 文件内容显示和处理 cat > myfile //创建文件并编辑内容（ctrl+D结束编辑） cat -n myfile //查看文件 sort myfile //对文件内容进行排序 sort -r myfile //逆序 uniq myfile //检查文件中的重复内容 cut -b(-c)(-d) 2(3) myfile //对文件内容进行剪切 paste myfile02 myfile01 //对文件内容进行粘贴 02-）01 压缩 zip myfile.zip myfile //压缩 zip -d my ...

computed computed 是基于响应性依赖来进行缓存的。只有依赖数据发生改变，才会重新进行计算，computed是计算属性的意思，watch是监听的意思。 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化的值。 如果函数所依赖的属性没有发生变化，从缓存中读取。 必须有return返回。 使用方法和data中的数据一样，但是类似一个执行方法。 实例1234567891011121314151617181920212223<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app" class="app"> <input type="text" v-model="firstName"> <input type=" ...

前言 什么是跨域？ ​ 简单来说就是有上图这样的问题出现，控制台报错。 为什么会出现跨域？ 受到浏览器的同源策略限制，浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。 跨域问题主要分出现在开发环境（本地运行）中的跨域，以及生产环境（部署于线上的环境）中的跨域 开发环境（即本地运行）在Vue2.0中 先配置好axios的baseURL，即下面代码段中的 axios.defaults.baseURL = ‘/api/‘，作用是我们每次发送的请求都会带一个/api/的前缀。这段代码可以写在main.js中，也可以写在一个request.js的文件中单独作为axios的配置文件，方便维护。 12345678910111213141516// 配置请求的根路径axios.defaults.baseURL = '/api/'// 挂载到原型对象之前 先设置拦截器 通过axios请求拦截器添加token，保证拥有获取数据的权限axios.interceptors.request.use(config =>
...