第三方JS库地址:https://github.com/inorganik/CountUp.js

使用NPM进行安装:

npm install --save countup

根据官方回答,CountUp.js是一个无依赖,轻量级的Javascript类,可用于快速创建以更有趣的方式显示数值数据的动画。

在代码开始之前,先补充几个Vue.js的基础知识:

1.this._uid的使用:每个组件都有一个唯一的id,可以作为this._uid访问。

具体使用场景:组件是要在多个地方多次使用 ,而一个页面上每一个id值都要互不相同。如果id值固定的话 在多次使用这个组件的时候就会出现多个元素的id都是同一个值。

2.计算属性computed

设计它的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

使用官网的例子通俗易懂:

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

2.1计算属性和方法的区别:

计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值,两者的计算结果完全相同

2.1计算属性和侦听属性(Watch)的区别:

   计算属性更适合于通常的场景,如下代码:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

若改为计算属性则可以缩减代码量:

var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

3.组件的默认值写法。

当组件的属性类型时Object或者Array时,需要使用工厂函数返回'的默认值(注意括号):

props: {
yourProp: {
type: Object,
default: () => ({
param: value,
param2: value,
}),
},
}
props: {
arr: {
type: Array,
default: function () { return [] }
}
}
//ES6写法
props: {
arr: {
type: Array,
default: () => []
}
}

4.在Vue中获取并操作dom:

要在mounted中使用,因为只有在执行mounted的时候,vue已经渲染了dom节点,这个时候是可以获取dom节点的,vue中尽量不去操作dom元素,选用ref操作属性获取。

<button ref="btn">获取ref</button>
this.$refs.btn.style.backgroundColor="#ff0000"

 5.理解Vue中的nextTick

应用场景:需要在视图更新之后,基于新的视图进行操作。

具体可参考:https://segmentfault.com/a/1190000012861862?utm_source=tag-newest

下面回到正题:

代码目录结构:

./src/components/count-to/count-to.less:

  .count-to-number{
color: palevioletred;
}

./src/components/count-to/count-to.vue:

<template>
<div>
<slot name="left"></slot><span ref="number" :class="countClass" :id="eleId"></span><slot name="right"></slot>
</div>
</template>
<script>
import CountUp from 'countup'
export default {
name: 'CountTo',
computed: {
eleId () {
return `count_up_${this._uid}`
},
countClass () {
return [
'count-to-number',
this.className
]
}
},
data () {
return {
counter: {}
}
},
props: {
/**
* @description 起始值
*/
startVal: {
type: Number,
default: 0
},
/**
* @description 最终值
*/
endVal: {
type: Number,
required: true
},
/**
* @description 小数点后保留几位小数
*/
decimals: {
type: Number,
default: 0
},
/**
* @description 动画延迟开始时间
*/
delay: {
type: Number,
default: 0
},
/**
* @description 渐变时长
*/
duration: {
type: Number,
default: 1
},
/**
* @description 是否使用变速效果
*/
useEasing: {
type: Boolean,
default: false
},
/**
* @description 是否使用变速效果
*/
useGrouping: {
type: Boolean,
default: true
},
/**
* @description 分组符号
*/
separator: {
type: String,
default: ','
},
/**
* @description 整数和小数分割符号
*/
decimal: {
type: String,
default: '.'
},
className: {
type: String,
default: ''
}
},
methods: {
getCount () {
return this.$refs.number.innerText
},
emitEndEvent () {
setTimeout(() => {
this.$nextTick(() => {
this.$emit('on-animation-end', Number(this.getCount()))
})
}, this.duration * 1000 + 5)
}
},
watch: {
endVal (newVal, oldVal) {
this.counter.update(newVal)
this.emitEndEvent()
}
},
mounted () {
this.$nextTick(() => {
this.counter = new CountUp(this.eleId, this.startVal, this.endVal, this.decimals, this.duration, {
useEasing: this.useEasing,
useGrouping: this.useGrouping,
separator: this.separator,
decimal: this.decimal
})
setTimeout(() => {
this.counter.start()
this.emitEndEvent()
}, this.delay)
})
}
}
</script>
<style lang="less">
@import './count-to.less';
</style>

