vue里面函数的封装

最新推荐文章于 2024-05-31 17:13:58 发布

??YouShuang

最新推荐文章于 2024-05-31 17:13:58 发布

阅读量711

点赞数

本文链接：https://blog.csdn.net/youshuang1207/article/details/107921945

版权

在这里插入图片描述

函数的封装问题,在check里面,触发函数checkContentByReg()传实参进去,但这个实参有讲究,单写usernameTip好像是未被定义underfind

如果加了this.是个死值字符串,不能改变,应该为一个变量才可以

this[usernameTip]=this.usernameTip
两者的区别,谁适合接受变量,谁适合接受字符串

封装的顺序
1先写传入的实参this.checkContentByReg(),看实参有哪些是可变的,来写实参
2再写函数的结构和形参,方便复用checkContentByReg(){
形参调换实参写入在结构
}

打断点,还可以用console.log(333)来检验是否进入执行
在这里插入图片描述

ctrl+f
一般未被定义underfined就是单词写错,或被被声明就调用,或者实例下面没加this

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

??YouShuang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue 组件封装简单案例——小白入门

qwe122343的博客

07-17

3754

今天初步接触了 Vue 中的组件封装，将写好的公用组件封装在 src 的 components 文件夹下，在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例，在 components 文件夹新建ComponentsPractice.vue文件 <template> <button @click="show">我是组件封装按钮</button> </template> <script> expor

Vue3中封装函数式组件-弹窗组件

01-07

2432

【代码】Vue3中封装函数式组件-弹窗组件。

参与评论您还未登录，请先登录后发表或查看评论

Vue番外之封装函数

二木成林

03-11

699

在vue中自定义函数并进行调用：首先创建一个js文件，并在里面写一个函数其中fun是调用的对象，而resp是需要封装的函数的函数名名，resp(res, func)是两个参数，其中res是一个对象，而func是一个待调用的函数。最后使用export default fun将该对象暴露出去，让其他得以访问。接着就是在vue文件中引入注意引入的路径，其中fun是调用的对象名。接下来就是引用里面的函数：通过fun.resp()调用刚才封装的函数。第一个参数是传入的res，第

vue封装的一些函数

u014678583的博客

01-10

1211

因项目要用到一些常用的函数，故简单的封装了些函数，方便自己以后调用把 utils.js: //根据数组中字段排序,从小到大 exportconstcompare=(property)=>{ returnfunction(a,b){ varvalue1=a[property]; varvalue2=b[property]; ...

Vue3 自定义Hooks函数的封装

最新发布

weixin_48420104的博客

05-31

1054

在Vue 3中，自定义hooks允许开发者封装和重用逻辑代码。自定义hooks是使用Composition API时创建的函数，这些函数可以包含任意的组合逻辑，并且可以在多个组件之间共享。自定义hooks通常遵循这样的命名约定：以use开头，后面跟上hook的名称，这样做可以清晰地表明它是一个自定义的hooks。01、具备可复用功能，才需要抽离为 hooks 独立文件02、函数名/文件名以 use 开头，形如: useXX03、引用时将响应式变量或者方法显式解构暴露出来；

vue3 如何封装函数实现vuex的功能

qq_47452289的博客

12-31

655

vue3 如何封装函数实现vuex的功能 1、首先封装一个ts文件，导出自定义的useMyStore方法，里面包含自定义的state和action import { reactive } from 'vue' interface stateInterface { font: string } // 定义state，存储变量 const state = reactive<stateInterface>({ font: '111' }) function updateFont(val:

Vue自定义指令封装节流函数的方法示例

08-27

Vue自定义指令封装节流函数的方法示例今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...

vue中date函数封装

09-16

封装的时间函数,时间戳转换为年月日可以选择,可以有倒计时,天数展示,需要联系就好,免费

vue2.0_节流函数（1）的封装和使用

QiuRenBB的博客

02-11

1458

