vue
wyy7293
这个作者很懒,什么都没留下…
展开
-
[vue3] Fragment 和 Teleport 和 Suspense
Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用vue框架已经做好的处理,作为程序员不需要写代码Teleport什么是Teleport?—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <原创 2023-03-05 12:15:29 · 195 阅读 · 0 评论 -
[PHP] CURL 的各种骚使用(GET,POST,上传下载图片,带认证,带COOKIE)
curl是个什么curl是一个库,能让你通过URL和许多不同种的服务器进行勾搭和深入交流,并且还支持许多协议。并且人家还说了curl可以支持https认证、http post、ftp上传、代理、cookies、简单口令认证等等功能啦前提PHP环境中安装和启用curl模块说明$ch = curl_init() 创建了一个curl会话资源,成功返回一个句柄;curl_setopt($ch, CURLOPT_URL, "baidu.com"),设置URL;curl_setopt($ch,原创 2022-05-23 10:42:58 · 914 阅读 · 0 评论 -
[js]深浅拷贝的理解和多种实现方式(最终完整版)
深浅拷贝的区别浅拷贝将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用。深拷贝创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”。为什么要用深拷贝?我们希望在改变新的数组(对象)的时候,不改变原数组(对象)深浅拷贝的实现浅拷贝因为是引用数据类型,修改赋值后的变量等于修改引用的地址数据,会修改原数据 let obj = {name:'张三'} let object = obj console.原创 2022-05-10 16:15:04 · 339 阅读 · 1 评论 -
[JS]深入理解原型和原型链以及区别(包含面试题详解)
原型一个可以被复制(或者叫克隆)的一个类,通过复制原型可以创建一个一模一样的新对象,也可以说原型就是一个模板,在设计语言中更准确的说是一个对象模板原型是定义了一些公用的属性和方法,利用原型创建出来的新对象实例会共享原型的所有属性和方法所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象所有函数都有一个prototype(原型)属性,属性值是一个普通的对象所有引用类型的__proto__属性指向它构造函数的prototype说说对原型的理解(面试题)在 Jav原创 2022-05-09 16:35:22 · 1634 阅读 · 0 评论 -
[JS]原生使用Object.defineProperty劫持数据,实现响应式数据驱动DOM(借助VUE2.X的核心思想)
举个栗子点击按钮只修改响应式数据,达到DOM更新和数据更新的功能核心思想定义需要被劫持的响应式对象数据对于定义的数据进行针对劫持,使用getter和setter进行对DOM的处理当点击功能按钮时,只需要修改定义的响应式数据就可以完整代码供体验 希望大佬指点不足之处供参考 下方注释掉的是JS原生操作DOM实现的<html> <head> <title>操作DOM</title> </原创 2022-04-21 15:27:37 · 1334 阅读 · 0 评论 -
[vscode]代码规范ESLint + Prettier 在vue项目中的使用和冲突解决[完美解决]
前言在创建项目的时候记得勾选使用代码规范ESLint把规矩都列出来写在文件里,规范大家的代码统一化如果代码不符合规则,ESLint就会报警高或者报红Prettier把规矩都列出来写在文件里,规范大家的代码统一化一键保存自动帮助大家通过统一的规则格式化代码使用在vscode中开发vue项目需要安装这三个插件在.eslintrc.js文件中配置rules属性[详细的规则见文档]举个栗子 规定字符串使用单引号和末尾不加分号 rules: { '原创 2022-04-18 16:36:49 · 1691 阅读 · 0 评论 -
彻底卸载VSCode软件包括插件和缓存
1.从控制面板找到 vscode 将其卸载此时仅仅是删除了应用软件,如果重新下载安装之前得插件和个人配置还会重新加载,所有需要完全删除插件和个人配置2.删除安装插件win+R 输入 %userprofile%3.删除用户信息和缓存信息在图示路径下,删除 Code 和 Visual Studio Code 文件夹,即可彻底删除用户信息和缓存信息如果找不到AppData文件夹,应该是隐藏了,可以在文件夹中点击 查看 勾选 显示隐藏文件和文件夹 即可找到或者 wi原创 2022-04-18 11:40:18 · 12054 阅读 · 0 评论 -
[vue3 + TS]祖组件和孙组件通讯provide+inject和注意点
祖组件和孙组件通讯 (依赖注入)祖组件//需求:需要孙组件及递组件调用方法`更新`祖组件的数据const updateTodoItem = ({ index, isCompleted }: { index: number, isCompleted: boolean }) => { todosData.todos[index].isCompleted = isCompleted}/**提供 or 依赖*/provide('update',updateTodoItem) /** (名原创 2022-04-06 17:06:45 · 1902 阅读 · 0 评论 -
[vue3 + TS] 父组件调用子组件的多种方法
主要用 ref<InstanceType<typeof 组件>>() 来获取各个子组件实例父组件<Footer ref="footerRef" />setup() { const footerRef = ref<InstanceType<typeof Footer>>() const parentClick = () => { footerRef.value?.handleFn('111') }原创 2022-04-02 17:46:41 · 5514 阅读 · 2 评论 -
[vue3] 子组件调用父组件的多种方法
子组件调用父组件的方法方法1 - 异步方式父组件定义供子组件调用的xx方法 @updata:xx=xx子组件中在setup的emit方法调用 context.emit(‘update:xx’)注意: .sync 在这里不好用父组件组件<my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe>子组件组件setup(props, context) { function fn原创 2022-04-02 14:19:16 · 33973 阅读 · 3 评论 -
[TypeScript]接口interface详解
接口初探TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)// readonly 修饰属性为只读// ? 这个属性(可选)可有可无interface IPerson { readonly id: number name: string age: number sex?: string}readonly 修饰属性为只读,一旦赋值后再也不能被改变了? 这个原创 2022-02-22 17:00:23 · 587 阅读 · 0 评论 -
[TypeScript] 最全数据类型解析
布尔值 let isDone: boolean = false; isDone = true;基本的数据类型就是简单的 true/false 值,在JavaScript 和 TypeScript 里叫做 boolean数字 let a1: number = 10 // 十进制和 JavaScript 一样,TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,TypeScript 还支持 ECMAS..原创 2022-02-22 15:20:24 · 366 阅读 · 0 评论 -
【vue3】使用Hook函数来实现功能代码整合 从而模块化
Options API 存在的问题使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。 sition API 的优势我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。 ...原创 2022-02-21 14:55:00 · 360 阅读 · 0 评论 -
[vue3] 响应式数据的判断
响应式数据的判断isRef: 检查一个值是否为一个 ref 对象isReactive: 检查一个对象是否是由 reactive 创建的响应式代理isReadonly: 检查一个对象是否是由 readonly 创建的只读代理isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理...原创 2022-02-21 14:48:13 · 248 阅读 · 0 评论 -
[vue3] provide 与 inject
作用:实现祖与后代组件间通信套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据具体写法://祖组件setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car',car) ...... }//后代组件setup(props,context){ ...... const car = inject('car'..原创 2022-02-21 14:46:42 · 247 阅读 · 0 评论 -
[vue3]创建一个自定义的 ref
作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果:<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3></template><script> import {ref,customRef} from 'vue' export default { name:'Demo', setup..原创 2022-02-21 14:40:37 · 263 阅读 · 0 评论 -
vue3 定义响应式数据的多种方式及分析
ref定义基本类型的响应式数据,原理通过Object.defineProperty()的get与set完成的。(对象类型不要用它,要用reactive函数)reactive定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)shallowReactive只处理对象最外层属性的响应式(浅响应式)shallowRef只处理基本数据类型的响应式, 不进行对象的响应式处理readonly让一个响应式数据变为只读的(深只读)应用场景: 不希望数据被..原创 2022-02-21 14:38:27 · 1138 阅读 · 0 评论 -
vue2 和 vue3 生命周期对比详解
vue2.x的生命周期vue3.0的生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeM原创 2022-02-21 14:24:01 · 381 阅读 · 0 评论 -
[vue3] ref函数和reactive函数的响应式原理
ref函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue)创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。JS中操作数据: xxx.value模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>备注:接收的数据可以是:基本类型、也可以是对象类型。基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据:内原创 2022-02-21 14:18:25 · 979 阅读 · 0 评论 -
【vue3】拉开序幕的 Composition API(组合API)之 setup
理解:Vue3.0中一个新的配置项,值为一个函数。setup是所有Composition API(组合API)“ 表演的舞台 ”。组件中所用到的:数据、方法等等,均要配置在setup中。有两个参数 props, context = {emit,slots,attrs,expose}setup函数的两种返回值:若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)若返回一个渲染函数:则可以自定义渲染内容。(了解)注意点:尽量不要与Vue2.x配置混用Vue.原创 2022-02-21 14:08:13 · 145 阅读 · 0 评论 -
vue3 watch 监控对象的坑 和 watchEffect 对比
watch 监听函数注意: 1.监听指定的属性{对象),被监听属性(对象)有变化后,会给出新旧两个参数 2.监听函数注重过程,不能return结果 3.可以同时监听多个属性(对象) 栗子: watch([firstname,lastname],([currvalue,currold],[perval,perold])=>{ console.log(`1`,currvalue,currold); console.log(`2`,perval,perold)原创 2022-02-21 11:36:37 · 1170 阅读 · 0 评论 -
[CSS]text-shadow,box-shadow
text-shadow格式 text-shadow:阴影1,阴影2…;阴影的格式:第一个:(X轴)横向偏移位置第二个:(Y轴)竖向偏移位置第三个:模糊度第四个:阴影的颜色box-shadow格式box-shadow:阴影1,阴影2…;阴影的格式第一个:(X轴)横向偏移位置第二个:(Y轴)竖向偏移位置第三个:模糊度第四个:外颜色值第五个:颜色第六个:(内置阴影)...原创 2021-11-10 16:54:19 · 332 阅读 · 0 评论 -
小程序路径参数太多导致缺失问题
针对小程序跳转时携带参数太多,导致接收参数时缺失问题encodeURIComponent(JSON.stringify(obj)) //为跳转url时的转换方法。JSON.parse(decodeURIComponent(options.obj)) //为接收参数页面的转换方法。原创 2021-10-27 14:27:08 · 330 阅读 · 0 评论 -
小程序 准确算出scroll-view需要的高度
/** * 获取(单)多个节点的信息 * param Array节点 */getViewSize(e){ return new Promise((resolve)=>{ let query = wx.createSelectorQuery() for(let item of e){ query.select(`#${item}`).boundingClientRect() } query.selectViewport().scro原创 2021-10-26 11:35:32 · 414 阅读 · 0 评论 -
小程序 图片懒加载
lazyShowImg(){ var that = this let windowHeight = app.globalData.systemInfo.windowHeight wx.createSelectorQuery().selectAll('.lazy-item').boundingClientRect((ret) => { //获取需要懒加载的节点[统一class] ret.forEach((item, index) => { if (item原创 2021-10-25 17:37:56 · 152 阅读 · 0 评论 -
小程序cover-view 标签文字不换行的解决方案
/** cover-view 文字解决不换行 */.cover-text{ word-break: break-all; white-space: pre-line;}原创 2021-02-04 14:42:38 · 399 阅读 · 0 评论 -
vscode运行时报错,无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
刚用起Visual Studio Code,发现一个错误:cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。今天就来解决一下这个错误PS D:\work-span\project> cnpm install webpack-dev-server -gcnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试原创 2020-11-19 15:04:11 · 11303 阅读 · 4 评论 -
box-shadow几种参考案例
第一种box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.15);第二种box-shadow: 0 3px 8px 0 rgba(0,0,0,.08);原创 2020-11-18 10:27:15 · 442 阅读 · 0 评论 -
js 加密姓名和加密身份证号码
js 加密姓名和加密身份证号码加密姓名加密身份证例子加密姓名EncryptName(name) { let newStr; if(name.length === 2) { newStr = name.substr(0, 1) + '*'; } else if (name.length > 2) { let char = ''; for (let i = 0, len = name.length - 2; i < len; i++原创 2020-10-23 15:53:18 · 2387 阅读 · 0 评论 -
js sort 对数字数组的排序
原数据 3.,31,5,7,6,1,32,4,9,39,30.array.sort(); 出来的数据以第一个数字排序array.sort((a,b)=>a-b); 结果 1,4,5,6,7,9,29,30,31,32原创 2020-09-11 17:40:24 · 378 阅读 · 0 评论 -
vue element UI 动态表格增加快捷编辑 使用popover组件完美实现
需求在表格内点击可以快捷编辑项限时弹窗进行编辑修改首先放一张效果图遇到问题1.使用popover组件,自定义content(样式基本就出来)2.点击可以弹出来,提交后无法隐藏3.给每个可编辑项增加一个唯一ID(起名字真吐血了)解决问题周五了,周一继续写文章...原创 2020-08-28 18:00:27 · 684 阅读 · 0 评论 -
vue 解决 npm install 速度慢
通常我们在git clone 克隆项目下来后要进行安装项目所需的依赖,但是npm install 却很慢,因此聚集于此// 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npm.taobao.org...原创 2020-08-26 14:45:18 · 2475 阅读 · 1 评论 -
[vue]build打包后将静态文件放入指定文件夹
vue build打包后将静态文件放入指定文件夹最终效果解决方案在vue.config.js 添加 assetsDirmodule.exports = { assetsDir: 'index'}原创 2020-08-24 09:58:13 · 2451 阅读 · 0 评论 -
js遍历对象内的所有元素
需求:在编辑完成后,把from{} 内的所有元素赋空值第一种//简单粗暴this.from = {}第二种//for循环方式(代码不太优雅)for(const key in this.from){ if(this.from.hasOwnProperty(key)){ this.from[key] = '' }}原创 2020-08-18 10:18:50 · 1071 阅读 · 0 评论 -
VUE router 编程式导航的多种跳转和接参方式
$routerpush 跳转至哪里(可以回退)传参方式:[query or params]go 跳转,参数数字(-1:后退一页)replace 重定向跳转(不可回退)$routequery 接参方式params 接参方式原创 2020-08-14 16:39:48 · 233 阅读 · 0 评论 -
GitHub 使用基本命令(实用性高)
git基本命令解析代码片.// 设置提交代码时的用户信息git config [--global] user.name "name"git config [--global] user.email "[email address]"步骤命令解释1git init在当前目录新建一个Git代码库2git add [file1]添加指定文件到暂存区3git add .添加当前目录的所有文件到暂存区4git commit [file1] [file2原创 2020-07-24 14:40:30 · 275 阅读 · 0 评论 -
nginx + TP5.1 + vue 整合
原因:vue打包程序需要和ThinkPHP5.1 框架进行融合使用思路:解压css,img,js放入把index.html放入中distpublicTP5.1前台视图配置伪静态注意点:在开始之前查看下ThinkPHP的访问入口已设置在public文件夹下vue程序中vue-router 路由模式是否处于 history第一步:把vue打包程序中的(css,js,img)放到ThinkPHP -> public 文件夹下第二步:把vue打包程序中的index.html 放到Think原创 2020-08-03 14:30:31 · 706 阅读 · 0 评论 -
使用vs code 生成 VUE 自动生成初始化模板
第一步打开vscode, 文件-首选项-用户代码片段,选择代码片段文件或创建代码片段,选择或新建vue.json第二步复制以下代码,保存{ "Print to console": { "prefix": "vue", "body": [ "<!--", " 功能:${1:功能描述}", " 作者:兜兜里有糖", " 邮箱:麋鹿不迷路@糖.兜兜", " 时间:$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $原创 2020-07-29 15:48:42 · 871 阅读 · 0 评论 -
VUE 线上版本 刷新 404 (nginx解决)
原因:采用了路由的history模式,本地项目运行,刷新子页面都是OK的。说明下vue-router的默认hash模式——使用URL的hash来模拟一个完整的URL,当URL改变时,页面不会重新加载。但是这种hash很丑,也不符合对URL的使用习惯。所以,需要使用另外一个叫history模式来实现URL跳转而无须重新加载页面。因为我不想要很丑的 hash,就是使用路由的 history 模式.方法一去掉history模式,仍然采用hash模式,即注释掉这行代码// mode:'history'原创 2020-07-24 17:40:02 · 242 阅读 · 0 评论