vue でよく使用される命令の詳細な紹介

Vue は、フロントエンド開発で広く使用されている人気のある JavaScript フレームワークです。ディレクティブは Vue フレームワークの重要な概念であり、DOM 要素を処理する宣言的な方法を提供します。 Vue の命令セットには、一般的に使用される一連の命令が含まれています。以下では、これらの命令について詳しく説明します。

1. 補間命令

補間命令は、Vue の最も基本的な命令です。 Vue インスタンスから DOM 要素にデータを挿入するために使用されます。補間コマンドの形式は「{{}}」で、「{{}}」、「v-text」、「v-html」が使用可能です。

1. "{{}}"
   "{{}}" は Vue の最も基本的な補間命令で、Vue インスタンスから DOM 要素にデータを直接挿入できます。例:

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

Vue インスタンスで、message 属性を「Hello Vue!」に設定すると、上記のコードは「Hello Vue!」を出力します。

2. "v-text"
   "v-text" コマンドには、"{{}}" と同様の機能があります。Vue インスタンスから DOM 要素にデータを挿入することもできます。ただし、「{{}}」とは異なり、「v-text」ディレクティブは、データ バインディングによって引き起こされるブラウザー レンダリングのちらつきの問題を解決できます。例:

<div v-text="message"></div>

Vue インスタンスで、message 属性を「Hello Vue!」に設定すると、上記のコードでも「Hello Vue!」が出力されます。

3. "v-html"
   "v-html" ディレクティブは、Vue インスタンスのデータを HTML コードとして DOM 要素に挿入できます。例:

<div v-html="message"></div>

Vue インスタンスで、message 属性を「Hello Vue!」に設定すると、上記のコードは「Hello Vue!」とテキスト部分を出力します。厚く追加されます。

2. 条件付きレンダリング

条件付きレンダリング命令は、式の値に基づいて DOM 要素内の要素の表示/非表示を切り替えるために使用されます。

1. 「v-if」
   最も一般的に使用される条件付きレンダリング命令は「v-if」です。式の値に基づいて、対応する DOM 要素を表示するかどうかを決定します。例:

<div v-if="isShow">Hello Vue!</div>

Vue インスタンスで、isShow 属性を true に設定すると、上記のコードは「Hello Vue!」を表示し、isShow 属性を false に設定すると、DOM 要素は表示されません。表示されなくなります。

2. "v-else"
   "v-else" ディレクティブは、同じ要素上の "v-if" ディレクティブの後に続く必要があり、"v-if" 式が次の内容である場合に使用されます。 falseの場合に表示されます。例:

<div v-if="isShow">Hello Vue!</div>
Vue is so great!

Vue インスタンスでは、isShow 属性が true の場合、最初の DOM 要素には「Hello Vue!」が表示され、それ以外の場合は 2 番目の DOM 要素に「Vue はとても素晴らしいです !」と表示されます。 」。

3. "v-show"
   "v-show" コマンドは "v-if" コマンドに似ており、要素の表示と非表示を制御することもできます。ただし、「v-if」ディレクティブとは異なり、「v-show」ディレクティブは常に DOM 要素に保持され、要素の「style」属性を設定することによってのみ要素の可視性を制御します。例:

<div v-show="isShow">Hello Vue!</div>

Vue インスタンスでは、isShow 属性が true に設定されている場合、上記の要素が表示され、isShow 属性が false に設定されている場合、要素は非表示になります。

3. ループ レンダリング

ループ レンダリング命令は、配列またはオブジェクト データを DOM 要素にレンダリングするために使用されます。

1. 「v-for」
   最も一般的に使用されるループ描画命令は「v-for」です。配列またはオブジェクトをループして、その中のデータを DOM 要素にレンダリングできます。例:

<ul>
    <li v-for="item in items">{{ item.name }}</li>
</ul>

Vue インスタンスで、items 属性を複数の {name: value} オブジェクトを含む配列に設定すると、上記のコードは複数のリスト項目をレンダリングします。各リスト項目にはテキストが含まれます。 name 属性の。

2. 「v-for」のインデックス
   ループのシーケンス番号を取得する必要がある場合は、「v-for」コマンドの 2 番目のパラメーターを使用できます。例:

<ul>
    <li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>
</ul>

Vue インスタンスでは、上記のコードが 2 つのオブジェクトを含む items 配列に適用されると、2 つのリスト項目がレンダリングされ、各リスト項目には配列内の項目が表示されます。 . 項目のインデックスと名前属性。

4. イベント バインディング

イベント バインディング命令は、DOM 要素にイベント リスナーをバインドし、イベントの発生時に Vue インスタンスのメソッドを呼び出すために使用されます。

1. "v-on"
   最も一般的に使用されるイベント バインディング ディレクティブは "v-on" で、DOM 要素にイベント リスナーをバインドするために使用されます。例:

<button v-on:click="onClick"></button>

Vue インスタンスで、「onClick」という名前のメソッドを定義すると、上記のコードは、ボタンがクリックされたときに「onClick」メソッドが呼び出されることを意味します。

2. 「v-on」の略称
   「v-on」コマンドの「@」記号の略称もあります。例:

<button @click="onClick"></button>

Vue インスタンスで、「onClick」という名前のメソッドを定義すると、上記のコードは、ボタンがクリックされたときに「onClick」メソッドが呼び出されることを意味します。

5. 双方向データ バインディング

バインディング命令は、フォーム要素と Vue インスタンス内のデータを双方向にバインドするために使用されます。

1. 「v-model」
   最も一般的に使用されるバインディング命令は「v-model」です。これは、フォーム要素の値を Vue インスタンス内のデータに双方向にバインドできます。例:

<input v-model="message">

Vue インスタンスでは、上記のコードが「message」という名前のプロパティに適用されると、入力ボックスの値は「message」プロパティの値に双方向にバインドされます。 。

6. 計算されたプロパティ

计算属性用于根据Vue实例中的数据动态生成新的属性，从而方便DOM元素的渲染。

1. "computed"
   最常用的计算属性指令是"computed"，它可以自动追踪所依赖的数据，并在数据变化时更新该属性的值。例如：

Vue.component('my-component', {
    template: '<div>{{ reversedMessage }}</div>',
    data: {
        message: 'Hello Vue!'
    },
    computed: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})

在定义了一个名为"reversedMessage"的计算属性后，Vue会自动追踪message属性的变化，并在message变化时调用计算属性的计算函数，重新生成reversedMessage属性的值。

以上是Vue中常用的指令集的介绍，这些指令可以帮助我们更轻松地处理DOM元素的生成和渲染，提高开发效率。

以上がvue でよく使用される命令の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。