JavaScript を Vue に導入する方法: 外部スクリプトを導入します: を使用します。 <script> ブロックを使用する: 小さいスニペットの場合は、<script> を使用して直接コードを記述します。 webpack を使用する: vue-loader と webpack-cli をインストールし、vue ローダーを設定し、import を使用して Vue コンポーネントに導入します。 </p></blockquote> <p><img src="https://img.php.cn/upload/article/202404/30/2024043006003042044.jpg" alt="VueのTSにJSを導入する方法" ></p> <p><strong>Vue に JavaScript を導入する方法</strong></p> <p>Vue に JavaScript を導入するには、タイプと種類に応じてさまざまな方法があります。 JavaScript コードの場所。 </p> <p><strong>外部スクリプトの導入</strong></p> <p>外部 JavaScript スクリプトを導入するには、<code><script></code> タグを使用できます: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script src="./my-script.js">ログイン後にコピー </code> ブロックを使用します</strong></p> <p>小さな JavaScript スニペットの場合は、<code><script></code> ブロックを使用できます: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script> // 此处放置你的 JavaScript 代码 ログイン後にコピー webpack を使用する webpack を使用して Vue プロジェクトを構築する場合、次の方法で JavaScript を導入できます: インストールvue-loader および webpack-cli: npm install vue-loader webpack-cli --save-devログイン後にコピー webpack.config.js ファイルで、vue## を構成します# ローダー: // webpack.config.js module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, // 添加以下规则来处理 JavaScript 文件 { test: /\.js$/, loader: 'babel-loader' } ] } };ログイン後にコピー Vue コンポーネントで、import ステートメントを使用して JavaScript ファイルを導入します: // MyComponent.vue import myScript from './my-script.js'; export default { data() { return { // 使用引入的 JavaScript 代码 myScript }; } };ログイン後にコピー Notes JavaScript ファイルが Vue コンポーネントと同じディレクトリにあることを確認してください。 インポートされた JavaScript コードを使用する前に、それが正しくロードされていることを確認してください。 問題が発生した場合は、コンソールでエラー メッセージを確認してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
