vuejs調(diào)用js文件里面的方法是怎樣的

vuejs調(diào)用js文件里面的方法是怎樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、營(yíng)銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式重慶網(wǎng)站建設(shè)公司、手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為公路鉆孔機(jī)行業(yè)客戶提供了網(wǎng)站改版服務(wù)。

vuejs調(diào)用js文件里面的方法：1、在assets文件下新建一個(gè)js文件；2、通過“export default {...}”在需要使用方法的組件中引用即可。

本文操作環(huán)境：Windows7系統(tǒng)、Vue2.9.6版，DELL G3電腦

vuejs怎么調(diào)用js文件里面的方法？

vue中引用js文件的方法

在vue的很多組件中都會(huì)用到axios來Post數(shù)據(jù)，每個(gè)組件中都寫上一個(gè)post的方法倒是也可以，復(fù)制就行了，但是總感覺有些不方便，那么可以把a(bǔ)xios的post寫到一個(gè)單獨(dú)的js文件中，然后在需要的組件中引用豈不是更好嗎。

1、在assets文件下新建一個(gè)js文件

新建一個(gè)名稱為webpost.js文件

import axios from 'axios'
    //Post方法的封裝
    function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                axios({
                url: url,
                method: 'post',
                data: params,
                headers: {
                    'Content-Type':'application/json'
                }
            })
            .then(res=>{
                resolve(res.data);
            });
        });
    }
    export {
        axiosPost
    }

這個(gè)需要專門引用一下axios，也就是第一行，然后就可以使用了，最后一句很重要，不然你沒法在別的組件中調(diào)用

2、在需要使用此方法的組件中引用

<script>
import {axiosPost} from '../assets/webpost';
export default {
}

注意引用的路徑，import {}中的內(nèi)容就是上面export中的內(nèi)容

使用的時(shí)候連this都不需要了，直接axiosPost就可以了

axiosPost(url,params)
.then(res=>{
if (res===401){
   this.$message.error('哦，對(duì)不起，你所輸入的用戶名或密碼有誤！');
}else{
}

3、js的另一種寫法

下面是重新編輯的部分，這幾天又把a(bǔ)xios部分整理了一下，加上了攔截器，用于向api請(qǐng)求時(shí)帶上token驗(yàn)證，只多了一個(gè)export，可以寫多個(gè)，結(jié)構(gòu)更清晰，更容易理解。

import axios from 'axios'
    //Post方法的封裝
    export function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                //以下部分是攔截器功能
                axios.interceptors.request.use(config=>{
                    const token=localStorage.getItem('token')
                    if(token){
                        config.headers.authorization=token
                    }
                    return config
                },err=>{
                })
                //下面是正常的           
                axios({
                    url: url,
                    method: 'post',
                    data: params,
                    headers: {
                        'Content-Type':'application/json'
                    }
                })
                .then(res=>{
                    resolve(res.data);
                });
            });
    }

關(guān)于vuejs調(diào)用js文件里面的方法是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

標(biāo)題名稱：vuejs調(diào)用js文件里面的方法是怎樣的
鏈接分享：http://bm7419.com/article2/pcesic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、服務(wù)器托管、域名注冊(cè)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)