小凳子腿-CSDN博客

原创 watch 和 watchEffect 的使用

watch 和 watchEffect watch特点： 1: 懒执行，仅当数据变化时执行(deep 除外) 2: 更加明确需要侦听的数据源，更精准的控制回调函数的触发时机 3: 可以访问所侦听状态的前一个值和当前值 watchEffect特点： 1: 首次加载会执行一次，即便是空函数 2: 自动追踪所有能访问到的响应式属性，任一属性发生变化都会触发回调函数 3: 无法获取前一个值和当前值

2024-02-06 11:06:54 421

原创 Vue3 组件 v-model 和 defineModel 使用

Vue3 组件 v-model 和 defineModel 使用，从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏，这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用 defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用： 1. 它的 .value 和父组件的 v-model 的值同步； 2. 当它被子组件变更了，会触发父组件绑定的值一起

2024-02-05 18:01:23 1014

原创 unplugin-vue-components 源码原理分析

unplugin-vue-components 是一款按需自动导入Vue组件的库，支持 Vue2 和 Vue3，同时支持组件和指令。使用此插件库后，不再需要手动导入组件，插件会自动识别按需导入组件以及对应样式，我们只需要像全局组件那样使用即可。

2023-04-16 14:30:46 3630 2

原创 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 7185 4

原创 Pinia 使用及与 Vuex 区别

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态，与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持，Pinia 持久化存储插件 pinia-plugin-persistedstate 使用

2022-10-03 22:28:50 235

原创在 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 933

原创 v-model在vue2与vue3中的区别

v-model在vue2与vue3中的区别，v-model主要是用在表单、及元素上创建双向数据绑定。它会更具控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据

2022-10-02 21:45:09 1732

原创 el-table 动态表格的合并-二维数组

el-table的表格合并都需要通过span-method方法来实现，无论简单的还是复杂的。上面的例子您做过吗？就算只是展示其实也是有一点难度的，更何况它是动态的，可添加、可删除，可以先思考一下，看看您是想怎么实现它呢？......

2022-08-01 23:34:33 269

原创 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 3714

原创 for forEach for...in for...of 区别

let arr = [10, 20, , 30, 40, 50] // 角标2是一个空值 arr.demo = 60 // 额外添加的属性 Array.prototype.test=function(){} // 原型上添加的属 let obj = { name: 'liu', age: 99 } obj.sex = '男' Object.prototype.demo = function(){} // 原型上添加的属性普通for循环 for(let i=0, len=arr..

2021-01-04 14:54:16 329

原创子盒子在父盒子中水平垂直居中显示的几种方式

绝对定位方式-子盒子必须有宽高先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的margin-left、margin-top 把盒子移动到居中的位置 <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; height: 800px; backgroun

2020-05-14 17:51:03 2121

原创 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 934

原创 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 987

原创解决div里面img图片下方有空白的问题

# 产生空白的原因img标签是行内块元素即默认是：display: inline-block，且行内块元素的默认对齐方式是基线对齐即vertical-align: baseline所以产生空白的原因是因图片底边与容器基线对齐了，留出了基线与底线的空白# 解决空白方法 <div class="pic-container"> <img class="pic"...

2020-03-02 23:29:05 1946

原创 JS中splice、slice用法及区别

splice向数组中添加或删除元素，然后返回含有被删除元素的数组注意：这种方法会改变原始数组语法array.splice(index,howmany,item1,…,itemX)参数index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany：要删除的元素数量。如果设置为 0，则不会删除项目。如果未设置此参数，则删除从 index 开始到原数组结...

2020-02-26 23:03:03 6492

原创 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 627

原创 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 520

原创深入理解浮动元素与margin负值用法及三栏布局

浮动元素与margin负值使用正常两个浮动元素首先给元素设置浮动以后，元素就会变成块级元素 <div class="content"> <div class="middle">123456789123456789123456789123456789</div> <div class="left">111</div...

2020-01-14 17:12:07 3556 7

原创浅谈BFC

一、什么是BFCBFC: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域引用MDN二、BFC生成条件根元素()浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）o...

2020-01-03 16:11:40 556

原创 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 1473 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 4614

原创 Vue自定义插件及使用

开发插件在项目中经常会用到Loading框、toast框、dialog框等，这些经常被用的组件我们也都会把它设定成全局组件，其实我们也可以用自定义插件的方式来实现。这里就用插件的方式来实现一个全局的dialog对话框来演示。开发插件步骤创建一个 components 目录，并将每个组件放置在其各自的文件中，包括 .js、.vue在.js中导入.vue，使用基础 Vue 构造器，创建一...

