vueで書いたjsコードをどこに置くか

JavaScript コードは通常、Vue.js の <script> タグ内に配置されますが、外部の JavaScript ファイルまたは .vue ファイルに配置することもできます。 Vue 3 以降では、setup() 関数への JavaScript ロジックの配置がサポートされています。他の配置場所には、ミックスイン、プラグイン、グローバル インストールなどがあります。

Vue.js の JavaScript コードの場所

Vue.js では、通常、JavaScript コードは Location の下に配置されます。 :

1. <script> タグ

これは、コンポーネントに JavaScript コードを配置する最も一般的な方法です。以下に示すように、<script> タグは <template> タグの後に配置する必要があります:

<code class="html"><template>
  <!-- HTML 模板 -->
</template>

<script>
  export default {
    // 组件选项
    data() {
      return {
        // 数据
      }
    },
    methods: {
      // 方法
    }
  }
</script></code>

2. 外部 JavaScript ファイル

コンポーネントが大規模または複雑な場合は、JavaScript コードを別の外部ファイルに配置した方が便利な場合があります。以下に示すように、外部ファイルは src 属性を使用して <script> タグにインポートできます:

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

3。 ファイル

Vue.js の単一ファイル コンポーネント (.vue ファイル) は、HTML、CSS、JavaScript コードを 1 つのファイルに結合します。 JavaScript コードセクションは、

<script> タグのように記述できます。

4. setup() 関数

Vue 3 以降では、コンポーネントの JavaScript ロジックを配置できます

setup( ）＃＃＃ 関数。 setup() この関数は、コンポーネント オプションを含むリアクティブ オブジェクトを返します。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;javascript&quot;&gt;const MyComponent = { setup() { const count = ref(0) const increment = () =&gt; count.value++ return { count, increment } } }&lt;/code&gt;</pre>

5. 他の場所

場合によっては、次のような他の場所に JavaScript コードを配置する必要があります。

#mixins

: 複数のコンポーネント間でコードを共有するために使用されます。

• plugins: Vue インスタンスにカスタム機能を追加するために使用されます。
• グローバル インストール: すべてのコンポーネントでコードを使用するために使用されます。

以上がvueで書いたjsコードをどこに置くかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。