- 博客(70)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 Vue3 重学这 5 个常用的 API
距离Vue3发布已经过去一年多时间了，从Vue2到Vue3是一个不小的升级，包括周边生态等。虽然目前大多数开发者们在使用的仍旧以Vue2为准，但Vue3显然是Vue开发者们未来必须面对的，而且前不久Vue官方也发布了Vue2.7.0，使得Vue2可以兼容Vue3的API，这让开发者可以在项目不升级Vue3的情况下依旧可以使用Vue3的开发方式，这为Vue2开发者学习Vue3提供了一个非常好的过渡途径。
2022-10-31 16:29:23
876
1
原创 JSON.parse(JSON.stringify(obj))深拷贝的问题
如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。浅拷贝 ： 只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据。1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据。
2022-10-18 13:29:10
1994
原创 git环境变量配置及node升级相关问题
如果出现cmd:无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确。因为有些版本sass不支持样式穿透符 >>> 所以要更换成::v-deep。node升级到v16.16.0版本 之前项目依赖的更改。node-sass 去掉 改换成下面版本。最近新装电脑总结一些问题。...
2022-08-04 15:58:54
346
转载 vue3.2项目有感
更方便的是，他有更好玩的用法。也许你会觉得这样就更简单了，其实恰恰相反，CompositionAPI其实要求你对逻辑处理有更清晰的认识，对于封装有更高的要求，否则，你一样会写成比以前更丑的代码。我认为，setup是一个链接，是把数据和template连接起来的一个桥梁，因此才会使用这个动词，本质上这不是一个生命周期，是一个动作，是我们把数据和Vue连接起来。最妙的是，这里实现当使用时注册回调，不使用时移除，通过reactive通信,而且可以把回调方法隐藏起来，我需要的只是结果，而不需要把所有代码都在外层。.
2022-07-21 14:31:10
137
转载 如何使用vue开发公众号网页
通过vue-cli创建项目安装脚手架工具npm install -g @vue/cli# ORyarn global add @vue/cli创建一个项目vue create water_project关于移动的适配因为是移动端网页，所以需要做适配。网上有很多适配方案这里就不展开说了，主要说下本项目使用的方案是amfe-flexible结合rem来做的，是淘宝的一种解决方案。关于设计稿的单位px转换为rem使用的是postcss的postcss-pxtorem方案。其实用webp
2022-05-17 22:40:27
3586
原创 微信小程序开发常用知识
生命周期应用的生命周期函数onLaunch(Object object)小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。onShow(Object object)小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。onHide()小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。onError(String error)小程序发生脚本错误或 API 调用报错时触发。
2022-04-07 23:50:58
942
转载 Vue3.2中的setup语法糖
vue3.2 到底更新了什么？根据原文内容的更新的内容主要有以下 5 块：1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、Service Workers)2.New SFC Features：新的单文件组件特性3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道4.Effect Scope A
2022-03-23 14:35:02
988
转载 Vue3 中的 setup 语法糖
vue3.2 到底更新了什么？根据原文内容的更新的内容主要有以下 5 块：1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、Service Workers)2.New SFC Features：新的单文件组件特性3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道4.Effect Scope AP
2022-02-24 13:25:44
1966
1
原创 MySQL的基本操作
SQL 能做什么① 从数据库中查询数据② 向数据库中插入新的数据③ 更新数据库中的数据④ 从数据库删除数据⑤ 可以创建新数据库⑥ 可在数据库中创建新表⑦ 可在数据库中创建存储过程、视图⑧ etc…MySQL常用的语句SELECT 语句用于从表中查询数据。执行的结果被存储在一个结果表中（称为结果集）。这里以user表进行示例-- 通过 * 把 users 表中所有的数据查询出来-- select * from users-- 从 users 表中把 username 和 pas
2022-01-20 16:13:36
540
转载 Vue3 和 Vue2 的组件通信方式
## Vue2.x组件通信12种方式写在后面了，先来 Vue3 的Vue3 组件通信方式大致分为以下几种props$emitexpose / ref$attrsv-modelprovide / injectVuexmittVue3 通信使用写法1. props用 props 传数据给子组件有两种方法，如下方法一，混合写法// Parent.vue 传送<child :msg1="msg1" :msg2="msg2"></child><scrip
2021-12-13 16:55:37
345
1
转载 一份 ElementUI 问题清单
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable
2021-10-23 09:17:07
132
原创 vue 插槽详解
插槽： 作用：可以让你封装组件的时候让组件更加的灵活 默认情况下组件标签内部嵌套的标签或者组件默认是不会显示的。如果需要进行显示则就需要用到了插槽匿名插槽1、在组件标签内部书写templet标签，需要嵌套的内容放在template标签内部。同时给template标 签加一个指令 v-slot2、在组件的内部通过<slot></slot>进行接收嵌套的数据这里举出一个实例//父组件<template> <div
2021-10-08 15:45:18
234
原创 vue组件间的通信及vuex详解
概述组件之间的共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据：EvenBus$on 接收数据的那个组件$emit 发送数据的那个组件父向子传值父组件模板:<template> <child :msg="message"></child></template><script>import child from './child.vue';export
2021-09-26 16:56:04
503
转载 ElementUI常见的问题总结
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable
2021-09-17 14:47:35
567
转载 React项目中应用TypeScript
前言单独的使用typescript 并不会导致学习成本很高，但是绝大部分前端开发者的项目都是依赖于框架的例如和vue、react 这些框架结合使用的时候，会有一定的门槛使用 TypeScript 编写 react 代码，除了需要 typescript 这个库之外，还需要安装@types/react、@types/react-dom单独的使用typescript 并不会导致学习成本很高，但是绝大部分前端开发者的项目都是依赖于框架的例如和vue、react 这些框架结合使用的时候，会有一定的门槛使用
2021-09-15 14:57:18
1045
转载 在Vue项目中应用TypeScript
前言在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，其是基于vue-class-component库而来，这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库主要的功能如下：methods 可以直接声明为类的成员方法计算属性可以被声明为类的属性访问器初始化的 data 可以被声明为类属性data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法所有其他属性，需要放在装饰器中使用vue-pr
2021-09-15 12:52:33
1611
转载 JS常见的应用技巧
全部替换我们知道 string.Replace() 函数只会替换第一个项目。你可以在这个正则表达式的末尾添加 /g 来替换所有内容。var example = "potato potato";console.log(example.replace(/pot/, "tom"));// "tomato potato"console.log(example.replace(/pot/g, "tom"));// "tomato tomato"随机排列数组中的元素var my_list = [1,
2021-09-10 14:08:17
96
转载 TypeScript 中装饰器的理解
定义装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上是一种在不改变原类和使用继承的情况下，动态地扩展对象功能同样的，本质也不是什么高大上的结构，就是一个普通的函数，@expression 的形式其实是Object.defineProperty的语法糖expression求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入使用方式由于typescript是一个实验性特性，若要使用，需要在tsconfig.json文件启动，如下：{ "co
2021-09-10 09:20:03
272
转载 TypeScript 中高级类型的理解
定义：除了string、number、boolean 这种基础类型外，在 typescript 类型声明中还存在一些高级的类型应用这些高级类型，是typescript为了保证语言的灵活性，所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景有哪些常见的高级类型有如下：交叉类型联合类型类型别名类型索引类型约束映射类型条件类型交叉类型通过 & 将多个类型合并为一个类型，包含了所需的所有类型的特性，本质上是一种并的操作语法如下：T & U适用于对象合并场
2021-09-09 14:59:42
403
转载 TypeScript 中类的理解
定义类（Class）是面向对象程序设计（OOP，Object-Oriented Programming）实现信息封装的基础❝类是一种用户定义的引用数据类型，也称类类型❞传统的面向对象语言基本都是基于类的，JavaScript 基于原型的方式让开发者多了很多理解成本在 ES6 之后，JavaScript 拥有了 class 关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多但是JavaScript 的class依然有一些特性还没有加入，比如修饰符和抽象类TypeScript 的 cla
2021-09-08 12:52:05
220
转载 TypeScript 中函数的理解
TypeScript定义函数是JavaScript 应用程序的基础，帮助我们实现抽象层、模拟类、信息隐藏和模块在TypeScript 里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript 为 JavaScript 函数添加了额外的功能，丰富了更多的应用场景函数类型在 TypeScript 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建块使用方式跟javascript 定义函数十分相似，可以通过funciton 关键字、箭头函数等形式去定义，例如下面一
2021-09-08 12:18:36
174
转载 TypeScript 中接口的理解
定义「接口」是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的「类」去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法简单来讲，一个接口所描述的是一个对象相关的属性和方法，但并不提供具体创建此对象实例的方法typescript的核心功能之一就是对类型做检测，虽然这种检测方式是“鸭式辨型法”，而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定使用方式接口定义如下：interface interface_name { }例如
2021-09-08 10:52:45
301
转载 TypeScript 中泛型的理解
泛型的定义泛型程序设计（generic programming）是程序设计语言的一种风格或范式泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型 在typescript中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性假设我们用一个函数，它可接受一个 number 参数并返回一个number 参数，如下写法：function returnItem (para: number): number { ret
2021-09-08 10:04:42
1032
原创 移动端 Flexbox 详解
这里以下面布局为例<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>.box{ display: flex; } .item{ margin-top: 10px; width: 100px; height: 1
2021-09-03 16:32:35
192
转载 js中null和undefined的区别
null表示"没有对象"，即该处不应该有值。典型用法是：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。Object.getPrototypeOf(Object.prototype)// nullundefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：（1）变量被声明了，但没有赋值时，就等于undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为u
2021-08-19 09:24:06
127
转载 Vue高级实战技巧
自动注册组件我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export
2021-07-21 16:19:45
242
转载 JS中实用的工具函数
视频全屏 // 全屏 function fullScreen(el) { const isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; if (!isFullscreen) { //进入全屏,多重短路表达式 (el.re
2021-07-21 13:22:29
607
转载 Vue3.0响应式API整理
响应性APIreactive作用： 创建一个响应式数据。本质： 传入数据（复杂类型：数组和json对象）包装成一个Proxy对象。如果传入其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值（创建一个新的对象）的方式。<template> <div class="reactive"> <button @click="fn">点击</button> <p>{{ state }}</p>
2021-07-21 12:44:34
480
原创 vue 自定义弹窗组件
父组件<template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div></template><script>import codeDialog from
2021-07-21 12:31:47
2125
转载 10个Vue开发技巧
路由参数解耦一般在组件内使用路由参数，大多数人会这样做：export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。正确的做法是通过 props 解耦const router = new VueRouter({
2021-06-11 10:25:07
275
原创 TS笔记 （记录一下）
## **TypeScript中的基本类型**TypeScript中的基本类型：- 类型声明 - 类型声明是TS非常重要的一个特点； - 通过类型声明可以指定TS中变量（参数、形参）的类型； - 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错； - 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值； - 语法： - ```typescript let 变量: 类型;
2021-03-09 10:30:20
265
原创 vue3.0笔记（二）
关于setup一些细节问题及组件之间的传值这里创建一个父组件<template> <h2>App父级组件</h2> <h3>msg:{{ msg }}</h3> <button @click="msg += '==='">更新数据</button> <hr /> <Child :msg="msg" msg2="真香" @xxx="xxx" /></template>
2021-02-22 16:10:12
150
转载 javascript数组操作方法
var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: '04', value: '哈哈' },{ key: '01', value: '乐乐' }]; // 方法1：利用对象访问属性的方法，判断对象中是否存在key var result = []; var obj = {
2021-02-22 14:38:34
300
原创 vue3.0笔记（一）
2020年9月发布的正式版Vue3支持大多数的Vue2的特性Vue中设计了一套强大的composition组合APi代替了Vue2中的option API ,复用性更强了更好的支持TS最主要: Vue3中使用了Proxy配合Reflect 代替了Vue2中Object.defineProperty()方法实现数据的响应式(数据代理) 之前用的是Options APIexport default{ data:"" computed:"" watch:"" moun
2021-02-08 15:34:03
240
原创 使用vscode如何建立vue模板
打开VSCODE编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，我们输入vue， 如下：将此段代码复制其中{ "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", " <div></div>", "</template>",
2021-01-21 09:34:57
261
原创 webpack之项目资源优化
webpack打包时，会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理，小于limit的图片转化成base64格式，其余的不做操作。对于比较大的图片我们可以用image-webpack-loader 来压缩图片。具体方法：npm install image-webpack-loader --save-dev在 webpack.config.js 中配置：{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, u
2021-01-15 11:08:15
162
转载 9 个极其强大的 JavaScript 技巧
JS操作的小技巧转载于https://mp.weixin.qq.com/s/s6kUhCGpazUgXHvuxInimQ
2020-12-25 09:03:41
109
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人