Bagaimana untuk memperkenalkan js ke dalam ts dalam vue

Kaedah untuk memperkenalkan JavaScript ke dalam Vue: Perkenalkan skrip luaran: gunakan . Gunakan blok: Untuk coretan yang lebih kecil, kod terus menggunakan . Gunakan webpack: Pasang vue-loader dan webpack-cli, konfigurasikan vue loader dan importnya dalam komponen Vue.

Cara memperkenalkan JavaScript dalam Vue

Terdapat banyak cara untuk memperkenalkan JavaScript dalam Vue, bergantung pada jenis dan lokasi kod JavaScript.

Memperkenalkan skrip luaran

Untuk memperkenalkan skrip JavaScript luaran, anda boleh menggunakan tag <script>: <script> 标签：

<code class="html"><script src="./my-script.js"></script></code>

使用 <script> 块

对于较小的 JavaScript 片段，可以使用 <script> 块：

<code class="html"><script>
// 此处放置你的 JavaScript 代码
</script></code>

使用 webpack

如果你使用 webpack 构建你的 Vue 项目，可以通过以下方式引入 JavaScript：

1. 安装 vue-loader 和 webpack-cli：

<code class="bash">npm install vue-loader webpack-cli --save-dev</code>

2. 在 webpack.config.js 文件中，配置 vue 加载器：

<code class="javascript">// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 添加以下规则来处理 JavaScript 文件
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};</code>

3. 在你的 Vue 组件中，使用 import

   <code class="javascript">// MyComponent.vue
   import myScript from './my-script.js';
   
   export default {
     data() {
       return {
         // 使用引入的 JavaScript 代码
         myScript
       };
     }
   };</code>

Gunakan blok <script>

Untuk coretan JavaScript yang lebih kecil, anda boleh menggunakan blok <script>:

rrreee

• Menggunakan webpack
• Jika anda menggunakan webpack untuk membina projek Vue anda, anda boleh memperkenalkan JavaScript dalam cara berikut:
• Pasang vue-loader dan webpack-cli:

🎜rrreee

🎜dalam webpack.config .js > Dalam fail, konfigurasikan pemuat vue: 🎜🎜rrreee
🎜Dalam komponen Vue anda, gunakan import pernyataan untuk memperkenalkan fail JavaScript: 🎜 🎜rrreee🎜🎜Nota🎜🎜🎜🎜 Pastikan fail JavaScript berada dalam direktori yang sama dengan komponen Vue. 🎜🎜Sebelum menggunakan kod JavaScript yang diimport, sila pastikan ia telah dimuatkan dengan betul. 🎜🎜Jika anda menghadapi sebarang masalah, sila semak konsol untuk mesej ralat. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan js ke dalam ts dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!