快捷導(dǎo)航

vue?導(dǎo)入js中的兩種方法(示例詳解)

更新時(shí)間：2023年07月12日 08:17:58 作者：tenc1239

這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1 方法一：使用標(biāo)簽

然后，在組件的方法中，你就可以直接調(diào)用 JavaScript 文件中定義的函數(shù)了：
export default {
  methods: {
    yourMethod() {
      yourFunction1();
      yourFunction2();
      yourFunction3();
    }
  }
}

2 方法二：使用 import 語句

在 Vue 組件的 JavaScript 文件中，使用 import 語句引入 JavaScript 文件中的函數(shù)：
import { yourFunction1, yourFunction2, yourFunction3 } from './your-file.js';
然后，在組件的方法中，你就可以直接調(diào)用引入的函數(shù)了：
export default {
  methods: {
    yourMethod() {
      yourFunction1();
      yourFunction2();
      yourFunction3();
    }
  }
}

3 舉例

3.1 js文件

// functions.js
export function function1() {
  // 函數(shù)1的邏輯
}
export function function2() {
  // 函數(shù)2的邏輯
}
export function function3() {
  // 函數(shù)3的邏輯
}

3.2 vue 導(dǎo)入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() {
  // 函數(shù)1的邏輯
}
function function2() {
  // 函數(shù)2的邏輯
}
function function3() {
  // 函數(shù)3的邏輯
}
export default {
  function1,
  function2,
  function3
}

4.2 vue 導(dǎo)入js文件 -->XXX 是一個(gè)自定義的變量名

import XXX from './functions.js';
export default {
  methods: {
    yourMethod() {
      XXX.function1();
      XXX.function2();
      XXX.function3();
    }
  }
}

5 修改文件后一定要保存在運(yùn)行

到此這篇關(guān)于vue 導(dǎo)入js中的方法的文章就介紹到這了,更多相關(guān)vue 導(dǎo)入js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)，詳細(xì)的介紹了使用中會遇到的各種錯(cuò)誤，有興趣的可以了解一下。
2017-04-04
Vue中nextTick的原理分析
本文詳細(xì)介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機(jī)制,通過nextTick可以確保在DOM更新后執(zhí)行回調(diào),nextTick依賴微任務(wù)和宏任務(wù),優(yōu)先使用Promise,降級到MutationObserver/setTimeout,Vue3進(jìn)一步優(yōu)化了nextTick,減少了復(fù)雜度并提升了性能
2025-02-02
手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例
本文主要介紹了手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
深入理解Vuex 模塊化(module)
本篇文章主要介紹了Vuex 模塊化(module)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
electron打包vue項(xiàng)目的方法步驟
本文主要介紹了electron打包vue項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue router 路由跳轉(zhuǎn)方法講解
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見使用的就是Vue配套的Vue Router庫，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下
2022-12-12
vue 使用Jade模板寫html,stylus寫css的方法
這篇文章主要介紹了vue 使用Jade模板寫html，stylus寫css的方法,文中還給大家提到了使用jade注意事項(xiàng)，需要的朋友可以參考下
2018-02-02
Vue2+Echarts封裝組件之專注邏輯,圖表生成自動化方式
文章介紹了使用Vue2封裝的Echarts圖表組件,簡化了圖表的生成和渲染過程,提供了多種圖表類型和交互功能,提高了開發(fā)效率,幫助開發(fā)者專注于業(yè)務(wù)邏輯的開發(fā)
2025-02-02
在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過程詳解
在一次項(xiàng)目腳手架升級的過程中，將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建，這篇文章主要介紹了在?Vite項(xiàng)目中，使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下
2022-12-12
代理模式在vue中的使用示例解析
這篇文章主要為大家介紹了代理模式在vue中的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12