Vue — 封装js插件成vue组件

>[success] # 组件篇章 ~~~ 1.整个vue 项目是利用组件拼接而成，因此对组件封装规划和思路是章节探讨 的内容 ~~~ >[danger] ##### 封装目录格式 ~~~ 1.组件集成在，components文件目录下，每个组件最好以文件的形式进行封 装，并且配置响应的出口 │ ├── 'components' // 存放组件文件夹 │ │ └── 'count-to' // 一个存放count-to组件文件夹 │ │ └── 'count-to.vue' // 组件具体内容编写位置 │ │ └── 'index.js' // 组件的入口 ~~~ >[info] ## 将js 插件countup 进行封装 ~~~ 1.封装一个组件，首先根据文档，对所需要的参数值进行规划，在父组件调 用子组件的时候可以留出对应的参数配置 2.这个案例使用的是1系列的countup.js ，列出一下一系列使用参数： 2.1 创建一个countup对象var count= new CountUp("eleID", 开始值, 结束值); 2.2.具体参数整理： target = html元素的id，input，svg text元素，或者计数发生时先前选择的元素/输入的var startVal = 你要开始的值 endVal = 你想要达到的价值 decimals = （可选）数字中的小数位数，默认为0 duration = （可选）持续时间（以秒为单位），默认为2 options = （可选，请参阅demo）格式化/easing选项对象 2.3.options配置对象的具体参数在基础篇有讲解 2.4.start() 方法是启动countup插件的方法 ~~~ >[danger] ##### 基础篇，在文件目录count-to.vue 中代码如下 ~~~ 1.根据文档我们可以分析在做封装时候要做的如下几点 1.1 需要创建countup对象 1.2.创建对象的时候需要绑定dom 的id 1.3.需要将js 插件要使用的参数暴露出来 2.解决上面对应的三件事 2.1.需要创建countup对象的前提是创建了dom元素，因此根据vue声明周 期dom被渲染挂载的周期在mounted周期，但为了确保。我会在 、 mounted周期中加入$nextTick-- 它是用来获取更新后的dom 2.2.id是唯一的，如何保证我们创建的组件id的唯一，vue在每个组件都有 一个'this._uid'唯一值 2.3.配置参数由于是需要在父传子，父传子的接受方式是'props因此需要 定义好 3.下面案例中，props最好配置好对应的类型，如果必填配置好必填项， 配置好默认值 4.分析生成不同的id可以利用'this._uid'，因此可以在计算属性中进行监听， 而不是配置到data中 5.可以增加一个定时器，配置一个'delay' 属性来控制组件运行启动时间 ~~~ ~~~ ~~~ >[danger] ##### 在对应组件文件夹的index.js入口文件写法案例 ~~~ import CountTo from './count-to.vue' export default CountTo ~~~ >[danger] ##### 在创建的名叫count-to.vue 视图组件文件使用组件 ~~~ ~~~