- 博客(29)
- 收藏
- 关注
RSS订阅
原创 通过代理解决跨域
通过代理解决跨域1.首先在更目录创建一个 vue.config,js 文件2.其次，在vue.config.js文件中操作,操作步骤如下；3.之后就可以跨域请求数据了以上代码由吴帅原创。转发分享请@原作者，谢谢！
2021-12-30 15:57:00
405
原创 vue修改数据页面不重新渲染
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template><div><p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button></div></template><script>expo
2022-02-17 21:19:26
460
原创 this.$nexttick
一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>1const vm = new Vue({el: '#app',
2022-02-17 21:15:22
1078
原创 vue组件
你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.
2022-02-14 16:49:07
98
原创 vue修饰符
一、事件修饰符 .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会...
2022-02-14 16:25:00
74
原创 mvvm和mvc的区别
MVVM概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。 以vue为例： view 对应 template，vm 对应 new Vue({…}
2022-02-11 19:50:22
82
原创 watch、computed、methods的区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2022-02-11 07:42:23
1554
原创 watch监听
watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p ></div><!-- 引入vue --><script src="/node_modules/vue/dist/vue.js"></script><script t
2022-02-11 07:40:22
125
原创 Cookie、Localstorage、Sessionstorage
vuex什么是vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modulesvuex组成部分state: 数据及状态actions:可以包含异步操作mutations: 异步操作，唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的 state
2022-02-09 21:23:54
62
原创 组件之间的通讯
组件之间的通讯1.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）父组件代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
2022-02-09 19:10:44
795
原创 深拷贝和浅拷贝
和浅拷贝的区别1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用” 为什么要使用深拷贝？ 我们希望在改变新的数组（对象）的时候，不改变原数组（对象） 内存模型 JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。 基本数据类型与栈内存 JS中的基础数据类型，这些值都有固
2022-01-21 11:12:02
43
原创 作用域和自由变量
作用域什么是作用域变量作用域：就是一个变量可以使用的范围。作用域 （种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念： 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作
2022-01-14 21:30:38
48
原创 javascript原型与原型链
javascript原型与原型链1.prototype每一个构造函数都有一个prototype属性，被称之为显示原型。2.proto每一个实例对象都有一个__proto__属性，被称之为隐式原型。每一个实例对象的隐式原型__proto__指向其自身构造函数的显示原型prototype。3.constructor每个protot原型都有一个constructor属性，指向它关联的构造函数。4.原型链获取对象属性时，如果对象本身没有这个属性，那就去他的原型__proto__上去找，如果还查不到
2022-01-14 15:55:20
62
原创 vue打包
vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 ...
2022-01-13 18:53:07
1203
原创 解决兼容问题
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 所以浏览器兼容性问题一般指：css兼容、js兼容 浏览器内核（渲染引擎）Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、css兼容 1. 不同浏览器的标签默认的margin和padding不同 问题症状： 随便写几个...
2022-01-12 21:08:32
84
原创 块级、行内元素
在Css里，每一个元素上都会有一个 display属性，可以进行相互的转换块级转行内 / 行内块：display:inline、 display:inline-block、 行内转块级行内块：display:block、 display:inline-block、块级元素：div、p、h1-h6、ul、table、form、ol、li、dl、dt、dd行内元素：span、a、b、i、img、input、s空元素(指的是没有内容)br、hr、img、input、link、meta
2022-01-11 16:47:02
127
原创 flex布局
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网
2022-01-08 14:52:43
383
原创 如何让一个元素在父元素中上下左右居中？
如何让一个元素在父元素中上下左右居中？共同的dom结构如下： 方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法 #box{ width: 400px; height: 400px; background: red; position: relative; } #x{ wi
2022-01-08 08:08:54
391
原创 position定位
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原
2022-01-08 08:02:23
727
原创 vuex的理解
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） ### 一、适合初学者使用，保存数据以及获取数据 ...
2022-01-07 07:44:24
1246
原创 清除浮动的方法
1.为什么要清除浮动清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题2.四种清除浮动的方法1.标签法额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。优点： 通俗易懂，书写方便。（不推荐使用）缺点： 添加许多无意义的标签，结构化比较差。2.父级添加属性通过父级元素添加overflow:hidden属性实现清除浮动3.伪元素清除使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:aft
2022-01-06 07:44:22
245
原创 盒模型Border
1.什么是盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒模型的分类盒模型有标准盒模型和怪异盒模型两类标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和bord
2022-01-05 21:25:42
111
原创 返回至顶部
1、html部分 返回到顶部```2、css部分```div.a{width:300px;height:10000px;}div.b{width:100%;height:950px;position:relative;background:yellow;}.btn{position: fixed;bottom:20px;right:20px;width:100px;height:100px;border:1px solid red;display:
2022-01-05 07:45:53
60
原创 Axios封装及接口管理
Axios封装及接口管理1.utils/request.js 封装 axios ,开发者需要根据后台接口做修改。在request页面主要做的是loding动画的开启以及请求头的设置//导入axios 和 qs 插件import axios from "axios"import qs from "qs"//配置全局公共域名const baseURL = process.env.NODE_ENV === "production" ? "https://www.xxxxx.com" : "";
2022-01-05 07:39:09
660
原创 完整正则(觉得不完整也给我憋着)
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。一、校验数字的表达式// 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]
2021-12-27 11:17:34
64
原创 ajax的优缺点
ajax的概念：相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据验证和数据处理都交给Ajax引擎来完成，只有确认需要向服务器读取新数据时才右Ajax引擎向服务器提交请求。ajax的优点：1.无刷新更新数据Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信2.异步与服务器通信使用异步的方式与服务器通信，不打断用户的操作3.前端与后端负载均衡将一些后端的工作移到前端，减少服务器与带
2021-12-27 11:14:55
268
原创 第二天 git补充
第二天 git补充撤销同暂存区中的文件覆盖工作目录中的文件：git checkout 文件名将文件从暂存区删除：git rm --cached 文件名将git仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：git reset --hard commitID分支 (我们可以把分支理解为 当前工作目录代码的一个副本)分支细分1 主分支(master)：第一次向git仓库提交代码会自动生成一个分支 默认为主分支2 开发分支(develop)：作为开发的分支,基于master分支
2021-12-27 11:12:02
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人