vue 引入外部脚本(将脚本单独放在一个js文件中,避免vue文件臃肿)

本文介绍如何在Vue项目中将大量方法移到独立的JS文件中进行管理,以避免.vue文件过于庞大。通过export导出函数并在需要的地方import导入,实现代码复用和组织,例如将日期转换和大小写转换等通用方法单独处理。
摘要由CSDN通过智能技术生成

.vue文件可以很好的模块化,但是对于从纯js前端转变过来的人可能会有点困难,尤其是习惯了html引入js脚本,在vue文件中,通常将脚本放在method中,但是有的时候如果方法过多,造成vue文件过大不利于管理,尤其是这些方法可能就是纯数据处理,对于组件关系不大,比如日期转换,大小写转换等,可以将其放在一个js文件中,export出去,然后在.vue文件中调用。

demo:

表示基于风速和风向计算其方向和代号值:

/**
 *  
 * 功能:基于站点风的角度值获取方位,如东北、东偏北等
 * 参数:@param {float} degree  站点的角度值
 * @return {String}     
 */
function getWindDirection(degree) {
    var d = "";
    if (11.25 <= parseInt(degree) && parseInt(degree) < 33.75) {
        d = "北偏东";
    } else if (33.75 < parseInt(degree) && parseInt(degree) < 56.25) {
        d = "东北";
    } else if (56.25 < parseInt(degree) && parseInt(degree) < 78.75) {
        d = "东偏北";
    } else if ((78.75 <= parseInt(degree) && parseInt(degree) < 101.25)) {
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值