前端

uni-app基础

前言:掌握HTML+CSS+JavaScript,了解 Vue.js+原生微信程序更容易上手 一、前言 uni-app是基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。一套代码,多端发布(开发者编写一套代码,可发布到ios、android、H5以及各种小程序等多个平台)。 即使不跨端,uni-app也是更好的小程序开发框架 好处:减少学习成本(个人),减少开发成本(公司)

Vue3中使用setup监听props

背景描述 子组件展示父组件传来的参数,展示的信息随着父组件上tab的切换动态更新。 一开始的想法是单独监听这个传递的参数,但看了VUE3的文档之后,似乎对参数的监听必须精确到属性。例如参数为 { name: 'Doctor', gender: 'Timelord' } 需要在子组件的watch中写明监听的是name还是gender。 该参数中有很多可能会改变的属性,一一监

ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)

关于forEach forEach()方法需要一个回调函数(这种函数,是由我们创建但是不由我们调用的)作为参数 回调函数中传递三个参数: 第一个参数,就是当前正在遍历的元素 第二个参数,就是当前正在遍历的元素的索引 第三个参数,就是正在遍历的数组 缺点: 不能使用break和continue let myArr = ['王一', '王二', '王三']; myArr.forEach((ite

vue小宋总结

Vue 知识点 原理篇 一、Vue 响应式原理 Vue2 中,是通过 ES5 中的defineProperty api 来对对象的属性进行 get 和 set 操作的拦截,在进行拦截操作时还创建了一个 watcher 用来跟踪对应的 value 的变化,因为这种方式无法对数组进行拦截,所以在 vue 中,要实现数组的响应式,需要调用其内置的 set 的用法),defineProperty 是一个

vite技术揭秘--环境变量

前言     我们开发中不可避免的要根据环境变量来做一些逻辑分支,在vite中有两种实现方式,即define和.env文件 示例     通过cross-env包设置环境变量,并通过define向页面中export     在.env中使用VITE_作为开头命名 源码     define         读取配置的整体流程和proxy差不多,这里就不展开说了,总之就是

Vue中的内置指令与自定义指令

一、内置指令 1、v-text指令 :向标签中添加文本 2、v-html指令:向指定恒点中渲染包含html结构的内容。 2-1、与插值语法的区别: (1).v-html会替换掉节点中所有的内容,{{xx}}则不会 。 (2).v-html可以识别html结构。 2-2、严重注意: v-html有安全性问题!!! (1).在网站上动态演染任查HTML是非常危险的,容易导致XSS攻击。 (2).定要

584. 【前端】style-loader和MiniCssExtractPlugin.loader

style-loader和MiniCssExtractPlugin.loader是Webpack中常用的用于处理CSS的loader之一。 style-loader将CSS代码以内联样式的形式插入到HTML页面的<head>标签中。使用style-loader的好处是,样式可以立即应用于页面,并且可以动态更新,例如在JavaScript中使用style属性更改元素的样式时,这些更改可以

WEB前端优化实践

提升首屏的加载速度,是前端性能优化中最重要的环节,这里笔者梳理出一些 常规且有效 的首屏优化建议 目标:通过对比优化前后的性能变化,来验证方案的有效性,了解并掌握其原理 1、路由懒加载 SPA 项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验。 列一个实际项目的打包详情:

Pinia的简单使用

1.什么是Pinia? 1.pinia 和 vuex 具有相同的功效, 是 Vue 的存储库,它允许您跨组件/页面共享状态。 2.设计使用的是 Composition api,更符合vue3的设计思维。 3.Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。 2.Pinia 的使用 2.1 Pinia 的安装 在安装Pinia的时候可以使用yarn 也可以使用 np