欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue如何基于es6導(dǎo)入外部js文件

 更新時間:2020年05月15日 10:51:42   作者:程序猿的日常1  
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

也許大家都是使用習慣了es5的寫法喜歡直接用《Script》標簽倒入js文件,但是很是可惜,這寫法。在es6,或則說vue環(huán)境下不支持

真的寫法是怎樣?

首先。我們要改造我們要映入的外部js文件,改成下面這個格式。主要是紅色方塊內(nèi)部代碼,我們需要將我們的模塊“拋出”,讓人能獲取到

代碼:

function realconsole(){
alert("hello.thanks use me");
}
export {
realconsole
}

其次,到我們的寄主那里,我們需要導(dǎo)入,仿造其他的文件,寫法是這樣的:

代碼:

<template>
<div class="teslist">
<button @click="methods1">顯示console</button>
</div>
</template>
<script src="../../lib/myconsole.js"></script>
<script>
import { realconsole } from '../../lib/myconsole.js'
export default {
methods:{methods1:function(){
realconsole();
}
}}
</script>
<style>
.teslist {
}
</style>

注意紅色叉的部分,那是我們es5的寫法,綠色才是正確的

接著是效果圖

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)的操作方法

    vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)的操作方法

    這篇文章主要介紹了vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • vue和webpack項目構(gòu)建過程常用的npm命令詳解

    vue和webpack項目構(gòu)建過程常用的npm命令詳解

    本文通過實例代碼給大家介紹了vue和webpack項目構(gòu)建過程常用的npm命令,需要的朋友可以參考下
    2018-06-06
  • Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹

    Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹

    這篇文章主要介紹了Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例

    vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例

    vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù),所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進行簡化
    2021-10-10
  • electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總

    electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總

    這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • vue使用websocket及封裝過程

    vue使用websocket及封裝過程

    這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 使用Element的InfiniteScroll 無限滾動組件報錯的解決

    使用Element的InfiniteScroll 無限滾動組件報錯的解決

    這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • Vue3計算屬性是如何實現(xiàn)的

    Vue3計算屬性是如何實現(xiàn)的

    這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的,對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯,我們都應(yīng)該使用計算屬性,更多相關(guān)內(nèi)容需要的小伙伴可以參考一下
    2022-08-08
  • 詳解Vue-router嵌套路由

    詳解Vue-router嵌套路由

    這篇文章主要為大家介紹了Vue-router的嵌套路由,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue路由守衛(wèi)詳解

    Vue路由守衛(wèi)詳解

    路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過程中進行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧
    2023-10-10

最新評論