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

WBOY

リリース： 2023-06-16 08:17:31

オリジナル

2248 人が閲覧しました

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

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

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

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

<!-- 模板示例 -->
<template>
  <div>
    <h1>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 ディレクティブを使用して条件付きレンダリングを実装できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><template> <div> <div v-if="show">Hello Vue.js 3!</div> <div v-show="!show">Sorry, no message to show.</div> </div> </template> <script> export default { data() { return { show: false, }; }, }; </script></pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードでは、

v-if

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

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

v-for

ディレクティブを使用することです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><template> <div> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }} </li> </ul> </div> </template> <script> export default { data() { return { list: ['item 1', 'item 2', 'item 3'], }; }, }; </script></pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードでは、を使用します。 v-for<p> ディレクティブは、データをページにループ出力します。各ループでは、補間式 <code>{{ item }} を使用して、対応するデータ項目をレンダリングできます。概要