./src/components/count-to/index.js:

import CountTo from './count-to.vue'
export default CountTo

./src/router/router.js增加对count-to.vue的路由:

{
path: '/count-to',
name: 'count_to',
component: () => import('@/views/count-to.vue')
}

./src/views/count-to.vue:

<template>
<div>
<count-to ref="countTo" :end-val="endVal" @on-animation-end="handleEnd">
<span slot="left">总金额:</span>
<span slot="right">元</span>
</count-to>
<button @click="getNumber">获取数值</button>
<button @click="up">更新值</button>
</div>
</template>
<script>
import CountTo from "@/components/count-to";
export default {
name: "count_to",
components: {
CountTo
},
data() {
return {
endVal: 100
};
},
methods: {
getNumber() {
this.$refs.countTo.getCount();
},
up() {
this.endVal += Math.random() * 100;
},
handleEnd(endVal) {
console.log("end -> ", endVal);
}
}
};
</script>

运行效果:

在Vue将第三方JS库封装为组件使用的更多相关文章

  1. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  2. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  3. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  4. Vue-admin工作整理(十九):从数字渐变组件谈第三方JS库Count-to的使用

    1.组件封装基础 npm install countup@latest 2.组件中使用id值 3.组件中获得dom 如何封装一个组件,在组件中用到需要传入HTML元素ID值的JS库时如何处理,如何获取 ...

  5. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue框架引入JS库的正确姿势

    参考自:https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL ...

  7. Vue 中如何引入第三方 JS 库

    一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import ...

  8. vue 中引入第三方js库

    以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...

  9. Vue 用第三方的库去实现动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows CreateEvent,SetEvent,WaitForSingleObject的用法

    http://blog.pfan.cn/embed/19089.html WaitForSingleObject的用法 DWORD WaitForSingleObject(   HANDLE hHan ...

  2. OpenGL学习笔记——求值器和NURBS

    http://codercdy.com/openglxue-xi-bi-ji-qiu-zhi-qi-he-nurbs/ 在最底层,图形硬件所绘制的是点.直线和多边形(通常是三角形和四边形).平滑的曲线 ...

  3. 关于unity中BindChannels的理解

    http://blog.csdn.net/wpapa/article/details/51794277 官方文档:http://docs.unity3d.com/Manual/SL-BindChann ...

  4. 51nod1255(栈)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1255 题意:中文题诶- 思路:对于当前字符 s[i],若其不在 ...

  5. Whatweb网站指纹信息收集工具

    常规扫描:whatweb www.baidu.com 批量扫描: whatweb -i /root/12.txt 详细回显扫描:whatweb -v www.baidu.com 加强扫描强度:what ...

  6. jsp学习与提高(三)——JSP Cookie 处理

    1.cookie是什么 Cookie是存储在客户机的文本文件,它们保存了大量轨迹信息.在servlet技术基础上,JSP显然能够提供对HTTP cookie的支持. 通常有三个步骤来识别回头客: 服务 ...

  7. glassfish cluster 搭建

    http://blog.csdn.net/wych1981/article/details/8815150

  8. 教你如何在 IDEA 远程 Debug ElasticSearch

    前提 之前在源码阅读环境搭建文章中写过我遇到的一个问题迟迟没有解决,也一直困扰着我.问题如下,在启动的时候解决掉其他异常和报错后,最后剩下这个错误一直解决不了: [2018-08-01T09:44:2 ...

  9. 渣渣菜鸡的 ElasticSearch 源码解析 —— 启动流程(上)

    关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/11/es-code02/ 前提 上篇文章写了 ElasticSearch 源码解析 -- ...

  10. nodejs 实践:express 最佳实践(三) express 解析

    nodejs 实践:express 最佳实践(三) express 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固, ...