首頁 > web前端 > js教程 > 主體

vue引用js檔方法詳解

php中世界最好的语言
發布: 2018-05-28 15:48:45
原創
6016 人瀏覽過

這次帶給大家vue引用js檔案方法詳解,vue引用js檔案的注意事項有哪些,下面就是實戰案例,一起來看一下。

1、vue-cli webpack全域引入jquery

(1) 首先npm install jquery --save (--save 的意思是將模組安裝到專案目錄下,並在package檔的dependencies節點寫入相依性。

module

.exports的最後一個加入

  var webpack = require("webpack")
登入後複製

(4) 在main.js 引入就ok了    (測試這一步不用也可以)

(5)然後npm run dev 就可以在頁面中直接用$ 了.

2、vue元件引用外部js的方法

專案結構如圖:

content元件程式碼:

import $ from 'jquery'
登入後複製
test.js程式碼:
<template>
 <p>
   <input ref=&#39;test&#39; id="test">
   <button @click=&#39;diyfun&#39;>Click</button>
 </p>
</template>
<script>
import {myfun} from '../js/test.js' //注意路径
export default {
 data () {
  return {
   testvalue: ''
  }
 },
 methods:{
   diyfun:function(){
     myfun();
   }
 }
}
</script>
登入後複製

用到了es6的語法。

3、單vue頁引用內部js方法

#(1) 首先npm install jquery --save (--save 的意思是將模組安裝到專案目錄下,並在package檔案的dependencies節點寫入相依性。 ##這個圖中有黃色的警告,如果把console.log($)改成這樣:

function myfun() {
console.log('Success')
}
export { //很关键
 myfun
}
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

應該如何建構webpack react開發環境

#Node.js Buffer使用詳解

以上是vue引用js檔方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!