vue 导入js中的方法

这篇具有很好参考价值的文章主要介绍了vue 导入js中的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1 方法一:使用 标签

2 方法二:使用 import 语句

3 举例

3.1 js文件

3.2 vue 导入js文件

4 举例

4.1 js文件

4.2 vue 导入js文件 -->XXX 是一个自定义的变量名

5 修改文件后一定要保存 在运行文章来源地址https://www.toymoban.com/news/detail-661384.html


1 方法一:使用 标签

然后,在组件的方法中,你就可以直接调用 JavaScript 文件中定义的函数了:

export default {
  methods: {
    yourMethod() {
      yourFunction1();
      yourFunction2();
      yourFunction3();
    }
  }
}

2 方法二:使用 import 语句

在 Vue 组件的 JavaScript 文件中,使用 import 语句引入 JavaScript 文件中的函数:

import { yourFunction1, yourFunction2, yourFunction3 } from './your-file.js';

然后,在组件的方法中,你就可以直接调用引入的函数了:

export default {
  methods: {
    yourMethod() {
      yourFunction1();
      yourFunction2();
      yourFunction3();
    }
  }
}

3 举例

3.1 js文件

// functions.js

export function function1() {
  // 函数1的逻辑
}

export function function2() {
  // 函数2的逻辑
}

export function function3() {
  // 函数3的逻辑
}

3.2 vue 导入js文件

// YourComponent.vue

import * as functions from './functions.js';

export default {
  methods: {
    yourMethod() {
      functions.function1();
      functions.function2();
      functions.function3();
    }
  }
}

4 举例

4.1 js文件

// functions.js

function function1() {
  // 函数1的逻辑
}

function function2() {
  // 函数2的逻辑
}

function function3() {
  // 函数3的逻辑
}

export default {
  function1,
  function2,
  function3
}

4.2 vue 导入js文件 -->XXX 是一个自定义的变量名

import XXX from './functions.js';

export default {
  methods: {
    yourMethod() {
      XXX.function1();
      XXX.function2();
      XXX.function3();
    }
  }
}

5 修改文件后一定要保存 在运行

到了这里,关于vue 导入js中的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】在Vue页面中引入其它vue页面 数据传输 相互调用方法等

    1.this.$emit ,子传父 2.this.$children属性 this.$children返回的是数组 例子: 3.通过this.$refs获取组件 4.this.$parent获取父组件数据 this.$parent返回的是对象,this.$children返回的数组 例子: 需求         在 home.vue 中引用 headView.Vue 方案: home.vue 代码: 只需要在home.vue 想要的地方添加 

    2024年02月07日
    浏览(36)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(64)
  • 【零基础学JS - 14 】javaScript中的switch语句

    👨‍💻 作者简介:程序员半夏 , 一名全栈程序员,擅长使用各种编程语言和框架,如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我! 🏆 本文收录于专栏: 零基础学JavaScript,包含Jav

    2024年02月07日
    浏览(38)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(53)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(52)
  • 〖大前端 - 基础入门三大核心之JS篇⑰〗- JavaScript的流程控制语句「while循环语句」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(92)
  • 〖大前端 - 基础入门三大核心之JS篇⑱〗- JavaScript的流程控制语句「break 和 continue语句」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月05日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇⑯〗- JavaScript的流程控制语句「for循环语句及算法题」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(50)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(53)
  • 【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例

    作者:困了电视剧 专栏:《JavaEE初阶》 文章分布:这是一篇关于JavaScript(WebAPI)的文章,在这篇文章中我会简单介绍一些常用的js方法,并给出他们的应用实例,希望对你有所帮助!   目录 什么是WebAPI DOM的基本概念 什么是DOM DOM树 事件初识 基本概念 事件三要素 获取元素

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包