首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将节流函数（1）的方法写入： /*** * 节流函数在wait间隔时间内不再进行任何调用时，触发一次最后的调用（如:wait设置为300ms，一直点击，该函数一直不执行，只有在间隔了300ms不做任何点击后，才执行刚才的最后一次点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */

Vue 工具函数封装

qq_45345113的博客

07-25

1017

common/utils下定义一个公共方法，将动态的数据抽取为形参，由使用者根据自身的情况动态的传入实参

Vue3封装消息提示实例函数

m0_58861443的博客

09-23

319

Vue3封装消息提示实例函数组件功能分析：固定顶部显示，有三种类型：成功，错误，警告。显示消息提示时需要动画从上滑入且淡出。组件使用的方式不够便利，封装成工具函数方式。样式布局封装 message.vue <template> <Transition name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式

关于Vue中常用的工具函数封装

weixin_34032792的博客

05-16

2063

## Vue 项目中工具函数，我们通常会添加到Vue的原型中，这样就实现了全局函数import Vue from 'vue' Vue.prototype.$tools = function （）{}复制代码只需要将绑定的这段js引入到main.js即可。绑定方法十分简单，这里不再详细说明下面列举几个常用的工具函数#$dateFormat 事件格式化函数，相对于moment轻很多Vue.proto...

记录一个Vue封装公共函数方法的步骤

03-16

646

记录一个Vue封装公共函数方法的步骤这边要记录的是两种方法一. 在main.js 中直接封装我们以上一篇关于获取页面宽度的问题来做封装 /*main.js*/ Vue.prototype.GetsPpageWidth= function(){ let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWid

vue封装函数组件

haodanzj的博客

01-07

487

用vue封装函数组件

vue3组合式函数，封装和复用有状态逻辑的函数

徐同保的专栏

05-14

199

vue3组合式函数，封装和复用有状态逻辑的函数

vue中的封装函数

这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。

08-13

8016

我个人觉得vue中的封装函数和jquery很像；首先创建一个脚本在里面声明自己写的函数（比如封装一个保存localstorage的get，set，remove方法）： //封装操作localstorage本地存储的方法模块化的文件 var storage={ set(key,value){ localStorage.setItem(key,JSON.str...

vue中函数的封装和调用

weixin_48951113的博客

03-27

877

export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，在一个文件或模块中，export、import可以有多个，export default仅有一个。注：通过export方式导出，在导入时要加{ }，export default则不需要。

001 - *VUE.JS常用函数大全*(基础)

李观杰的博客

07-11

3207

*VUE.JS常用函数大全*(基础)

vue常用函数封装及使用

weixin_48463654的博客

01-05

3103

vue 常用函数封装及使用

vue节流函数封装与使用

05-24

节流函数是指在一定时间内只执行一次函数，可以用于优化页面滚动、窗口大小调整等频繁触发事件的性能。下面是一个简单的 Vue 节流函数封装示例： ```javascript export default { data() { return { throttleTimer: null // 保存节流计时器的变量 } }, methods: { // 节流函数 throttle(callback, delay) { clearTimeout(this.throttleTimer) // 清除上一次计时器 this.throttleTimer = setTimeout(() => { callback() }, delay) }, // 事件处理函数 handleScroll() { this.throttle(() => { console.log('scroll event') }, 500) } }, mounted() { window.addEventListener('scroll', this.handleScroll) }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll) } } ``` 在上面的示例中，我们定义了一个 `throttle` 方法，它接收一个回调函数和延迟时间作为参数，用 `setTimeout` 来实现节流功能。在 `handleScroll` 方法中，我们使用了 `throttle` 方法来包装真正的处理函数，并传入 500 毫秒的延迟时间。最后，在 `mounted` 钩子中添加了滚动事件监听器，在 `beforeDestroy` 钩子中移除监听器。使用这个方法，我们可以轻松地实现节流功能，优化页面性能。