- 博客(101)
- 收藏
- 关注
RSS订阅原创 uniapp 页面状态栏问题
首先要知道导航栏、状态栏都是什么如图1.先解决状态栏问题<template> <view class="my"> <!-- 获取状态栏高度，适配不同机型 --> <view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view> </view></template><script> export def
2022-05-31 17:34:29
914
原创 移动端 1px 解决方案
前言在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。产生原因设备像素比：dpr=window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。在retina屏的手机上, dpr为2或3，css里写的1px宽度映射到物理像素上就有2px或3px宽度。例如：iPhone6的dpr为2，物理像素是750（x轴）,它的逻辑像素为375。也就是说，1
2022-03-08 19:33:54
912
原创 小程序组件封装
创建components目录在根目录下创建一个components目录，用来存放所有组件。例如我们创建一个w-swiper组件，在components目录下创建w-swiper目录。自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。w-swiper.wxml<swiper indicator-dots='true' indicator-active-color='#ff5777' autoplay='true'
2022-03-06 19:35:09
375
原创 微信小程序双向数据绑定,父子传参
单向绑定语法1.普通的属性的绑定是单向的。例如：<input value="{{value}}" />解析：如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为leaf；但如果用户修改了输入框里的值，却不会改变 this.data.value。双向绑定语法对应属性前加入model:前缀：<input model:value="{{value}}" />
2022-03-02 20:04:40
312
原创 Node版本管理工具n
管理 Node 版本的工具有 n 和 nvm。n 不支持Windows安装npm install -g n常用命令n <version> // 下载某一版本号node e.g：n 10.16.0n latest // 安装最新版本n stable // 安装最新稳定版n lts //安装最新长期维护版(lts)n rm <version> // 删除某个版本 e.g：n rm 10.16.0n // 输入命令后.
2022-02-27 20:07:06
942
原创 TypeScript语法
目录引言JavaScript一门优秀的语言JavaScript的痛点类型带来的问题类型错误类型思维的缺失JavaScript添加类型约束介绍认识 [TypeScript](https://so.csdn.net/so/search?q=TypeScript&spm=1001.2101.3001.7020)TypeScript 特点众多项目采用TypeScript大前端的发展趋势入门TypeScript 编译环境TypeScript的运行环境变量的声明声明变量的关键字变量的类型推导（推断）数据类型Ja
2022-02-25 20:53:00
227
原创 微信小程序使用promise封装wx.request()
1.目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUrl
2022-02-24 21:22:13
309
原创 vue中样式穿透
在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped1、stylus的样式穿透 使用 >>>备注: 不太推荐使用这种方式,据说有点问题！.wrapper >>> .swiper-pagination-bullet-active { background: #fff}2、sass 和 less 的.
2022-02-23 21:23:42
232
原创 vue项目如何部署到nginx服务器
mac下安装nginx安装工具：homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）步骤：1、打开终端，习惯性命令：更新brew update2、终端继续执行命令：brew search nginx //查询要安装的软件是否存在3、这里我们多执行一步“废”命令，不过有利于我们后面的配置：brew info nginx我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/
2022-02-22 21:29:17
10365
原创 vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个
2022-02-21 20:22:54
247
原创 vue中的provide和inject
一、名词解析：provide：Object | () => Object``inject：Array<string> | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：provide 和 inject
2022-02-21 20:21:12
121
原创 vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以
2022-02-20 20:33:31
230
原创 vue动画transition
一、动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，在过渡/动画完成之
2022-02-20 20:31:15
195
原创 vue打包优化、上线
首先在项目根目录新建一个vue.config.js文件打包前必做:module.exports = { publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist） assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录}1、去除生产环境sourceMap问题: 在vue项目打包之后js,css文件夹中,会自动生成
2022-02-17 19:31:15
108
原创 vue修改数据后页面不更新
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script&
2022-02-17 19:28:46
7604
原创 Vue中的$nextTick()
一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>1const vm = new Vue({ el: '#app'
2022-02-17 19:20:56
224
原创 vue的prop验证
Prop1 . prop 大小写Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- 父组件中 kebab-case 的 --><blog-post post-title="hello!"></blog-post>2 .单项数据流
2022-02-16 20:22:49
661
原创 vue中的slot（插槽）
1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return
2022-02-16 20:21:17
110
原创 v-for中为何要使用key
一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯一id
2022-02-16 20:18:53
581
原创 vue使用keep-alive缓存页面优化项目
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
2022-02-15 21:11:05
117
原创 vue脚手架本地开发跨域请求设置
vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址
2022-02-15 21:09:20
414
原创 vue-Router实现原理
一、前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash — 默认值，利用 URL 中的hash("#") 、history-- 利用URL中的路径（/home）如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})mode
2022-02-14 21:17:16
162
原创 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-14 21:11:31
113
原创 vue的过滤器
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })1234567var a.
2022-02-14 21:09:20
112
原创 vue自定义指令的应用场景
使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&
2022-02-13 19:45:04
38
原创 vue中如何自定义指令
一、 什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>
2022-02-13 19:43:33
1732
原创 vue组件化开发
我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、
2022-02-13 19:40:24
69
原创 vue中的修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件
2022-02-13 19:34:37
67
原创 mvvm和mvc区别
mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})
2022-02-13 19:29:48
89
原创 Vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2022-02-10 20:10:56
97
原创 关于监听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&g
2022-02-10 20:06:47
425
原创 Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰
2022-02-09 21:23:41
122
原创 generator函数详解
Generator 函数的定义语法上，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。什么是Generator函数function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。调用Generator函数后，该函数并不执行
2022-02-08 20:06:09
10691
原创 async和await的作用
词法定义asyncasync 是“异步”的简写， async 用于申明一个异步的 functionawaitawait 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。特点：asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的案例模拟出
2022-02-08 20:03:09
3773
1
原创 浏览器回流、重绘
1. 什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。2. 什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。3. 有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变4.如何
2022-02-07 19:46:20
97
原创 vue的diff算法
一、是什么diff算法先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句话说diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
2022-02-07 19:44:47
206
原创 Vue的虚拟DOM
一、什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。再来一张图： 是不是一下子秒懂 没懂再来一张创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应在vue中如何应用虚拟DOM的定义真实DOM<
2022-02-07 19:42:38
188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人