vue で一般的に使用されるいくつかの組み込み命令について話しましょう

<p>Vue は、DOM を操作したりデータをレンダリングしたりするための多くの組み込み命令を提供する人気のある JavaScript フレームワークです。

<p>Vue の組み込みディレクティブについては、以下で説明します。

v-bind

<p>v-bind ディレクティブは、DOM 要素の属性値をバインドするために使用されます。 Vue インスタンス上のデータに。このディレクティブは、class、style、src、href、title などの DOM 要素のさまざまな属性とともに使用できます。

<p>たとえば、次のコードは、v-bind を使用してニュース リストのクラス スタイルをバインドする方法を示しています。

<template>
  <div :class="{ &#39;news-active&#39;: isActive }">
    <ul>
      <li v-for="item in news">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>この例では、<div :class=" { 'news-active': isActive }">v-bind ディレクティブを使用して、動的クラス スタイルをバインドします。 isActive ステータスが変更されると、class="news-active" が更新されるか、クラスが削除されます。

v-if / v-else

<p> v-if および v-else ディレクティブは、レンダリングで条件ステートメントを使用するために使用されます。

<p>たとえば、次のコードは、isEnabled の値に基づいてテキストを表示するかどうかを決定します。

<template>
  <div>
    <p v-if="isEnabled">这段文本会在isEnabled为真时渲染</p>
    <p v-else>这段文本会在isEnabled为假时渲染</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEnabled: true
    }
  }
}
</script>

<p>When isEnabled is true の場合、1 つの <p> 要素が表示されます。ただし、isEnabled が false の場合、2 番目の <p> 要素が表示されます。これは非常に強力な条件文を形成します。

v-show

<p> v-show コマンドは、v-if コマンドとよく似ています。これらはすべて、DOM 要素を表示または非表示にするために使用されます。

<p>ただし、v-show は、表示する必要のない DOM 要素を破棄しないという点で v-if とは異なります。逆に、v-show は、display:none を通じて、隠す必要がある DOM 要素を非表示にするだけです。

<p>たとえば、次のコードは v-show ディレクティブの使用例を示しています。

<template>
  <div>
    <p v-show="isVisible">这段文本会根据isVisible的值显示或者隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

<p>この例では、isVisible が true の場合、< p&gt ; 要素が表示されます。 isVisible が false の場合、<p> 要素は DOM 内にまだ存在しますが、表示されません。

v-for

<p> v-for ディレクティブは、リスト データをレンダリングするために使用されます。データ ソースの各項目を走査し、対応する DOM 要素を生成します。

<p>たとえば、次のコードはニュース リストを生成し、news 配列内の各項目を DOM 要素にマップします。

<template>
  <ul>
    <li v-for="item in news">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>この例では、各 <li> 要素は、v-for 命令を通じてニュース タイトルを取得します。

v-model

<p>v-model ディレクティブは、Vue インスタンス データをフォーム入力、チェック ボックス、ラジオ ボタンなどの入力コンポーネントにバインドします。

<p>たとえば、次のコードは、v-model が入力ボックスの内容を Vue インスタンスの message プロパティにバインドする方法を示しています。

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

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

<p> この例では、 message 属性の初期値は、<p> 要素にレンダリングされます。ただし、入力ボックスに何かを入力すると、message プロパティも更新されます。

v-on

<p>v-on ディレクティブは、DOM イベントを Vue インスタンスのメソッドにバインドするために使用され、イベントの発生時にこれらのメソッドが実行できるようにします。

<p>たとえば、次のコードは、v-on ディレクティブが click イベントをボタンにバインドする方法を示しています。

<template>
  <div>
    <button v-on:click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

<p>この例では、onClick ボタンをクリックするとメソッドが実行されます。

<p>click イベントに加えて、keydown、submit、mousemove などの他の一般的な DOM イベント. v -バインディングで使用できます。

v-bind:key

<p> v-bind:key ディレクティブは、Vue がリスト データのレンダリング順序と要素の更新を識別できるようにするために使用され、それによってレンダリングのパフォーマンスが向上します。

<p>たとえば、次のコードは v-for ディレクティブを使用してニュース リストを表示し、v-bind:key ディレクティブを使用してリスト項目の ID を動的にバインドします。 #この例では、リスト項目の

id<p> 属性が v-bind:key ディレクティブにバインドされ、各リスト項目が一意の識別子を持つようにします。 概要:

<p>Vue の組み込み命令は、開発者に一連の便利な DOM 操作とデータレンダリング操作を提供します。これらの手順に習熟すると、開発者は高品質の Vue アプリケーションを開発しやすくなります。

以上がvue で一般的に使用されるいくつかの組み込み命令について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。