vue 导入js中的两种方法(示例详解)

 更新时间:2023年07月12日 08:17:58   作者:tenc1239  
这篇文章主要介绍了vue 导入js中的方法,本文通过两种方法结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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中的方法的文章就介绍到这了,更多相关vue 导入js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue2.0使用过程常见的一些问题总结学习

    Vue2.0使用过程常见的一些问题总结学习

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。
    2017-04-04
  • Vue中nextTick的原理分析

    Vue中nextTick的原理分析

    本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能
    2025-02-02
  • 手写Vue内置组件component的实现示例

    手写Vue内置组件component的实现示例

    本文主要介绍了手写Vue内置组件component的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 深入理解Vuex 模块化(module)

    深入理解Vuex 模块化(module)

    本篇文章主要介绍了Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    本文主要介绍了electron打包vue项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue router 路由跳转方法讲解

    vue router 路由跳转方法讲解

    这篇文章主要介绍了vue router 路由跳转方法概述,使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • vue 使用Jade模板写html,stylus写css的方法

    vue 使用Jade模板写html,stylus写css的方法

    这篇文章主要介绍了vue 使用Jade模板写html,stylus写css的方法,文中还给大家提到了使用jade注意事项,需要的朋友可以参考下
    2018-02-02
  • Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    文章介绍了使用Vue2封装的Echarts图表组件,简化了图表的生成和渲染过程,提供了多种图表类型和交互功能,提高了开发效率,帮助开发者专注于业务逻辑的开发
    2025-02-02
  • 在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解

    在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解

    在一次项目脚手架升级的过程中,将之前基于 webpack 搭建的项目移植到 Vite 构建,这篇文章主要介绍了在 Vite项目中,使用插件 @rollup/plugin-inject 注入全局 jQuery,需要的朋友可以参考下
    2022-12-12
  • 代理模式在vue中的使用示例解析

    代理模式在vue中的使用示例解析

    这篇文章主要为大家介绍了代理模式在vue中的使用示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论