- 综合排序
- 最热优先
- 最新优先
- 来自专栏小鑫同学编程历险记
🧩 Vue 深入组件开发☞#异步组件#
写作背景： 在前端开发中提到按需加载我们通常指的是路由配置的时候通过 webpack 提供的 import 函数来异步加载页面级别的组件，当路由被实际访问的时候才去加载对应组件的资源。 但随着页面组件内部的模块划分增加，要想保持优秀的页面加载效率我们不得不考虑页面组件内部进行按需加载，那么在 Vue 中defineAsyncComponent()方法为我们提供了这样的能力。 API 示例： 实现异步组件加载： import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent( /Foo.vue'), // 加载异步组件时使用的组件 loadingComponent: LoadingComponent, // 展示加载组件前的延迟时间，默认为 200ms delay ，默认值是：Infinity timeout: 3000 }) 按需异步组件实验案例： 演示项目结构 下面是这次实验项目的组件结构，在 App 组件中依次导入 TitleComp、BannerComp
83540编辑于 2022-12-26 - 来自专栏网络收集
vue组件化开发
4、组件化开发 认识组件化 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 image.png Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 任何的应用都会被抽象成一颗组件树。 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。 2.Vue.component()： 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器 3.组件必须挂载在某个Vue实例下，否则它不会生效。
40820编辑于 2022-05-27 - 来自专栏web秀
VUE开发一个组件——Vue 分页组件
前言 分页组件，无非就是上一页，下一页，到具体页面。没有那么复杂。 ? 想要快速开始的，请向下看。 如果想理解源码的，可以直接跳过“快速开始”， 到“源码解读” 快速开始 安装 npm install vue-c-page -S 引入 import CPage from 'vue-h5-page' Vue.use this.pageOption.pageNo = parseInt(pageNo); console.log('当前是第' + pageNo + '页'); // do something } github地址： vue-c-page npm地址： vue-c-page 源码解读 结构部分，判断总页数小于等于6时，把所有页码全部展示，大于6的用更复杂的逻辑。 + i === pageNo }" @click="jumpTo(pageNo - 2 + i)" href="javascript:;">{{ pageNo - 2 + i }}
81710发布于 2019-09-04 - 来自专栏Java 学习
Vue 组件化开发
在前端范畴，我们可以用下面的这张图来简单地理解组件化： 这样看起来，组件化前端开发就像造一辆车，我们将轮子、发动机、悬挂、车身车门等等各部分组装成一辆车，轮子、发动机就是组件，车就是最终产品。 ，具有清晰的页面组织和高可读性的 HTML 结构代码，组件之间的关系一目了然；组件化会强迫开发人员划清各个组件的功能边界，使得开发出的功能更加健壮；所以分而治之才是组件化的意义所在，复用只是它的副作用。 进行开发需要抽取的东西就只有组件和方法了，下面我们就可以将 MyComponent.vue 组件和 Fun.js 引入到页面中。 $emit("myComponent2",1); } }, } </script> ☞ 组件2（MyComponent2.vue） <template> $emit("myComponent1",2); } }, } </script> ☞ 父组件（Test.vue） <template> <div
2.1K30发布于 2020-09-28 - 来自专栏腾讯NEXT学位
VUE组件开发规范
“ Vue组件提供了丰富多样的配置可供开发者使用，不同的配置项书写顺序并不影响实际运行效果，但这缺给后期维护带来了一定的困扰，因此在蓝鲸产品中心我们规范了配置项的书写顺序。 ” 01 书写原则 组件是什么 组件需要依赖什么 组件需要什么数据 组件内部有什么数据 组件在各生命周期做了什么 组件有什么API可调用 02 规范 一 组件是什么 首先应该告诉开发者该组件是什么，因此我们要求将 name写在组件的最前方。 二 组件需要依赖什么 开发维护一个组件时，通常组件内部还依赖了其他的组件，类似js中需要将依赖import写在最上方，因此我们要求components属性紧邻name属性。 ? 三 组件需要什么数据 一个组件作为子组件与父组件通信时，父组件的数据需要通过props属性向下传递，其他诸如directives mixins等依赖依次在后。 ?
1.3K31发布于 2019-09-29 - 来自专栏别先生
Vue组件化开发
1、Vue组件化开发思想。 引述：组件化规范Web Components。 1）、我们希望尽可能多的重用代码。 2）、自定义组件的方式不太容易（html、css、js）。 " type="text/javascript"></script> 21 <script type="text/javascript"> 22 // Vue的组件化开发 26 // }); 27 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 27 // }); 28 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 5）、选中开发者模式。 6）、加载已解压的扩展，选择shells/chrome。 6、Vue组件，组件之间的关系，包含父子关系（祖孙关系）和兄弟关系。组件间数据交互。
3.5K20发布于 2020-04-24 - 来自专栏全栈程序员必看
请简述什么是Vue组件化开发_vue组件化开发
前言 真实项目开发过程中，我们都是使用组件化的去开发vue的项目，但是组件化的思想又是如何来的呢？ 下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发，所以项目中只会有一个index.html文件，而且大多数时候这个html中的内容都是固定死的，之前我们都是把模板代码写在html import Vue from 'vue' const App = { template: `
<h2>{{message}}</h2> <button 对象，然后在父组件中注册，最后在模板中引用该组件，同样我们打包后在页面查看的效果与之前是一样的 演变过程2.0 上面我们发现main.js中写的App这个对象代码太多了，在main.js文件中如果有多个 /vue/App"; 此时我们打包是会报错的，因为我们项目中用到了.vue的组件，所以必须安装vue-loader和vue-template-compiler 安装命令如下： npm install -70510编辑于 2022-09-19来自专栏笔记分享Vue2.组件通信
样式冲突 写在组件中的样式默认会全局生效。容易造成多个组件之间的样式冲突问题。 可以给组件加上scoped属性，让样式只作用于当前组件。 原理： 给当前组件模板的所有元素，加上一个自定义属性data-v-hash值，用以区分不同的组件。 父子通信 父组件通过props将数据传递给子组件 子组件利用$emit通知父组件修改更新 跟Qt的信号槽机制很像。 单向数据流：父组件的prop更新，回单向向下流动，影响子组件。 eventBus事件总线 非父子组件之间，进行简易消息传递。 复杂场景同Vuex。 创建一个都能访问到的事件总线（空Vue实例）： 接收方监听Bus实例事件：.$on() 发送方出发Bus实例事件：.
77710编辑于 2024-01-16来自专栏狮乐园高级 Vue 组件模式 (2)
熟悉 vue 的童鞋可能马上会想到不同的解决方案，比如使用 slot 并配合 v-if，我们这里采用另外一种方法，利用 vue 提供的 provide/inject 属性按照复合组件的思想来实现。 实现 在 vue 中，这里我们会分别实现三个组件，依次为： toggle-button: 代表开关，用来渲染父组件的开关状态 toggle-on: 根据父组件 toggle 的开关状态，渲染当状态为开时的内容 关于为什么这里不直接使用 on 属性来代表开关状态，而使用一个可监听对象，是因为 provide 和 inject 绑定并不是可响应的，同时官方文档也指出，这是刻意而为，所以为了享受到 vue 响应性带来的便利性 成果 通过复合组件的方式，我们将 toggle 组件划分为了三个更小的、职责更加单一的子组件。 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-2 总结 通常情况下，在设计和实现职能分明的组件时，可以使用这种模式，比如 tabs 与 tab
89720发布于 2020-01-21来自专栏CSDN迁移Vue进阶——组件化开发
Vue进阶——组件化开发 一、什么是组件化 二、组件 1. 写法 2. 通信 3. 这样的前端开发方式正是组件化开发，一个页面是一个大的组件树，其下又划分有很多小的组件。这样一来，不仅降低了一次开发的难度，而且避免了重复造轮子，组件可以灵活的嵌入其他的Vue项目中进行使用。 写法 注册组件的步骤 创建组件的构造器：Vue.extend() 注册组件：全局/局部 使用组件：Vue实例范围内 注册组件 全局：可以在多个Vue实例下使用，Vue.conponent
<h2>Vue Component</h2>` }); var vm = new Vue({ el: '#app', components: { vm = new Vue({ el: '#app', // 局部组件 components: { 'cpn2': { template: `Component21.4K20编辑于 2022-10-25来自专栏娜姐聊前端Vue组件开发-高级玩法
在文章《Vue组件开发三板斧：prop、event、slot》中聊了常用的组件开发常用API和一些采坑心得，这里，再说说一些可能不太常用的高级玩法，可参考https://cn.vuejs.org/v2/ 方式二：$mount 还有两种方式可以创建组件： new Vue() Vue.extend() 用new Vue()创建一个 Vue 实例时，都会有一个选项 el，可以用来指定实例的根节点。 ) Vue.extend 是基于 Vue 构造器，创建一个“子类”，它的参数跟 new Vue 的基本一样，但是data写法和组件类似，需要返回一个函数。 官网文档上有个极好的例子：https://cn.vuejs.org/v2/guide/render-function.html Vue.component('my-component', { render 比如，在app.vue中注入根组件。
2.7K30发布于 2020-09-22来自专栏ljwVue.js组件开发
-- 在 HTML 中通过 CDN 引入 --> <script src="https://cdn.jsdelivr.net/npm/<em>vue</em>@<em>2</em>/dist/<em>vue</em>.js"></script> 或者使用 //cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>
{{ message computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } 3.3 组件化开发 组件是 Vue.js 的核心概念，组件可以包含自己的模板、数据和方法。 Vue.use(VueRouter); // 使用 Vue Router 六、Vue 3.x 的变化 Vue 3 带来了很多新的特性和优化： Composition API：允许开发者以函数的形式组织代码
35110编辑于 2025-05-31来自专栏京东技术Vue拖拽组件开发实例
vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子，来分析Vue组件化相关知识。 为什么选择Vue? 加之，Vue本身具有以下主要特性： 使用虚拟DOM； 轻量级框架； 高效的数据绑定； 灵活的组件系统； 完整的开发生态链。 这就是我们为什么选择Vue框架的一些原因。 为什么要封装成一个Vue组件？ 组件内封装的样式<style lang="scss" scoped></style> 开发Vue移动拖拽组件为例 拖拽原理 手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动 若小于某个设定的值，则什么也不做； 然后，在touchmove事件中判断，若 (currTop-initTop)%elHeight>=elHeight/2成立，即当元素拖至另一个元素块等于或超过1/2的位置时 小结 本文从Vue拖拽组件开发为例，剖析Vue组件的结构、开发思路、Vue的数据驱动等，对Vue组件化的原理，进行了更深入的理解。 并将Vue实现拖拽的方案提供给大家学习研究。 P.S.
4.9K130发布于 2018-04-10来自专栏花猪的学习记录Vue学习-组件化开发
前言 本文将介绍Vue的组件化开发。 将一个页面拆分成一个个小的功能块，每个功能块完成自己独立的功能，这样在之后的页面维护和管理就会方便许多。 ---- 组件化开发 基本使用 组件的使用可以分为以下三个步骤： 创建组件构造器（Vue.extend()方法） 注册组件（Vue.component()方法） 使用组件
> //注册全局组件 Vue.component('cpn1',{ template: `<h2>标题一</h2>全局组件 const cpnC1 = Vue.extend ({ //父组件构造器 template: `
<h2>标题一</h2>内容一（父组件 --Vue实例（父组件模板）-->
<h2>我是父组件</h2> {{message}} <!1.7K20编辑于 2022-02-17来自专栏青年码农带你体验Vue2和Vue3开发组件的区别(二)
上一篇已经对Vue2和Vue3的组件开发区别讲了一部分，如需了解请移步： 带你体验Vue2和Vue3开发组件的区别(一)， 主要讲了template、data、methods、Lifecyle Hooks Vue2 export default { // .. Vue2 在Vue2中我们直接用this.$emit触发,，前面是方法名称，后面是参数。 this. Vue2 this代表的是当前组件,所以可以直接获取属性值 <template>
<button @click="clickBtn">点击</button Vue2 如想要了解Vue2 watch的详细信息请： Vue中的computed和watch的区别 <template><input type="text" v-model6601413发布于 2020-12-17来自专栏青年码农带你体验Vue2和Vue3开发组件的区别(一)
现在的vue版本已经可以满足我们大部分开发场景，虽然Vue3正式版发布不久，可能存在某些问题，但是提前学习了解总归是有好处的。可能有些已经开始抓狂了，学不动了。 所以这里我们通过用脚手架创建的项目，对比这两个版本在开发组件上的区别。如果还不会创建Vue3项目，请移步记录使用@vue/cli搭建Vue3项目完整流程。 Vue2 Vue2 template下只能包含一个根节点。 Vue2 Vue2把methods分割到独立的属性区域。 Vue2 Vue2可以直接在组件属性中调用Vue的生命周期的钩子。
2.3K1514发布于 2020-12-17来自专栏半月无霜vue2中的组件
"banmoon2"), new User(3, "banmoon3") ); public static final List<User> userList2 "banmoon2"), new User(3, "banmoon3") ); public static final List<User> userList2 "banmoon2"), new User(3, "banmoon3") ); public static final List<User> userList2 List<R> union(List<T1> list1, List<T2> list2, BiPredicate<T1, T2> predicate, Function<T1, R> function List<R> difference(List<T1> list1, List<T2> list2, BiPredicate<T1, T2> predicate, Function<T1, R> function
1.1K10编辑于 2023-03-03来自专栏JavaEdgeVue开发实战(03)-组件化开发
对组件功能的封装，可以像搭积木一样开发网页。 Vue官方的示例图对组件化开发的形象展示。左边是一个网页，可以按照功能模块抽象成很多组件，这些组件就像积木一样拼接成网页。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aS7Zk8tp-1686298456553)(null)] 1 什么是组件化开发 1.1 浏览器封装好的组件 在页面的源码里写出的 Vue组件化机制很好用，只需在其基础上，掌握和学习组件化在使用上的设计理念，以实现高效的代码复用，开发中把组件分成： 通用型组件 业务型组件 通用型组件就是各大组件库的组件风格，包括按钮、表单、弹窗等通用功能 ) this.todoValue = '' } } }) </script> </body> </html> 效果： 2 应用程序将该项目从列表中删除 handleItemDelete: function (index) { this.list.splice(index2,
63020编辑于 2023-07-09来自专栏各类技术文章~Vue3 组件注册（2）
2. 注册局部组件 开发中，注册全局组件的情况较少，我们更多的是注册局部组件。 所以在开发中我们通常采用局部注册的方式注册组件： 局部注册就是在我们需要使用到的组件中，通过 components 属性选项来进行注册； 比如之前的 App 组件中，我们有 data、computed /template> <template id="component-a"> <h2>ComponentA</h2> </template> <script src=". > </template> <template id="component-a"> <h2>ComponentA</h2> </template> <script src=". 关于<em>组件</em>化的更多内容我们会在脚手架中再讲，因为脚手架中我们会使用一个个独立的文件编写 <em>Vue</em> 相关的代码，那时代码结构会更加清晰。
88030发布于 2021-10-22来自专栏技术银河带你体验Vue2和Vue3开发组件有什么区别
带你体验Vue2和Vue3开发组件有什么区别 我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。 所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这篇文章后，你将会有一个概念Vue2和Vue3开发组件时的区别，并且为Vue3的开发之路做好准备。 Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。 这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。 —this在vue3中与vue2代表着完全不一样的东西。 在 Vue2，this代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。 最后我把完成的 Vue2 和 Vue3 的组件代码发出来给大家： Vue2 <template>
<h2> {{ title }} </1.3K31发布于 2020-10-29腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号