哦豁*-CSDN博客

原创 vue中使用防抖和节流的方法

可以先在页面中创建一个utils文件，在utils中创建common.js文件使用防抖和节流防抖的方法:export const Debounce = function (fn, t) { let delay = t || 300; let timer = null; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() =&

2022-04-01 11:19:05 1312

原创使用directives进行拖拽

<div class="bg" v-drag>.bg { width: 100px; height: 100px; background-color: blue; position: absolute;} directives: { drag: { bind() { }, inserted(el) { el.onmousedown = (e) =&g.

2022-03-31 17:30:34 557

原创 vue动画transition

动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，在过渡/动画完成之后移

2022-02-22 15:15:55 182

原创 vue2与vue3的区别

vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数

2022-02-22 15:15:15 123

原创 vue中的$nextTick()

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM翻译成大白话我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举个例子html结构 {{ message }} 修改messagethis.message = ‘修改后的值1’this.message = ‘修改后的值2’this.message

2022-02-17 21:18:58 642

原创 Element图片上传

前端界面显示的图片为本地路径的图片；将数据传递给后端后，后端进行图片路径存储操作上传图片格局<el-col :span="12"> <span style="line-height: 40px">车辆照片上传</span> <template> <el-alert title="温馨提示：点击即可修改图片，只允许上传.jpg或.png格式 **非必选**"

2022-02-15 13:36:23 466

原创 vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。<div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p></div><script src="/node_modules/vue/dist/vue.js"></script><script type="

2022-02-10 15:18:10 112

原创 vue组件通信（父传子，子传父，兄弟组件传值）

1. 父组件传子组件使用props来实现在父组件的子组件标签上绑定一个自定义属性，用于绑定要传递的值，在子组件中使用prop属性进行数据的接受，可以直接使用，绑定的属性名和prop定义的名字必须一致，否则无法接受数据2. 子组件传父组件通过自定义事件来实现在子组件元素中绑定一个事件，点击触发事件，事件中使用e m i t ( 自定义事件，传递的值 ) , 向父组件发布信息，在父组件的子组件元素上绑定一个自定义事件，事件

2022-02-10 11:38:17 243

原创简介游戏s

如何制作外挂一、先说一下写一个外挂需要什么条件1、熟练的C语言知识目前的外挂大部分都是用BC或者是vc写的，拥有熟练的C语言知识是写外挂的基本条件2、具有很强的汇编基础一般游戏都不可能有原代码的，必须靠反汇编或者跟踪的办法来探索其中的机理，所以有强的汇编基础也是必不可少的条件3、熟练掌握跟踪和调试的工具有了上面2个条件后，掌握一些工具也是很有必要的跟踪的工具，softice当然是不二之选，至于反汇编的工具，我推荐用IDA PRO这个工具反汇编出来的代码结构清晰，非常好读如果你不具有上面

2022-02-09 20:00:51 134

原创什么是虚拟DOM

什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。在vue中如何应用虚拟DOM的通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作，经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能...

2022-02-08 18:41:52 393

原创 vue常用指令

v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容同上v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用不能单独使用否则报错模板编译错误v-bind 动态绑定作用

2022-02-08 07:37:13 49

原创 Vue生命周期的执行过程

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated

2022-02-07 16:43:26 197

原创 vue路由，路由传参（parmas,query）

一、Vue路由基础用法：1 .安装npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from ‘vue-router’Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from ‘./components/BYHome.vue’import BYNews from ‘./components/BYNews.vue’import HelloWorld from ‘

2022-02-07 08:10:54 238

原创 vue之filter过滤器

概念：过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.Vue.filter(‘global-filter’,(val,…args)=>{console.log(需要过滤的数据是:${val})return val + ’ 过滤器追加的数据’})var app = new Vue({el: ‘#a

2022-02-07 08:07:46 520

原创 vue组件化开发

一般我们在面试的时候面试官通常会问以下问题你封装过组件吗？说一下组件封装？你在项目中是如何封装组件的？…而我的回答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多

2022-02-07 08:04:17 1191

原创 mvvm和mvc

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})

2022-02-07 08:00:46 146

原创 vue中Computed、Methods、Watch区别

一、计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。{{message.split('').reverse().join('')}}{{reverseMessage}}computed: { reverseMessage: function () { return this.message.split('').reverse().joi

2022-02-07 07:59:22 168

原创 Vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。用户名：你的名字是：{{name}}  <script src="/node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> const app=new Vue({ el:'#app', data:{

2022-02-07 07:55:58 91

原创简介vue的双向数据绑定

vue的双向绑定原理及实现一个极简双向数据绑定的示例： var obj = {}; Object.defineProperty(obj,'hello',{ set:function(newVal){ document.getElementById('a').value = newVal; document.getElementById('b').innerHTML = newVal;

2022-02-07 07:53:21 850

原创 v-if与v-show的区别

一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗四、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢

2022-02-07 07:51:25 383

原创组件的data必须是一个函数

、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } } ```组件中定义data属性，只能是一个函数如果为组件data直接定义为一个

2022-02-07 07:49:32 42

原创修改this的指向,this的指向

修改this的指向的3种方法call，apply，bind在浏览器中this指向window在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；apply、call、bind都是js给函数

2022-01-15 11:07:24 151

原创路由守卫的几种方法

全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})每个守卫方法接收三个参数：to: Route: 即将要进入的目标路由对象

2022-01-12 20:40:10 2169

原创 css与h5

CSS3一、css3新特性css3中新增的特性：选择器，背景和边框属性，文本效果，2D/3D转换选择器常规选择器:last-child 选择元素最后一个:first-child 选择元素第一个:nth-child(1) 选择第几个，写1就是第一个:nth-child(even) 按照偶数进行选择:nth-child(odd) 按照奇数进行选择:disabled 选择每个被禁用的dom元素:checked 选择每个被选中的dom元素:no

2022-01-12 07:40:43 92

原创 vue中点击头像切换图片

页面中 <div class="adatar"> <img :src="adatar ? adatar : require('../assets/wall-0.jpg')" alt /> <input type="file" name accept="image/*" @change="fileChange" /> </div>js中写上export default { name: 'adatar',

2022-01-10 10:35:04 1069

原创盒子居中3种方法

如何让盒子居中第一种父相子绝第二种弹性盒.father{width: 300px;height: 300px;background-color: aqua;display: flex;justify-content: center;align-items: center;}.seed{width: 100px;height: 100px;background-color: azure;}第三种父向子绝.father{width: 300px;height: 300px;

2022-01-09 19:00:16 133

原创 position定位的5个方法

1、position: static是position的默认值意思的没有定位也可以理解为清除定位2、position: relative相对定位给元素设置相对于原本位置的定位，元素并不脱离文档流，原本的位置会被保留，其他的元素位置不会受到影响。3、position: absolute绝对定位设置时注意子绝父相，就是给子元素设置绝对定位时也不要忘了给他的父级元素设置相对定位。如果没有给父盒子设置相对定位的话，他就会一层一层向上找，直到找到body到这时他就会基于body进行定位4、po

2022-01-09 18:58:26 2040

原创使用vuex

概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。安装HTML 中使用 script 标签引入Vue项目中使用 npm 下载安装（需要安装 Node 环境）// 下载npm install vuex --save// 安装import Vue from ‘vue’import Vuex from ‘vuex’Vue.use(Vuex)Vuex 图示Vuex 和单纯

2022-01-06 21:01:41 57

原创盒模型和BFC

盒模型分:标准盒模型和怪异盒模型标准盒模型:一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)标准盒模型用:box-sizing:content-box; 将采用标准模式的盒子模型标准怪异盒模型:一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）怪异盒模型用:box-sizing:border-box; 将采用怪异模式的盒子模型标准css布局中的

2022-01-05 15:52:26 159

原创返回顶部-

var backButton=$('.back_to_top'); function backToTop() { $('html,body').animate({ scrollTop: 0 }, 800); } backButton.on('click', backToTop); $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的...

2022-01-05 07:37:11 81

原创 axios封装

为什么要对axios进行封装可以更方便的管理和修改axios请求域名，假设是一个庞大的项目，只是修改域名就会花费很多的时间和精力，如果对axios进行封装，便能省去了喝多的步骤第一步：首先在开始之前，先安装axios插件在src目录下创建utils文件夹，里面创建一个http.js文件，文件内容如下：// 首先引入axios插件import axios from “axios”;// 引入element-plus插件import { ElMessage } from ‘element-plu

2022-01-03 20:19:56 193

原创 rem使用

下面是手写rem适配1rem的大小等于1html的fontsize的大小 <style> .header { width: 120px; height: 120px; background-color: rgb(74, 173, 91); } .content { width: 120px; height:

2022-01-03 20:07:38 75

原创环境变量都有什么

开发环境 development 使用 npm run serve 启动测试环境 test 使用 npm run test 启动上线环境 production 使用 npm run build 进行打包为什么要配置环境变量修改方便，无需重启项目，无需改代码环境变量配置的要求以 VUE_APP_ 开头，可以通过 process.env.VUE_APP_ 访问。比如,VUE_APP_ENV = ‘development’ 通过process.env.VUE_APP_ENV 访问。..

2021-12-31 07:39:34 133

原创解决跨域的方式

在根目录下新建vue.config.js文件module.exports = { devServer: { proxy: { "/api": { // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api // 1 目标路径这里相当于公共的地址 target: "http://www.sirfang.com",

2021-12-30 15:43:06 308

原创 git是什么

git的使用分支要分主分支和工作分支创建分支的命令 git branch <分支名> 切换分支的命令 git checkout <分支名> 合并分支的命令（必须要在父分支上面要合并需要合并的子分支） git merge <要合并的分支名称> git checkout 查看所有分支带星号的是当前所在的分支删除分支的命令 git branch -d <分支名称> （分支被合并后才允许删除）（-D

2021-12-28 08:32:52 129

原创正则表达式

// 1. 数字：^[0-9]*$// 2. n位的数字：^\d{n}$// 3. 至少n位的数字：^\d{n,}$// 4. m-n位的数字：^\d{m,n}$// 5. 零和非零开头的数字：^(0|[1-9][0-9]*)$// 6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$// 7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$// 8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+

2021-12-27 16:12:07 49

原创 git基础用法

git基础、-r -h .git 将隐藏的.git文件显示出来我们初始化出来的git仓库属于主分支（分支的概念后面再将） git会发现仓库中的任意更改（增删改查）任意一个改动git都会发现并且可以通过命令 git add <文件名> 提交单个修改文件进入暂存区 git add . 提交所有修改的文件进入暂存区如果提交后没有任何反应那么就表示最好的反应 git认为没有反应表示没有错误可以通过命令 git status 查看git的状态

2021-12-25 11:33:45 173 2

m0_62351236的博客