- 综合排序
- 最热优先
- 最新优先
Vue.js3高级编程-UI组件库开发
Vue.js 3 不仅仅是一个版本迭代，它代表了现代前端工程化的一次范式转移。从源码深度解析到组件库的全栈精通，是通往未来高阶前端架构师的必经之路。 无头组件（Headless UI）与设计系统的分离未来的组件库趋势是“逻辑与样式分离”。精通 Vue 3 意味着能够构建只提供行为逻辑、不绑定任何样式的“无头组件”。 基于 Vue 3 强大的异步组件能力和动态导入机制，构建支持模块联邦（Module Federation）的分布式组件库成为可能。 Vue 3 的高级实战不仅仅是功能实现，更是对性能的极致压榨。细粒度的更新控制通过源码级的理解，开发者可以精确控制组件的更新边界，避免不必要的重渲染。 五、结语：构建确定性的数字未来Vue.js 3 的高级实战，本质上是一场关于控制力的修行。
15210编辑于 2026-03-06- 来自专栏ops技术分享
Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) 注册后，我们可以使用以下方式来调用组件： <tagName></tagName> 全局组件 所有实例都能用全局组件。 ' }) // 创建根实例 new Vue({ el: '#app' }) </script> 局部组件 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用： 局部组件实例 : '
自定义组件!
5.1K20发布于 2021-07-27 - 来自专栏pandacode_cn
Web组件库 JS组件方法记录
以折叠面板的形式进行组件描述，点击对应的面板会展示对应信息。 menu_url: 'setting.permission.user_add', parent_id: '1-1' }, { id: '1-1-3'
50800编辑于 2023-07-17 Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 注册后，我们可以使用以下方式来调用组件： <tagName></tagName> 全局组件 所有实例都能用全局组件。 ' }) // 创建根实例 new Vue({ el: '#app' }) </script> 局部组件 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用： 局部组件实例 : '
自定义组件!
26010编辑于 2025-12-16- 来自专栏河湾欢儿的专栏
Vue.js组件
之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建 ------使用Vue这个全局对象的component方法进行全局注册一个组件 2.创建根实例,进行视图的绑定 3.组件的显示 --3. --3. --父容器输入标签,会将slot标签替换掉--> <my-slot> <h3>这里是父容器写入的</h3> </my-slot ://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <h3>动态组件</h3>
9.7K40发布于 2018-09-06 - 来自专栏女程序员的日常_Lin
Vue.js的组件、组件间通信
目录： 组件的种类：vue-router产生的每个页面、基础组件、业务组件 Vue.js组件的三个API:prop、event、slot Vue.js组件的通信方式： ref：给元素或组件注册引用信息； Vue.js组件的三个API:prop、event、slot props props定义了这个组件有哪些可配置的属性，props最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值 Vue.js组件的通信(基本) Vue内置的通信手段一般有两种 ref：给元素或组件注册引用信息； parent/children：访问父 / 子实例。 Vue.js组件的通信(其他) 一、provide/inject（主要解决子组件获取上级组件的状态，主动提供与依赖注入的关系） Vue.js 2.2.0版本后新增的API。 /mixins/emitter.js' export default { mixins: [ Emitter ], methods: { handleDispatch () {
10.9K10发布于 2020-05-22 Vue.js 3高级编程：UI组件库开发2025年
科技驱动前端架构：Vue.js 3 高级编程与 UI 组件库开发实战引言：从“页面构建”到“数字生态编排”在 Web 技术演进的长河中，前端开发的定义正在被彻底重写。 Vue.js 3 的发布不仅仅是一个框架的版本迭代，它标志着前端工程化进入了一个全新的维度。结合高级编程思想与 UI 组件库的自主研发，现代前端架构正从单纯的“页面构建”转向对数字生态的“编排”。 一、响应式内核的重构：细粒度追踪与性能飞跃Vue.js 3 最底层的科技突破，在于其响应式系统的彻底重构。 结合 Vue 3 的高效更新机制，组件库能够在保持丝滑帧率的同时，处理海量数据。 结语：以科技之名，重塑前端边界《Vue.js 3 高级编程与 UI 组件库开发实战》所揭示的，不仅仅是语法的学习或组件的编写，而是一场关于前端架构认知的深刻洗礼。
29620编辑于 2026-03-11- 来自专栏coding
vue.js组件初探
组件的作用 vue.js组件的作用：拆分功能，便于复用。 '<h3 class="text-center text-success">这是一个由Vue.extend创建的组件</h3>' })); 页面中引用组件
<test-component ">这是一个由Vue.component创建出来的组件</h3>' }); 具体代码 使用template标签定义组件 定义两个组件 <template id="tmp1"> <h3 class ="text-center text-warning">这是通过 template 元素定义的组件结构, 这是一个全局组件，可用于各个vue实例中</h3> </template> <template id="tmp2"> <h3 class="text-center text-info">这是一个私有的组件，只能用于特定的vue实例</h3> </template> 将两个组件分别定义为全局组件和局部私有组件3.3K20发布于 2018-08-02来自专栏马洪彪免费JS甘特图组件dhtmlxgantt
Nuget nuget install DHTMLX.Gantt npm npm install dhtmlx-gantt 或使用CDN、下载JS库引入（简单HTML应用）。 edge/dhtmlxgantt.css" type="text/css"> <script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.<em>js</em> "></script> js <script type="text/javascript" src="codebase/dhtmlxgantt.<em>js</em>"></script> <link rel="stylesheet DOCTYPE html> <html> <head> <script src="codebase/dhtmlxgantt.js"></script> <link href="codebase 自定义甘特图，可实现自定义展示（通过config和templates），自定义交互（通过method和event）以及自定义<em>组件</em>布局（layout）。
18.9K31发布于 2021-05-19来自专栏ljwVue.js组件开发
组件化：视图被分割成可复用的组件，每个组件有自己的状态和生命周期。 指令：Vue.js 提供了一系列内置指令（如 v-bind、v-if、v-for 等），用来处理 DOM 的操作。 状态管理：借助 Vuex，进行组件之间的数据共享和状态管理。 1.2 生态系统 Vue.js 有丰富的生态系统，主要包括： Vue Router：用于 SPA 的路由管理。 组件是 Vue.js 的核心概念，组件可以包含自己的模板、数据和方法。 Vue.use(VueRouter); // 使用 Vue Router 六、Vue 3.x 的变化 Vue 3 带来了很多新的特性和优化： Composition API：允许开发者以函数的形式组织代码 性能优化：Vue 3 增强了性能，减少内存占用。 Fragment：支持多个根节点，使组件可以返回多个根元素。 Teleport：便捷的 DOM 传送。
34810编辑于 2025-05-31来自专栏LeoXu的博客Ext JS 教程-组件 原
2 shaodow - 定制一个浮动组件的阴影。 3 alignTo() - 使浮动组件同一个特定的元素对其。 4 center() - 让浮动组件在它的容器中对其。 2 beforeShow - 这个方法在组件被显示出来之前被调用。 3 onShow - 允许显示操作有附加的行为。在调用了父类的onShow以后，组件将会是可见的。 Panel拥有许多的能力： 1 边框（Border） 2 头部（Header） 3 头部工具（Header tools） 4 尾部（Footer） 5 尾部按钮（Footer buttons 它被传入了已经被加入的组件。这个方法也许被用来更新任何依赖子条目的状态的内部结构。 3 onRemove - 这个方法在一个新组件已经被移除之后被调用。它被传入了已经被移除的组件。 3 onDockedAdd - 这个方法在一个对接条目被加入到面板时被调用。 4 onDockedRemove - 这个方法在一个对接条目被从面板中移除时被调用。
3.9K30发布于 2018-08-15来自专栏codingvue.js组件切换
vue.js多个组件之间进行切换，可以有多种方式，以下列举几种作为范例： 通过事件进行切换 声明两个组件 <template id="login"> <h3>登录组件</h3> </template > <template id="register"> <h3>注册组件</h3> </template> 使用@click事件进行切换 <button class="btn btn-success <em>组件</em>切换--事件.gif 通过component标签指定当前<em>组件</em> <component :is="comName"></component> 具体代码 ? 切换组件 组件切换时加上动画效果 使用transition标签将组件包裹起来，实现组件切换时的动画效果 <transition mode="out-in"> <component :is="comName <em>组件</em>切换--动画.gif
8.2K20发布于 2018-08-02<script src="<em>js</em>/vue.<em>js</em>"></script> <script> Vue.component slot 的name属性与父组件slot属性对应 </script> </body> （3）作用域插槽 2.1.0新增 作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素</template> 3、.vue 组件，创建.vue后缀的文件,如组件Hello.vue，放到components文件夹中，在使用的页面进行引用 3、data必须是函数 data } }) var app = new Vue({ el: "#example-1" }) </script> </body> 由于这3个组件共享了同一个 其它内容</h3> </my-component>来自专栏前端之攻略Vue.js-组件 原
Vue.component(tagName,options) 例如： Vue.component("my-component",{ //选项 }) 对应自定义标签名，Vue.js不强制要求遵循W3C
5.7K20发布于 2019-04-04
《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件，组件时什么，它的作用，它的构架，以及怎么创建和周期还有常见的配置项，属性方法和事件以及其层级是什么都进行整理，希望对大家有帮助。 ? 组件的基础知识.png ? 2 ?
【组件篇】ionic3开源组件
平时会留意一些开源组件，收藏到收藏夹里，然后一天mac电脑因为卸载window出问题导致不能不重装，然后里面的东西都没了，特别是适用于ionic2布局的angular2和普通js……so sad，现整理回一些并分享下 ： 这里是组件篇，所以关于开源项目和插件的分别放在其它章，因为图片多会影响本文速度和美观，所以只放部分图。 提醒一点，ionic3除了很方便使用ionic2及以上组件外，也很方便引入angular2或普通js的组件。这里列的基本都是ionic2，如果没有，可以自行找angular2或js的。 组件库，可能和下面的有重复 awesome-ionic2-components ionic3-components 日历 ion2-calendar Ionic2-Calendar ionic2-date-picker ionic2Accordion 聊天 ionic3-chat ionic3chat ?
React-组件-CSS-In-JS
前言React组件CSS-in-JS是一种流行的前端开发技术，它将组件的JavaScript逻辑与样式定义结合在一起，以提高代码的可维护性和可重用性。 通过CSS-in-JS，开发者可以在组件级别轻松管理样式，而不必担心全局污染或类名冲突。 这种方法使用JavaScript对象来描述样式，这些对象可以根据组件的状态或属性进行动态计算，从而实现高度灵活的样式处理。 常见的React CSS-in-JS库包括Styled-components和Emotion。CSS-in-JS还可以提供一些额外的好处，如自动前缀处理和代码拆分，以提高性能。 总之，React组件CSS-in-JS是一个强大的工具，可以帮助开发者更轻松地管理组件样式，从而提高前端开发的效率和可维护性。
Vue.js动态组件解析
什么是动态组件绑定？简单的说，就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 is属性 在挂载点使用component标签，然后使用v-bind:is="组件名"，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可。 -- 组件在 vm.currentView 变化时改变 --> </component>
一起学习Vue.js 3高级编程UI组件库实战
出自https://risingstars.js.org/2023/zh#section-all 2024年3月，shadcn UI项目的star数增长至50k，截至目前已达到75k，非常接近Ant Design https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/why-shadcn-ui-is-so-popular-in-2023-0f95e66f3ddc 根据官方说明，这款产品被定义为「组件合集」，而非传统的「组件库」。 全局样式的把握：不能只看一个组件的变化，还需要考虑全局UI样式的影响。 定制组件：Shadcn UI组件不如Ant Design组件的功能丰富，无法达到“开箱即用”的程度。 如果你在工作中使用 Ant Design 或Element Plus 组件库时，需要修改某个组件的功能或是变更组件的交互方式，基本上是难以实现的。
Vue 3 组件基础
组件基础 实验介绍 为什么需要组件？组件是为了方面复用而产生的。 基本实例 比如我们想开发一个可以点击加一的计算按钮，而且这个按钮是到处可以使用的，所以我们需要将他封装成一个组件的方式，这样就可以在各个地方引入，在 src/main.js 写下如下代码： import 为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中： 在 src/main.js，我们再来定义一个全局组件： import { createApp } from 'vue/dist/vue.esm-bundler.js' import App from '. methods: { changeSize() { this.titleFontSize++; }, }, }; </script> 我们还是在 src/main.js
Vue.js 组件设计详解
在现代Web开发中，组件化设计已经成为构建可维护和可扩展应用程序的关键策略之一。而 Vue.js 作为一个流行的前端框架，以其简单易用、灵活和高效的特点，成为开发者的首选之一。 一、Vue 组件基础 1.1 组件的创建 在 Vue.js 中，组件是一个具有独立功能的可复用代码块。 /event-bus.js'; export default { methods: { postMessage() { EventBus. $emit('office-event', '会议将在下午3点举行'); } } }; </script> <! /event-bus.js'; export default { data() { return { message: '' }; }, created() {
