VUE3 クイック スタート: テンプレートの使用方法

フロントエンド テクノロジーが継続的に更新されているため、フロントエンド フレームワークはますます増えています。 Vue.js は、よく知られた JavaScript フレームワークの 1 つとして、読みやすさ、保守性、開発効率の点で広く注目され、支持されています。 Vue3 は Vue.js の最新バージョンです。この記事では、Vue3 テンプレートを使用してすぐに始める方法を紹介します。

1. Vue3 の基本概念

Vue3 を使用する前に、まず関連するいくつかの基本概念を理解する必要があります。 Vue3 は主に次の部分で構成されています:

1. コア ライブラリ (コア): Vue のインスタンス化や応答データなどのコア機能を提供します。

2. コンポーネント ライブラリ (コンポジション): コンポーネント ロジックのカプセル化をより便利にするための組み合わせ API を提供します。

3. ルーティング ライブラリ (ルーター): ルーティング ソリューションを提供します。

4. 状態管理ライブラリ (ストア): グローバルな状態管理を提供します。

2. Vue3 テンプレートの構文

Vue3 を使用して開発する場合、通常、ビューを記述するテンプレートを作成する必要があります。テンプレート構文は V​​ue3 の非常に重要な部分であり、UI コンポーネントを簡単に記述でき、データ バインディング、条件付きレンダリング、リスト レンダリングなどの操作も実行できます。以下は、Vue3 テンプレート構文の一般的な例です。

1. 補間式 (Interpolation)

Vue3 は、{{}} を使用して補間演算を実行します。たとえば、変数メッセージの値を Web ページに表示する必要がありますが、これは次のコードで実現できます:

<template>
    <div>{{ message }}</div>
</template>

<script>
export default {
    data(){
        return {
            message: 'Hello Vue3!'
        }
    }
}
</script>

2. ディレクティブ

ディレクティブはコア部分の 1 つです。 Vue3 テンプレート構文の一部であり、条件付きレンダリング、プロパティ バインディング、イベント バインディング、リスト レンダリングなどのさまざまな機能を実行するために使用できます。たとえば、変数に基づいて要素を表示するかどうかを決定する必要がある場合は、v-if 命令を使用できます。

<template>
    <div v-if="isShow">{{ message }}</div>
    <button @click="toggleShow">Toggle Show</button>
</template>

<script>
export default {
    data(){
        return {
            message: 'Hello Vue3!',
            isShow: true
        }
    },
    methods:{
        toggleShow(){
            this.isShow = !this.isShow;
        }
    }
}
</script>

さらに、Vue3 には、リスト レンダリングを実装するための v-for 命令も用意されています。例:

<template>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item.title }}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return {
            list:[
                { title:'Apple' },
                { title:'Banana' },
                { title:'Cherry' }
            ]
        }
    }
}
</script>

さらに、さまざまなシナリオのニーズを満たすために使用できるコマンド関数が他にも多数あります。

3. Vue3 を使用してコンポーネントを作成する

Vue3 でのコンポーネントの作成は非常に簡単で、テンプレートと JavaScript ファイルを定義するだけです。以下は簡単なコンポーネントの例です:

// MyComponent.vue

<template>
    <div>
        <h1>{{ title }}</h1>
        <button @click="clickHandler()">Click Me</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: 'My Component'
        }
    },
    methods:{
        clickHandler(){
            console.log('Click Me');
        }
    }
}
</script>

上記のコードは、MyComponent という名前のコンポーネントを定義します。テンプレートにはタイトルとボタンが含まれています。ボタンをクリックすると、「Click Me」と表示されます。アプリケーションでこのコンポーネントを使用するのは非常に簡単です。他のコンポーネントにインポートするだけです。

// App.vue

<template>
    <div>
        <my-component></my-component>
    </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components:{
        MyComponent
    }
}
</script>

上記のコードでは、まず MyComponent を App.vue にインポートし、次にコンポーネント オプションで宣言します。テンプレート内の MyComponent コンポーネント。実際の開発では、ビジネス ニーズに応じてさまざまなコンポーネントを作成し、それらを組み合わせて完全なアプリケーションを形成できます。

4. 結論

この記事では、Vue3 の基本的な概念とテンプレート構文、および Vue3 を使用してコンポーネントを作成する方法を紹介します。 。 Vue3 を開発に使用する場合、その内部メカニズムを継続的に理解し、実際のビジネス ニーズに基づいて適切な調整を行う必要があります。

以上がVUE3 クイック スタート: テンプレートの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。