- 博客(48)
- 收藏
- 关注
RSS订阅原创 防抖和节流的区别
防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。 简单概括：每次触发时都会取消之前的延时调用。 2.节流(thorttle): 高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时 调用的方法。 简单概括：每次触发事件时都会判断是否等待执行的延时函数。 二.区别： 区别：降低回调执行频率，节省计算资源。 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将 多次执行变成每隔一段事件执行 函数防抖一
2024-09-25 22:01:41
112
原创 vue 组件绑定自定义事件
在，子组件中，我们是可以 给 button 绑定 click 事件的，因为 原生button 标签，本来就有 click 事件，这里只是巧妙利用了，子传父的一个思想，用 $emit 暴露出去一个自定义事件，父监听，，子组件触发了点击事件，同时，父也会监听到。在vue 项目开发中，常常为了，节省代码、高效利用，会封装自定义组件，封装自定义组件，传值就是 prop ，那绑定事件呢？假设，前提：d-button 没有绑定事件，父组件是这样写的，你点把，把 button 按钮，点 烂，都不会 有输出结果。
2024-05-06 22:08:04
401
原创 Vue中的mixin(混入)
Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。
2024-05-06 22:04:05
740
原创 vue中props详解
看一下官方文档：组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是：一个组件可以直接在模板里面渲染data里面的数据（双大括号）。子组件不能直接在模板里面渲染父元素的数据。如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。
2024-05-06 22:01:38
982
原创 vue3中标签的ref属性
通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与。进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用。：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$，引用指向的就是DOM 元素如果用在子组件上，引用就指向组件实例。refs.fruit 的值应该是一个数组，数组中放的DOM元素。refs.fruit 的值应该是一个数组，数组中放的DOM元素。
2024-05-06 21:59:32
3601
1
原创 render函数
通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器。render函数即渲染函数，它是个函数，render返回的参数是Vnode（即虚拟节点，也就是我们要渲染的节点）
2024-05-06 21:55:38
1043
原创 VueComponent构造函数
App.vue里data里面的值是父组件的值，然后在使用组件的地方，使用绑定方式，左侧是自定义的名字，右侧是我们data里面的数据，如果不用v-bind，那么就是一个字符串。新建一个Header.vue ，Footer.vue子组件，然后还是使用之前的方式，在App.vue里引入组件，然后注册组件，最后使用组件这样一个顺序。组件传值就是把父组件的值传递给子组件，所以父组件必须有值，左侧是自定义的名称，右侧是实际的值使用v-bind: 绑定的就是data里面的值。一般使用的是局部组件，使用方式是，
2024-05-06 21:51:41
444
原创 Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
App.vue里data里面的值是父组件的值，然后在使用组件的地方，使用绑定方式，左侧是自定义的名字，右侧是我们data里面的数据，如果不用v-bind，那么就是一个字符串。新建一个Header.vue ，Footer.vue子组件，然后还是使用之前的方式，在App.vue里引入组件，然后注册组件，最后使用组件这样一个顺序。组件传值就是把父组件的值传递给子组件，所以父组件必须有值，左侧是自定义的名称，右侧是实际的值使用v-bind: 绑定的就是data里面的值。一般使用的是局部组件，使用方式是，
2024-05-06 21:48:40
1085
原创 vue的组件化编程
注意：此处的data使用的是函数式返回（不是对象式）：因为多次一使用同一个组件，当后使用组件部分改变data中数据，前面组件使用组件的数据也会改变。components：{'组件名','...'} :注册组件（在Vue实例中使用此配置项）：局部注册。只需要使用组件标签就会创建组件实例=vc实例（使用两次组件标签就会实例化两次vc）// 2. 全局注册组件(组件名字，组件在哪)：可以使用在任何vue绑定的模板中。组件标签：使用组件（将组件标签写在容器中，可以写多个组件标签=复用）
2024-05-06 21:46:04
631
原创 Vue生命周期函数
6、这个绿框中内容表示Vue开始编辑模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终的模板字符串对象，然后把这个字符串对象，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去。13、这一步，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存DOM树，当内存DOM树被更新之后，会把最新的的内存DOM树，重新渲染到真实的页面当中，这时，就完成数据从data（Model层）->view（视图层）的更新。在这一步，实例仍然完全可用。
2024-04-24 21:34:20
607
原创 vue自定义指令
在Vue中，诸如v-if、v-for、v-on等等被称之为内置指令，它们都是以v-开头的，我们无需注册即可在全局使用它们，内置指令提供了极大的方便给我们，比如v-for指令可以让我们快速循环出很多dom元素。因为vue3可以有多个根节点，当有一个根节点时使用指令没有问题，如果有多个根节点使用指令回报错，建议多个根节点可以在组件内部使用指令。arg：传递给指令的参数 (如果有的话)。在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性。
2024-04-24 21:31:50
900
原创 v-once、v-clock、v-pre
v-once指令只渲染元素和组件一次，随后的渲染，如果使用了此指令的元素、组件及其所有子节点，则都会当作静态内容并跳过。这个特性可以用于优化更新性能。bodyhtml在浏览器中运行的效果如图所示:运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。
2024-04-24 21:28:34
371
原创 v-html指令
v-html指令为Vue.js开发者提供了一种便捷的方式来处理动态生成的HTML内容。然而，在使用v-html时，务必注意安全性问题，以防止潜在的XSS攻击。通过合理使用v-html指令，开发者能够更灵活地应对各种富文本和富媒体的场景，提升用户体验和开发效率。
2024-04-24 21:24:54
477
原创 Vue的v-text指令
可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。这种方式的输入框，是可以直接通过这个v-model获取到值的。因为v-model默认就是收集输入框的value值data:{userInfo:{account:‘’,possword:‘’}}和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个va
2024-04-18 20:42:10
300
原创 vue收集表单数据
可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。这种方式的输入框，是可以直接通过这个v-model获取到值的。因为v-model默认就是收集输入框的value值data:{userInfo:{account:‘’,possword:‘’}}和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个va
2024-04-18 20:39:19
1169
原创 Vue列表渲染
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。变更方法，顾名思义，会变更调用了这些方法的原始数组。
2024-04-11 21:59:19
1140
原创 Vue.js条件渲染指令v-if及v-show
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
2024-04-11 10:39:43
885
原创 vue动态绑定style样式之动态添加style样式的多种写法
项目中会需要动态添加 style 行内样式，现指出常用的几种方式。注意:1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。2、除了绑定值，其他的属性名的值要用引号括起来，比如而不是fontSize:14px。
2024-04-10 21:14:51
1007
原创 vue动态绑定class的几种方法
3、当:class的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用data或者computed。2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）2、对象中也可存在多个属性，动态切换class，：class 可以合class共存。
2024-04-10 21:12:24
1485
原创 vue中的watch与computed的区别
当 computed 属性的属性值是函数，那么默认会走get方法，函数的返回值就是属性的值；，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例。上述代码中，当改变 obj 里属性的值时，打印 newVal 和 oldVal 的结果，发现他们是相等的。不过，deep 无法监听到数组的变动和对象的新增，参考 vue 数组变异，只有以响应式的方式触发才会被监听到——时，setter 会被调用，
2024-04-10 21:10:15
449
原创 vue的监视属性
比如下面这个场景，开发者要监测天气的变化，每次点击切换天气，就会变化，要求我们对不同的天气做出不同的处理。用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化。这里注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号。在实际开发中，有时开发者需要根据某个属性的变化，做出相应的决策，因此。默认监视单层属性的改变，想实现监测多层结构需要使用。的值，进行监视到属性改变后的一些操作；监视多级结构中某个属性的变化。
2024-04-10 21:07:25
354
原创 Vue中的键盘事件
对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时，input 事件都应该触发。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。属性替代，这个属性表示键盘上的物理键（与按键生成的字符相对），但是目前在一些浏览器中并未实现。代表着一个唯一标识的所按下的键的未修改值，它依据于一个系统和实现相关的数字代码。
2024-04-07 21:41:30
2193
原创 Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
2024-04-05 13:33:40
1629
原创 vue基本写法
Vue 允许创建可复用的组件，提高代码的可维护性和重用性。可以使用 Vue.component 方法定义组件，然后在模板中使用自定义标签引用组件。使用计算属性可以根据已有的数据计算出新的属性，而不是在模板中编写复杂的逻辑。这些是 Vue.js 的一些标准写法，涵盖了 Vue 实例、模板语法、组件、计算属性和属性监听等方面的用法。{}} 来输出变量的值，并通过指令 v-bind 绑定属性或 v-on 绑定事件。可以使用双大括号插值语法 {可以使用 watch 选项监听数据的变化，执行相应的操作。
2024-04-05 13:28:59
505
原创 js动画函数封装
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。如果多个函数使用这个动画函数，每次都需要var声明定时器，因此可以给不同的元素使用不同的定时器。核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。缓动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来。以1.1案例练习为例，封装动画函数。回调函数写的位置：定时器结束的位置。注意：函数需要传递2个参数，以1.5案例为基础的案例练习。
2024-03-23 14:47:09
307
1
原创 url相关概念及组成
Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL（Uniform Resource Locator, 统一资源定位器）。它是www的统一资源定位标志，简单地说URL就是web地址，俗称“网址”。(带方括号[]的为可选项)https://blog.csdn.net/weixin_53436351?spm=1011.2124.3001.5343协议（HTTP）：规定数据传输的方式域名（IP）：在网络环境中找到主机-------用 :// 与协议分隔开端口（port）：（常省略）在网络主机
2024-03-21 22:53:44
3838
1
原创 js的执行机制同步异步
是单线程三. process.nextTick与setImmediate方法(1) process.nextTick(2) setImmediate四.事件循环(1) 运行栈(2) 任务队列(3) 事件循环五.宏任务和微任务(1) 宏任务(2) 微任务六. promise和async函数(1) promise函数(2) async函数七. 测试题。将vscode右击----属性---兼容性---管理员运行。这里使用@符号时，要加。的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
2024-03-21 22:48:32
925
2
原创 js三种定时器语法和异同
众所周知js定时器有两种 setTimeout和setInterval 还有一个新增的requeTanimationFrame（动画API）也被加入到了面试经常考察的范围，那么我就从是什么 怎么用，什么时候用，他们的区别是什么来简述一下这三者的关系。
2024-03-21 22:40:00
869
1
原创 DOM事件流
在讲事件流之前，我们先来了解一下事件。JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。
2024-03-19 16:21:08
850
1
原创 Javascript中的事件处理（事件注册、删除、委托）
capture：可选参数，默认值为false，表示在事件冒泡阶段进行处理，true，表示在事件捕获节点进行处理。：事件具有唯一性， 同一个元素同一个事件只能注册一个处理函数 ，后面注册的函数会将前面注册的函数覆盖掉。3、事件处理程序（事件处理函数 ）：当事件被触发后所执行的操作（代码）：可以给同一个DOM对象同时注册多个事件处理函数（程序）callback：事件处理程序（函数）（1）传统方式：DOM对象.事件名 = null;2、事件源：产生（触发 ）事件的对象。1、事件 ：用户进行的某种操作。
2024-03-18 20:53:44
311
1
原创 js修改元素样式
–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等。|–x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)： 获取指定字符；如返回-1，x则不在数组中。|–parentNode.insertBefore()(新元素对象，A)–其中A为新元素要插入位置的后一位元素。|–x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字。
2024-03-17 21:57:30
3371
1
原创 JS中节点操作
网页中的所有内容都是节点(标签,属性,文本,注释等),HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除。
2024-03-17 21:53:33
1126
1
原创 关于js中innerText 与innerHTML的区别
但是需要注意的是，它们之间有一些不同之处，具体使用要根据实际情况确定。，它可以轻松地修改网页的结构和布局。然而，如果只需要获取网页中的文本内容，而不需要。这样的话，我们就可以通过编程来更新网页中的内容，而无需修改。可以引用其他元素或属性，例如文本，图像，链接，样式和脚本。如果一个元素包含嵌套的标签，例如链接、段落或表格，则。在实际应用中，如果需要动态更新网页的内容，则应使用。，因为它只返回纯文本内容，不包含标签和样式。元素的内容属性，但是它们有几个不同之处。内容，大大简化了Web开发的工作流程。
2024-03-17 09:51:08
361
1
原创 js中 ?? , || , &&, ?. 概念简介
使用 || 的时候，当第一个值为非0非null非’‘非undefined的时候，优先取第一个值，而当第一个值是0或’'或null或undefined的时候，则优先取第二个参数的值。该库结合了直观的语法，父子级更新树，修改的getter和setter以及安全的默认值，以提供具有关联感的界面。您可以在运行基准测试。只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。
2024-03-14 12:06:19
399
原创 js总结大全
配套资料，免费下载 链接：https://pan.baidu.com/s/152NnFqzAUx9br2qb49mstA 提取码：ujyp 复制这段内容后打开百度网盘手机App，操作更方便哦JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是
2024-03-14 12:04:08
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人