vue3 props 自定义构造函数

2024-10-28

vue.js实战——props数据验证（自定义构造器检测）

Vue.component('my-component',{ props:{ //必须是数字类型 propA:Number, //必须是字符串或数字类型 propB:[String,Number], //布尔值,如果没有定义,默认值就是true propC:{ type:Boolean, default:true }, //数字,而且是必传 propD:{ type:Number, required:true }, //如果是数组或对象,默认值必须是一个函数来返回 propE:{ type:Ar

vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.

vue3系列：vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0开发的多功能PC网页端自定义弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽区域).缩放.最大化.全屏及自定义置顶层叠等功能. v3layer的开发灵感同样来自之前v2版本,在功能效果上和之前的保持同步一致性. ◆ 引入组件 // 在main.js中全局引入组件 impor

vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3.x开发的轻量级自定义美化滚动条组件.功能效果基本和之前的vue2版保持一致.支持是否自动隐藏滚动条.自定义滚动条尺寸.颜色及层级等功能. 功能效果类似饿了么el-scrollbar组件.并且支持监听DOM尺寸改变,动态更新滚动条. ◆ 快速引入在main.js中全局引入滚动条v3scroll组件.

JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型

面向对象的三大特性: 封装 a) 把一些属性和方法装到一个对象里 2. 继承 a) js中的继承是指: 一个对象没有一些方法和属性,而另一个对象有把另一个个对象的属性和方法,拿过来自己用,这就是继承 b) 混入式继承 for … in 1. 父类的属性和方法在所有之类 3. 多态 a) JS中没有相应的体现 b) 在强类型语言比较常见 c) 实用父类的变量接受子类的对象 d) 父类的属性方法供所有的子类共享创建对象的方式 1. 创建对象四种方法: 1.字面

JS基础语法---创建对象---三种方式创建对象：调用系统的构造函数；自定义构造函数；字面量的方式

创建对象三种方式: 调用系统的构造函数创建对象自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对象 var obj = new Object(); //对象有特征---属性:和行为---方法 //添加属性-----如何添加属性? 对象.名字=值; obj.name = "小苏"; obj.age = 38; obj.sex = "女"; //添加方法----如何

JS创建对象的四种简单方式 (工厂模式和自定义构造函数创建对象的区别)

// 对象:特指的某个事物,具有属性和方法(一组无序的属性的集合) // 特征------>属性 // 行为------>方法 // 创建对象的四种方式 1 // 1.字面量的方式,就是实例化对象 var stu1={ name:"小明", age:20, ID:20181111, sex:"男", eat:function(){ console.log("吃烩面"); }, readBook:function(){ console.

JS高级---工厂模式创建对象和自定义构造函数创建对象的区别

创建对象:工厂模式和自定义构造函数的区别共同点: 都是函数, 都可以创建对象, 都可以传入参数区别: 工厂模式: 函数名是小写有new, 有返回值 new之后的对象是当前的对象直接调用函数就可以创建对象 //工厂模式创建对象 function createObject(name, age) { var obj = new Object(); obj.name = name; onj.age = age; obj.sayHi = function () { console.log(

使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能

element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog). 拖拽演示 https://www.zhihu.com/zvideo/1380450791975731200 vue3 的自定义指令 directive 为啥选择自定义指令的方式来实现呢?一个是可以方便的获得 dom 便于操作,另一个是方便使用和封装. 自定义指令有两种注册方

vue3.x自定义组件双向数据绑定v-model

vue2.x 语法在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件: <ChildComponent v-model="pageTitle" />  <ChildComponent :value="pageTitle" @input="pageTitle = $event" /> 子组件内props里面value接收传进来

VueJS组件通过props自定义事件

父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 以下实例中子组件已经和它外部完全解耦了.它所做的只是触发一个父组件关心的内部事件. HTML

vue3.0自定义指令（drectives)

在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

js中自定义构造函数讲解

什么是构造函数? 构造函数其实就是一个函数,只是用途和普通函数,不太一样, 构造函数一般用于初始化对象 <script> function Person(){ this.name="陈笑"; this.age=18; this.say=function(){ console.log("哈哈哈") } // return {}; } var p=new Person(); p.say() </script> 构造函数解决了使用对象字面量和内置构

VUE3 之自定义指令的实现 - 这个系列的教程通俗易懂，适合新手

1. 概述老话说的好:能屈能伸的人生,才是完满而丰富的人生. 言归正传,今天我们来聊聊 VUE 中自定义指令的实现. 2. 自定义指令 2.1 文本框聚焦的实现 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ mounted() { // 文本框聚焦 this.$refs.myInput.focus(); }, templ

vue3 自定义指令控制按钮权限

经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能.为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒.以下是个人的做法,是否有弊端和不足,或者各位高手有更优的方案,欢迎指导和赐教! 1.总体效果如下: 2.permissionlist组件中的按钮设置为:增加.修改和删除

使用 Vue3 构建 Web Components

有时候想写一个无关框架组件,又不想用原生或者 Jquery 那套去写,而且还要避免样式冲突,用 Web Components 去做刚觉就挺合适的.但是现在 Web Components 使用起来还是不够灵活,很多地方还是不太方便的,如果能和 MVVM 搭配使用就好了.早在之前 Angular 就支持将组件构建成 Web Components,Vue3 3.2+ 开始终于支持将组建构建成 Web Components 了.正好最近想重构下评论插件,于是上手试了试. 构建 Web Component

Vue学习笔记-组件通信-父传子（props中的驼峰标识）

在组件中,使用选项props来声明需要从父级接收到的数据.props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称.方式二:对象,对象可以设置传递时的类型,也可以设置默认值等. <div id="app">  <!--在传值的时候不支持驼峰写法childMy

【js】 vue 2.5.1 源码学习（五） props directives规范化 props 合并策略

大体思路 (四) 上节回顾: A: 对于生命周期函数将父子组件的函数放到一个数组里面,特定时间点调用,保证父子组件函数都调用到. B: 对于directive,filters,components 等的资源选项,父选项将以原型的形势处理,正式因为这样子,在任何地方都可以用到内部自定义指令. C: 对于watch选项的合并,类似于生命周期,如果父子组件相同的观测字段,将合并为一个数组. 本节内容: props normalizeProps normalizeDirective 规范化 props

Vue3 中有哪些值得深究的知识点？

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例时,有很大的区别,具体对比如下: //Vue 2 Vue.use({ router, store, render:h=>h(App) }).$mount("#app") //Vue 3 createApp(App).use(router).use(store).mount("

《JS设计模式笔记》构造函数和工厂模式创建对象

工厂模式 function createPerson (name,age,job) { var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; }; var person1=createPerson("Terry",24,"Software Engineer"); person1.sayName(); var

vue3 props 自定义构造函数

热门专题