2019-11-16 23:19:55 1704

原创 vue全局组件和局部组件的写法

全局组件通过 Vue.component 注册的组件为全局组件。如： import MyComponentName from './components/MyComponentName' Vue.component('my-component-name', MyComponentName)全局组件可以用在任何新创建的 Vue根实例的模板中注意：全局注册的行为必须在根 Vu...

2019-11-16 23:01:31 1113

原创 vue实现Tab切换功能

在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或看几篇博客应该就能实现。但这里面其实还有很多细节需要我们去做，如Tab切换时，切换过的Tab组件状态怎样缓存在项目中经常会有页面A -> 页面B -> 页面...

2019-11-01 16:42:32 9144 3

原创 vue中动态添加和删除组件缓存 keep-alive

Vue的抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中，能将组件在切换过程中将状态保存在内存中，防止重复渲染DOM；包裹动态组建时，会缓存不活动的组件实例，而不是销毁它们；当组件在 <keep-alive>内被切换时，它的activated和deactivated这两个生命周期钩子函数将会被执行。include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，max:最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组

2019-10-30 16:10:52 10224 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 2049

原创 Vue3.0在template、script、style中引用图片资源的方式

通过config.resolve.alias设置的别名在Vue的template模板和style样式内使用前面需加上~，在script脚本中则直接使用别名，不需加~；data中引用assets图片时，必须使用require('xxx')方式引用，否则会当字符串处理而无法显示图片

2019-10-23 17:33:31 10083

原创 vue首次赋值不触发watch及watch和computed的区别

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，也就是说immediate值为true，则首次赋值时就执行handler函数，immediate值为false，则首次赋值时就不执行handler函数；当需要监听一个对象的改变时（注意这里监听的是整个对象），正常的watch无法监听到对象内部属性的改变，此时需要使用deep对对象进行深度监听

2019-10-22 15:52:42 9971

原创解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题

在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的

2019-10-18 13:41:06 6748

原创前端的杂谈

主要用于介绍ES6的一些新特性和一些语法规则、命名规则

2019-06-29 01:31:52 1663

原创 vue-cli3.0动态配置开发，测试，线上环境

开发环境：是程序员开发使用的环境，配置比较随意，为了开发调试方便，一般打开全部错误报告测试环境：克隆一份生产环境的配置，一个程序在测试环境工作不正常，那肯定不能把它发布到生产上线上环境：正式提供对外的服务，也就是用户使用的环境，一般关闭所有错误报告，打开错误日志

2019-06-29 01:30:48 3373 2

原创 Vue中使用函数防抖和节流

函数防抖（Debounce）：指触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。如：搜素框，滚动条函数节流（throttle）：指连续触发事件但在n秒中只执行一次，避免某些事件频繁触发。如：按钮点击

2019-06-19 22:54:35 3578 1

原创浏览器的解析渲染原理以及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 1917

原创 JS中的Event Loop（事件循环）机制及Promise、async、await执行顺序

JS是一门单线程非阻塞的脚本语言，也就是说，所有的任务都是串行执行，同一时间只能做一件事。但当我们做一些比如：网络请求、定时器、事件监听等一些比较耗时的任务时，如果也让JS的单线程来做，那不仅仅执行效率低，页面也会出现卡死现象，用户体验会非常差。那如何解决呢，用事件队列。这也是为什么说，它是非阻塞的

2019-06-01 22:24:29 2209 2

原创 Vue原理-实现双向绑定MVVM

Vue实现数据双向绑定的原理是基于数据劫持结合发布-订阅者模式实现的，通过Object.defineProperty()来劫持各个属性，并在数据变动时发布消息给订阅者，触发相应的监听回调，更新视图

2019-05-28 22:19:19 573

原创 JS中立即执行函数和闭包的区别

函数声明规则：必须指定一个函数名字foo();function foo() { console.log("函数声明")}由于函数声明会被提升，所以调用函数可以在之前或之后调用函数表达式规则：将函数赋值给一个变量 var foo = function () { console.log("函数表达式") } foo()由于函数表达式，只会对变量foo进行提升...

2019-05-28 16:29:09 6373

原创 vue-cli 3.0之跨域请求devServer代理配置

概念什么是同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指：协议、域名、端口都相同什么是跨域跨域就是不同源，就是不满足协议、域名、端口都相同的约定如：看下面的链接是否与 http://www.test.com/index.ht...

2019-05-24 17:18:29 31968 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 1719

原创前端的物理像素、逻辑像素、移动端1像素边框解决方案

前端的物理像素、逻辑像素、1px边框问题

2019-05-24 13:46:31 1948

原创 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 1563