vueでjsファイルを参照する方法を詳しく解説

php中世界最好的语言
リリース: 2018-05-28 15:48:45
オリジナル
6007 人が閲覧しました

今回はvueでjsファイルを引用する方法について詳しく説明します。vueでjsファイルを引用する際の注意点は何ですか?実際の事例を見てみましょう。

1. vue-cli webpack は jquery をグローバルに導入します

(1) 最初の npm install jquery --save (--save は、モジュールをプロジェクト ディレクトリにインストールし、パッケージの依存関係ノードに書き込むことを意味します)ファイルの依存関係を入力します。)

(2)

  var webpack = require("webpack")
ログイン後にコピー
を追加します(3)

module.exportsの最後に

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
 jQuery: "jquery",
 $: "jquery"
 })
]
ログイン後にコピー
を追加します (4) main.jsに導入すればOKです(テストはスキップしても大丈夫です)このステップ)

import $ from 'jquery'
ログイン後にコピー
(5) その後、npm run dev はページ内で $ を直接使用できます

2. 外部 js を参照する vue コンポーネントのメソッド

プロジェクトの構造は次のとおりです:

コンテンツコンポーネントコード:

<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>
ログイン後にコピー
test.jsコード:

function myfun() {
console.log('Success')
}
export { //很关键
 myfun
}
ログイン後にコピー
はes6構文を使用します。

3. 単一の vue ページは内部 js メソッドを参照します

(1) 最初の npm install jquery --save (--save は、モジュールをプロジェクト ディレクトリにインストールし、依存関係ノードに書き込むことを意味します)パッケージファイルの依存関係をインポートします)

(2) 参照する必要があるvueページに$をインポートして使用します

console.log($を変更すると、この図に黄色の警告が表示されます) ) これに:

export default{
  mounted: function(){
    console.log($)
  }
}
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

webpack+react開発環境の構築方法

Node.jsバッファの使用方法の詳細な説明

以上がvueでjsファイルを参照する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!