vueで終わるファイルの使い方

フロントエンド テクノロジの開発が進むにつれて、高性能で学びやすく、使いやすい、軽量のフロントエンド プログレッシブ フレームワークとして、Vue.js が今日の最前線の開発者にますます好まれています。 -開発を終了します。 Vue.js では、.vue で終わるファイルは Vue ファイルと呼ばれます。この記事では、Vue ファイルの使用方法に焦点を当てます。

1. Vue ファイルの概要

Vue ファイルは、テンプレート、スクリプト、スタイルの 3 つの部分で構成されるコンポーネントです。このうち、テンプレート部分はコンポーネントの構造とスタイルを定義するために使用されるコンポーネントのテンプレート部分であり、スクリプト部分はコンポーネントの論理部分であり、コンポーネントの動作とメソッドを定義するために使用されます。コンポーネントのスタイルを定義するために使用されます。

2. Vue ファイルの使用方法

1. Vue.js のインストール

まず、npm 経由で Vue.js をインストールする必要があります。次のコマンドを実行します。

npm install vue

2. Vue ファイルの作成

コンポーネントを作成するときは、接尾辞 .vue が付いた新しいファイルを作成し、ファイル内に書き込む必要があります。 Vue ファイルの標準形式に従ってコード。

<template>
  <!-- 组件的html部分 -->
</template>

<script>
  // 组件逻辑部分
  export default{
    // 组件的属性、方法等
  }
</script>

<style scoped>
  /* 组件样式部分 */ 
</style>

3. Vue ファイルの導入

Vue.js では、まず Vue インスタンスを作成し、Vue ファイルを導入してコンポーネントを Vue インスタンスに導入する必要があります。

<template>
  <div>
    <!-- 引入Vue组件 -->
    <my-component />
  </div>
</template>

<script>
  // 引入Vue组件
  import MyComponent from '@/components/MyComponent.vue';

  export default{
    name: 'app',
    components: {
      // 注册组件，与组件名一致
      MyComponent
    }
  }
</script>

4. Vue ファイルのプロパティとメソッドを使用する

コンポーネントで独自のプロパティとメソッドを定義できます。Vue ファイルを導入した後、テンプレートで使用される形式のコンポーネント名。

<template>
  <div>
    <!-- 引入Vue组件 -->
    <my-component :prop1="prop1Data" @event1="handleEvent1"/>
  </div>
</template>

<script>
  // 引入Vue组件
  import MyComponent from '@/components/MyComponent.vue';

  export default{
    name: 'app',
    data(){
      return {
        prop1Data: 'This is prop1 value'
      }
    },
    components: {
      // 注册组件，与组件名一致
      MyComponent
    },
    methods: {
      handleEvent1(){
        // 响应事件执行的方法
      }
    }
  }
</script>

5. Vue ファイルのモジュール形式の導入

Vue.js では、Vue ファイルをモジュール形式で導入できます。 Webpack を例として、webpack.config.js で構成します。

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ]
  }
  // ...
}

Vue ファイルでは、ES6 のエクスポート デフォルト構文を使用してモジュールのエクスポートを完了できます。 Vue ファイルを導入するときは、相対パスまたはエイリアスを使用できます。つまり、「src/」の代わりに「@/」を使用できます。

3. まとめ

以上は Vue ファイルの使い方ですが、開発時に Vue.js を使用する場合、Vue ファイルの開発方法を駆使することで開発効率が向上し、コードをより効率的にし、保守しやすく、読みやすくします。同時に、Vue.js は高性能で学びやすく使いやすい、軽量なフロントエンド プログレッシブ フレームワークであり、その学習と活用はフロントエンド開発者にとって無視できない部分でもあります。

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