VUE3 基本チュートリアル: Vue.js レスポンシブ フレームワーク テンプレートの使用

Vue.js は、応答性の高いシステムに基づくフロントエンド フレームワークであり、フロントエンド業界で広く普及しています。 Vue.js 3 は Vue.js の最新バージョンで、レンダリング速度の高速化、TypeScript サポートの向上、開発エクスペリエンスの向上など、多くの新機能が追加されています。この記事では、Vue.js 3 の基本チュートリアルの 1 つであるテンプレートに焦点を当てます。

テンプレートとは何ですか?

Vue.js では、テンプレートは HTML コードを記述する方法です。テンプレートを使用してコンポーネントの構造とレイアウトを記述し、Vue.js が提供する命令と式を使用して動作と動作を宣言できます。コンポーネントのデータ処理。 Vue.js のテンプレート構文を使用すると、動的で再利用可能なコンポーネントをより簡単に作成できます。

以下は、hello という名前のコンポーネントを使用する簡単なテンプレートの例です。

<!-- 模板示例 -->
<template>
  <div>
    <h1 id="Hello-name">Hello {{ name }}!</h1>
    <input v-model="name" type="text">
  </div>
</template>

<!-- 定义一个名为 hello 的组件 -->
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      name: 'Vue',
    };
  },
});
</script>

上記のコードでは、hello # という名前のコンポーネントを定義します。 ## コンポーネントを作成し、テンプレートを使用してその構造とレイアウトを定義します。このうち、

タグでは、コンポーネント内のテキストを動的に表示するために使用される Vue.js の補間式 {{ name }} を使用しています。コンポーネント内のデータは、データが変更されたときにそれに応じてテキストが更新されるようにバインドされます。また、テンプレート内の v-model ディレクティブを使用して name データをバインドし、動的な双方向バインディング入力ボックスを実現しました。 テンプレート構文

Vue.js テンプレートには、コンポーネントをより適切に作成するのに役立つ構文が多数あります。一般的に使用されるテンプレート構文の一部を次に示します。

補間式

補間式は、コンポーネント内のデータを指定された場所にレンダリングできます。テンプレートでは、次のように 2 つの中括弧

{{ }} を使用して、バインドする必要があるデータをラップします。

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

上記の例では、

message データは

要素に挿入されます。 message が変更されると、表示領域が自動的に更新されます。 ディレクティブ

Vue.js のディレクティブは、テンプレートに機能を追加するために使用される特別な属性です。このディレクティブは、次のように

v- プレフィックスで始まります。

<input v-model="message">

その中で、

v-model ディレクティブは、データの双方向バインディングを実装するために使用されます。ディレクティブの仕組みは、指定されたデータと要素の属性をバインドして動的な更新効果を実現することです。

計算プロパティ

Vue.js の計算プロパティは、データを動的に計算できるプロパティです。計算プロパティの値は、依存するデータに基づいて動的に計算され、依存するデータが変更された場合にのみ再計算されます。以下は、単純な計算プロパティの定義です。

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js 3!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

この例では、

reversedMessage 計算プロパティの値は、# の場合にのみ、message データに基づいて計算されます。 ##reversedMessage の値は、message が変更された場合にのみ再計算されます。 条件付きレンダリング

条件に基づいて要素またはコンポーネントをレンダリングするかどうかを決定する必要がある場合があります。 Vue.js では、以下に示すように、

v-if

または v-show ディレクティブを使用して条件付きレンダリングを実装できます。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;div v-if=&quot;show&quot;&gt;Hello Vue.js 3!&lt;/div&gt; &lt;div v-show=&quot;!show&quot;&gt;Sorry, no message to show.&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { show: false, }; }, }; &lt;/script&gt;</pre> 上記のコードでは、

v-if

および v-show ディレクティブを使用して、条件に基づいて指定された要素を表示するかどうかを決定します。 ループレンダリング

Vue.jsのループレンダリングとは、指定した範囲をループさせてコンポーネント内のデータを動的に表示できる機能です。 Vue.js は複数のループ レンダリング メソッドをサポートしています。最も一般的なのは、以下に示すように

v-for

ディレクティブを使用することです。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;ul&gt; &lt;li v-for=&quot;(item, index) in list&quot; :key=&quot;index&quot;&gt; {{ item }} &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { list: ['item 1', 'item 2', 'item 3'], }; }, }; &lt;/script&gt;</pre> 上記のコードでは、

を使用します。 v-for

ディレクティブは、データをページにループ出力します。各ループでは、補間式 {{ item }} を使用して、対応するデータ項目をレンダリングできます。 概要

Vue.js テンプレートは、動的で再利用可能なコンポーネントを作成するのに役立つシンプルかつ強力な方法です。テンプレート構文を使用すると、HTML コードをより適切に記述し、データと動作をビューから切り離すことができ、コードの読みやすさと保守性が向上します。 Vue.js 3 では、開発者のニーズをよりよく満たすためにテンプレート構文がさらに改善および最適化されました。

以上がVUE3 基本チュートリアル: Vue.js レスポンシブ フレームワーク テンプレートの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。