网站上面关于我们要怎么填写,淮北手机网站建设公司,如何免费制作一个自己的网站,织梦cms网站分页打不开写在前面 Vue.js#xff0c;无疑是当下最火热的前端框架 Almost#xff0c;而 Vue.js 最精髓的#xff0c;正是它的组件与组件化。写一个 Vue 工程#xff0c;也就是在写一个个的组件。 业务场景是千变万化的#xff0c;而不变的是 Vue.js 组件开发的核心思想和使用技巧…写在前面 Vue.js无疑是当下最火热的前端框架 Almost而 Vue.js 最精髓的正是它的组件与组件化。写一个 Vue 工程也就是在写一个个的组件。 业务场景是千变万化的而不变的是 Vue.js 组件开发的核心思想和使用技巧掌握了 Vue.js 组件的各种开发模式再复杂的业务场景也可以轻松化解。本小册则着重介绍笔者在 3 年的 Vue.js 开发及两年的 iView 开源中积累和沉淀的对 Vue.js 组件的见解和经验。 本小册不会介绍 Vue.js 的基础用法因为市面上已经沉淀了大量的相关技术资料而且 Vue.js 的文档已经足够详细。如果您尚未接触 Vue.js 或正打算开始了解推荐您先阅读笔者出版的《Vue.js 实战》清华大学出版社一书它适合刚接触 Vue.js 的开发者。因此本小册适合已经了解或使用过 Vue.js 的开发者。 这一节我们先笼统地聊聊 Vue.js 组件和组件化以及本小册各章节的梳理。 组件的分类 一般来说Vue.js 组件主要分成三类 1.由 vue-router 产生的每个页面它本质上也是一个组件.vue主要承载当前页面的 HTML 结构会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大但一般不会有 props 选项和 自定义事件因为它作为路由的渲染不会被复用因此也不会对外提供接口。 在项目开发中我们写的大部分代码都是这类的组件页面协同开发时每人维护自己的页面很少有交集。这类组件相对是最好写的因为主要是还原设计稿完成需求不需要太多模块和架构设计上的考虑。 2.不包含业务独立、具体功能的基础组件比如日期选择器、模态框等。这类组件作为项目的基础控件会被大量使用因此组件的 API 进行过高强度的抽象可以通过不同配置实现不同的功能。比如笔者开源的 iView就是包含了 50 多个这样基础组件的 UI 组件库。 每个公司都有自己的组件使用规范或组件库但要开发和维护一套像 iView 这样的组件库投入的人力和精力还是很重的所以出于成本考虑很多项目都会使用已有的开源组件库。 独立组件的开发难度要高于第一类组件因为它的侧重点是 API 的设计、兼容性、性能、以及复杂的功能。这类组件对 JavaScript 的编程能力有一定要求也会包含非常多的技巧比如在不依赖 Vuex 和 Bus因为独立组件无法依赖其它库的情况下各组件间的通信还会涉及很多脑壳疼的逻辑比如日期选择器要考虑不同时区、国家的日历习惯支持多种日期格式。 本小册也会重点介绍此类组件的各种开发模式和技巧对应不同的模式会带有具体的组件实战。 4.业务组件。它不像第二类独立组件只包含某个功能而是在业务中被多个页面复用的它与独立组件的区别是业务组件只在当前项目中会用到不具有通用性而且会包含一些业务比如数据请求而独立组件不含业务在任何项目中都可以使用功能单一比如一个具有数据校验功能的输入框。 业务组件更像是介于第一类和第二类之间在开发上也与独立组件类似但寄托于项目你可以使用项目中的技术栈比如 Vuex、axios、echarts 等所以它的开发难度相对独立组件要容易点但也有必要考虑组件的可维护性和复用性。 小册的内容 因为本小册是围绕 Vue.js 组件展开的所以第二节会讲解 Vue.js 组件的三个 APIprop、event、slot当然如果你已经开发过一些独立组件完全可以跳过这节内容。 3 - 7 小节会介绍组件间通信的一些方法和黑科技一部分是 Vue.js 内置的一部分是自行实现的在实际开发中会非常实用。同时也利用这些方法完成了两个具体的实战案例 1.具有数据校验功能的表单组件 —— Form 2.组合多选框组件 —— CheckboxGroup Checkbox。 本小册都会以这种核心科技 对应实战的形式展开。 8 - 10 小节介绍 Vue 的构造器 extend 和手动挂载组件 $mount 的用法及案例。Vue.js 除了我们正常 new Vue() 外还可以手动挂载的这 3 节将介绍手动挂载一个 Vue 组件的使用场景。其中涉及到两个案例 1.动态渲染 .vue 文件的组件 —— Display 2.全局通知组件 —— $Alert。 Display 组件用于将 .vue 文件渲染出来线上的案例是 iView Run它不需要你重新编译项目就可以渲染一个标准的 Vue.js 组件。 $Alert 是全局的通知组件它的调用方法不同于常规组件。常规组件使用方法形如 templateAlert content通知内容 :duration3/Alert /template scriptimport Alert from ../components/alert.vue;export default {components: { Alert }} /script而 $Alert 的调用更接近 JS 语法 export default {methods: {showMessage () {this.$Alert({content: 通知内容,duration: 3});}} }虽然与常规 Vue 组件调用方式不同但底层仍然由 Vue 组件构成和维护。 11 - 12 小节介绍 Render 函数与 Functional Render并完成一个能够渲染自定义列的 Table 组件。Render 函数也是 Vue.js 组件重要的一部分只不过在大多数业务中不常使用。本小节会介绍它的使用场景。 13 小节介绍作用域 slotslot-scope并基于这种方法同样实现 Table 组件。slot 用的很多但 slot-scope 在业务中并不常用但在一些特定场景下比如组件内部有循环体时会非常实用。 14 - 15 小节介绍递归组件并完成树形控件 —— Tree。 16 - 19 小节是综合拓展会着重讲解 Vue.js 容易忽略却很重要的 API以及对 Vue.js 面试题的详细分析。除此之外还会总结笔者在两年的 iView 开源经历中的经验除了技术细节外还包括开源项目的持续性发展、推广等。 结语 三年前我开始接触 Vue.js 框架当时就被它的轻量、组件化和友好的 API 所吸引。与此同时我也开源了 iView 项目。三年的磨(cǎi )砺(kēng)沉淀了不少关于 Vue.js 组件的经验。 本小册的内容也许不会让你的技术一夜间突飞猛进但绝对使你醍醐灌顶。 那么请准备好一台电脑和一杯咖啡一起来探索 Vue.js 的精髓吧。