![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 85
小凳子腿
悲守穷庐,将复何及!
展开
-
TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用
TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用原创 2022-10-19 17:30:37 · 8486 阅读 · 5 评论 -
Pinia 使用及与 Vuex 区别
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态,与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持,Pinia 持久化存储插件 pinia-plugin-persistedstate 使用原创 2022-10-03 22:28:50 · 362 阅读 · 0 评论 -
在 elementUI 和 element-plus 中 Dialog 的 简单分析
elementUI(2.15.6)中 Dialog 是否显示 是通过 visible 控制的,并且支持 .sync 修饰符;element-plus(2.2.17)中 Dialog 是否显示 是通过 model-value / v-model 来控制的原创 2022-10-02 22:03:27 · 1084 阅读 · 0 评论 -
v-model在vue2与vue3中的区别
v-model在vue2与vue3中的区别,v-model主要是用在表单 、 及 元素上创建双向数据绑定。它会更具控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据原创 2022-10-02 21:45:09 · 2291 阅读 · 0 评论 -
TS中 Interface 与 Type 的区别
TS 中 Interface 与 Type 的区别 相同点: 1. 都可以描述 对象、函数,都可以扩展 不同点: 1. 接口可以 extends 和 implements ,type则不可以(type可以通过交叉类型实现 extends 行为) 2. 接口可以声明合并,type则不可以 2. type alias 可以声明基本类型别名,联合类型,元组等类型 2.1. type 可以定义字符串字面量联合类型 2.2. type........原创 2022-07-27 18:20:52 · 3971 阅读 · 0 评论 -
VueRouter路由组件传参
通过params传递参数 // 命名路由 userId不会出现在url上 this.$router.push({ name: 'user', params: { userId: '123' }}) // 获取传递的参数 this.$route.params.userId只能使用name,不能使用path,因为使用path后params会被忽略参数不会显示在路径上浏览器强制刷新参数会被清空注意:name的值是在router路由里定义的name值,而不是组件中定义的name值通过q原创 2020-05-14 16:45:41 · 971 阅读 · 0 评论 -
v-model、sync、lazy使用说明
v-model使用v-model是一个语法糖,它会自动在元素或组件上添加 :value = ‘’ 和 @input = ''当input的type是text时,它的value属性代表输入框的初始值并且可修改在元素上使用 <input v-model='name'/>等同于 <input :value = 'inputValue' @input='inputClick'/> <button @click="changeInputValue">修改in原创 2020-05-14 15:48:21 · 1034 阅读 · 0 评论 -
解决div里面img图片下方有空白的问题
# 产生空白的原因img标签是行内块元素即默认是:display: inline-block,且行内块元素的默认对齐方式是基线对齐即vertical-align: baseline所以产生空白的原因是因图片底边与容器基线对齐了,留出了基线与底线的空白# 解决空白方法 <div class="pic-container"> <img class="pic"...原创 2020-03-02 23:29:05 · 2047 阅读 · 0 评论 -
JS中splice、slice用法及区别
splice向数组中添加或删除元素,然后返回含有被删除元素的数组注意:这种方法会改变原始数组语法array.splice(index,howmany,item1,…,itemX)参数index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。howmany:要删除的元素数量。如果设置为 0,则不会删除项目。如果未设置此参数,则删除从 index 开始到原数组结...原创 2020-02-26 23:03:03 · 6531 阅读 · 0 评论 -
ES6的export模块、import模块
ES6的模块参考:https://www.runoob.com/w3cnote/es6-module.htmlES6的模块分为导出(export)和导入(import)两个模块特点1:ES6模块自动开启严格模式,不管你有没有在模块头部加use strict2:模块可以导入导出各种类型的变量,如函数、对象、字符串、数组、布尔值、类等3:每个模块都有自己的上下文,每个模块内声明的变量都是局...原创 2020-02-14 23:44:44 · 640 阅读 · 0 评论 -
CSS 盒子模型(Box Model)
CSS盒模型本质上是一个盒子,它包括:边距margin、边框border、填充padding、实际内容content。1.1:盒模型有两种标准盒模型:width和height等于实际内容(content)的宽高IE盒模型,width和height等于content+padding+border的总宽高。1.2:css设置两种盒模型box-sizing: content-box; //标准...原创 2020-02-10 23:04:38 · 540 阅读 · 0 评论 -
深入理解浮动元素与margin负值用法及三栏布局
浮动元素与margin负值使用正常两个浮动元素首先给元素设置浮动以后,元素就会变成块级元素 <div class="content"> <div class="middle">123456789123456789123456789123456789</div> <div class="left">111</div...原创 2020-01-14 17:12:07 · 3637 阅读 · 7 评论 -
浅谈BFC
一、什么是BFCBFC: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域引用MDN二、BFC生成条件根元素()浮动元素(元素的 float 不是 none)绝对定位元素(元素的 position 为 absolute 或 fixed)o...原创 2020-01-03 16:11:40 · 581 阅读 · 0 评论 -
webView 与 JS 间互相调用传值
以下代码基于kotlin编写webView 与 JS 互相调用webView 与 JS 间互相传值只能传递字符串1.1 JS 部分代码 <script> function getPhone(phone) { alert(phone) } var btn = document.getElementById("btn1"); btn...原创 2020-01-02 17:47:58 · 1514 阅读 · 1 评论 -
判断变量是否为undefined、null、NaN方法
判断变量是否为undefined1:typeof temp === 'undefined';2:temp === undefined通过 typeof 判断,不管num变量是否定义都可以判断通过 === 判断时num必须先定义,否则会报错判断变量是否为nullObject.prototype.toString.call(temp) === '[object Null]'判断变...原创 2020-01-02 17:33:44 · 4849 阅读 · 0 评论 -
Vue自定义插件及使用
开发插件在项目中经常会用到Loading框、toast框、dialog框等,这些经常被用的组件我们也都会把它设定成全局组件,其实我们也可以用 自定义插件 的方式来实现。这里就用插件的方式来实现一个全局的dialog对话框来演示。开发插件步骤创建一个 components 目录,并将每个组件放置在其各自的文件中,包括 .js、.vue在.js中导入.vue,使用基础 Vue 构造器,创建一...原创 2019-11-16 23:19:55 · 1729 阅读 · 0 评论 -
vue全局组件和局部组件的写法
全局组件通过 Vue.component 注册的组件为全局组件。如: import MyComponentName from './components/MyComponentName' Vue.component('my-component-name', MyComponentName)全局组件可以用在 任何新创建 的 Vue根实例 的模板中注意: 全局注册的行为必须在根 Vu...原创 2019-11-16 23:01:31 · 1125 阅读 · 0 评论 -
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难,看看官网介绍或看几篇博客应该就能实现。但这里面其实还有很多细节需要我们去做,如Tab切换时,切换过的Tab组件状态怎样缓存在项目中经常会有 页面A -> 页面B -> 页面...原创 2019-11-01 16:42:32 · 9378 阅读 · 3 评论 -
vue中动态添加和删除组件缓存 keep-alive
Vue的抽象组件,自身不会渲染一个DOM元素,也不会出现在父组件链中,能将组件在切换过程中将状态保存在内存中,防止重复渲染DOM;包裹动态组建时,会缓存不活动的组件实例,而不是销毁它们;当组件在 <keep-alive>内被切换时,它的activated和deactivated这两个生命周期钩子函数将会被执行。include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示,max:最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组原创 2019-10-30 16:10:52 · 10405 阅读 · 15 评论 -
Vue生命周期函数解析及各个组件间调用顺序
Vue生命周期函数beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedbeforeCreate: 实例对象刚通过new Vue创建成功,props、methods、data、computed、watch都不可以使用,$el 属性为nullcreated: 实例初始化完成,pr...原创 2019-10-28 14:44:55 · 2112 阅读 · 0 评论 -
Vue3.0在template、script、style中引用图片资源的方式
通过config.resolve.alias设置的别名在Vue的template模板和style样式内使用前面需加上~,在script脚本中则直接使用别名,不需加~;data中引用assets图片时,必须使用require('xxx')方式引用,否则会当字符串处理而无法显示图片原创 2019-10-23 17:33:31 · 10862 阅读 · 0 评论 -
vue首次赋值不触发watch及watch和computed的区别
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调,也就是说immediate值为true,则首次赋值时就执行handler函数,immediate值为false,则首次赋值时就不执行handler函数;当需要监听一个对象的改变时(注意这里监听的是整个对象),正常的watch无法监听到对象内部属性的改变,此时需要使用deep对对象进行深度监听原创 2019-10-22 15:52:42 · 10304 阅读 · 0 评论 -
JS创建对象的几种方式
通过构造函数定义每个实例对象的私有属性,通过原型定义公有方法和属性,不仅节省了内存,也可以向构造函数传递参数原创 2019-05-21 20:13:39 · 551 阅读 · 0 评论 -
JS通过new创建对象内部原理分析研究
1:先创建一个空对象obj,2:将空对象的__proto__指向foo构造函数的prototype,3:执行foo方法,并通过call方法,把构造函数中带this的属性和方法添加到新对象中(通过call方法,使foo函数中的this指向了obj,所以就相当于obj中有了foo函数中所有带this的属性和方法),4:返回创建的obj对象原创 2019-05-16 12:55:14 · 922 阅读 · 0 评论 -
JS中继承的几种方式
JS中继承的几种方式原创 2019-05-11 23:24:25 · 10897 阅读 · 1 评论 -
JS中instanceof原理分析研究
instanceof用于检测对象A是不是对象B的实例,而检测是基于原型链进行查找的,也就是说对象B的prototype有没有在对象A的__proto__原型链上,如果有就返回true,,否则返回false原创 2018-07-22 23:40:39 · 809 阅读 · 0 评论 -
JS原型链原理分析研究
原型链就是通过对象的__proto__属性组成的一条搜素机制。先简单说一下基础,JS中一切皆对象,所以在JS中函数也是对象,但函数对象和普通对象还是有一些区别,就是函数对象具有__proto__和prototype两个属性,而普通对象只具有__proto__属性。原型链的根是Object.prototype,而这个对象的__proto__是null,所以基于原型链的搜素机制到此如果无法找到就返回null,代表没有找到原创 2018-07-21 23:36:46 · 676 阅读 · 0 评论 -
vue-cli 3.0之跨域请求devServer代理配置
概念什么是同源策略同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。所谓同源是指:协议、域名、端口都相同什么是跨域跨域就是不同源,就是不满足协议、域名、端口都相同的约定如:看下面的链接是否与 http://www.test.com/index.ht...原创 2019-05-24 17:18:29 · 32135 阅读 · 25 评论 -
NPM install --save 、 --save-dev 、-g区别
package.json文件下dependencies和devDependencies区别devDependencies:用于开发环境dependencies:用于线上环境重点dependencies依赖的包不仅线上环境可以用,开发环境也能使用,反之则不行注意默认情况下,在哪个文件夹下运行npm,npm就在当前目录创建一个文件夹node_modulesNPM install modu......原创 2019-05-24 15:46:46 · 1934 阅读 · 0 评论 -
JS中call和Apply原理分析研究
call和apply都是为了改变某个函数运行时内部this的指向,会立即调用该函数原创 2019-05-14 21:53:53 · 1750 阅读 · 0 评论 -
JS中判断数据类型的几种方法
JS中的数据类型:String、Number、Boolean、Null、Undefined、Symbol、Function、Array、Object通过typeof判断 console.log(typeof 10); //number console.log(typeof NaN); //number console.log(typeof "10"); //string con...原创 2019-05-22 14:24:46 · 947 阅读 · 0 评论 -
JS通过Object.create创建对象内部原理分析研究
通过Object.create()方法创建一个新对象,使新对象的__proto__原型指向通过create传入的对象 let foo = { age:10 }; let f = Object.create(foo); console.log(f.age);//10create的内部原理 Object.create => function(obj){ ...原创 2019-05-22 15:03:12 · 1588 阅读 · 0 评论 -
解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题
在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部,但如果页面上有input或textarea被点击获取焦点时,在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去,有时会十分影响美观,下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的原创 2019-10-18 13:41:06 · 7029 阅读 · 0 评论 -
vue-cli3.0动态配置开发,测试,线上环境
开发环境:是程序员开发使用的环境,配置比较随意,为了开发调试方便,一般打开全部错误报告测试环境:克隆一份生产环境的配置,一个程序在测试环境工作不正常,那肯定不能把它发布到生产上线上环境:正式提供对外的服务,也就是用户使用的环境,一般关闭所有错误报告,打开错误日志原创 2019-06-29 01:30:48 · 3412 阅读 · 2 评论 -
前端的杂谈
主要用于介绍ES6的一些新特性和一些语法规则、命名规则原创 2019-06-29 01:31:52 · 1694 阅读 · 0 评论 -
Vue中使用函数防抖和节流
函数防抖(Debounce):指触发事件后在n秒内函数只执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。如:搜素框,滚动条函数节流(throttle):指连续触发事件但在n秒中只执行一次,避免某些事件频繁触发。如:按钮点击原创 2019-06-19 22:54:35 · 3624 阅读 · 1 评论 -
JS中的Event Loop(事件循环)机制及Promise、async、await执行顺序
JS是一门单线程非阻塞的脚本语言,也就是说,所有的任务都是串行执行,同一时间只能做一件事。但当我们做一些比如:网络请求、定时器、事件监听等一些比较耗时的任务时,如果也让JS的单线程来做,那不仅仅执行效率低,页面也会出现卡死现象,用户体验会非常差。那如何解决呢,用事件队列。这也是为什么说,它是非阻塞的原创 2019-06-01 22:24:29 · 2257 阅读 · 2 评论 -
Vue原理-实现双向绑定MVVM
Vue实现数据双向绑定的原理是基于数据劫持结合发布-订阅者模式实现的,通过Object.defineProperty()来劫持各个属性,并在数据变动时发布消息给订阅者,触发相应的监听回调,更新视图原创 2019-05-28 22:19:19 · 586 阅读 · 0 评论 -
浏览器的解析渲染原理以及JS、CSS阻塞问题分析
输入Url地址按下回车发生了什么?1:根据网址进行DNS解析,将相应的域名解析为IP地址2:客户端根据IP地址去寻找对应的服务器并进行TCP三次握手,建立TCP连接3:客户端发起HTTP请求,请求对应资源4:服务器响应并返回相应数据(如:HTML文件)5:浏览器将获取的HTML文档由HTML解析器解析成DOM树6:同时由CSS解析器将CSS样式解析成CSS Rule Tree(CSS规...原创 2019-06-12 16:12:40 · 1956 阅读 · 0 评论 -
JS中立即执行函数和闭包的区别
函数声明规则:必须指定一个函数名字foo();function foo() { console.log("函数声明")}由于函数声明会被提升,所以调用函数可以在之前或之后调用函数表达式规则:将函数赋值给一个变量 var foo = function () { console.log("函数表达式") } foo()由于函数表达式,只会对变量foo进行提升...原创 2019-05-28 16:29:09 · 6405 阅读 · 0 评论