快捷導(dǎo)航

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

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

這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue混淆與還原的實(shí)現(xiàn)
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下
2023-12-12
Vue響應(yīng)式原理深入分析
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue組件教程之Toast(Vue.extend 方式)詳解
這篇文章主要給大家介紹了關(guān)于Vue組件教程之Toast(Vue.extend 方式)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
Vue.js狀態(tài)管理之Pinia與Vuex詳解
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實(shí)Pinia就是Vuex5,只不過為了尊重原作者的貢獻(xiàn)就沿用了名字Pinia,下面這篇文章主要給大家介紹了關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的相關(guān)資料,需要的朋友可以參考下
2023-02-02
解決vue打包c(diǎn)ss文件中背景圖片的路徑問題
今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue實(shí)現(xiàn)div滾輪放大縮小
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)div滾輪放大縮小，拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue3.0透傳屬性和事件的使用方式舉例
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個(gè)組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下
2024-01-01
vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來實(shí)現(xiàn)隔行變色,需要的朋友可以參考下
2018-08-08
vue項(xiàng)目打包之后背景樣式丟失的解決方案
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01