Vue フロントエンドは追加、削除、変更、クエリを実装します

Vue.js は、高性能のシングルページ アプリケーションを構築するための人気のあるフロントエンド フレームワークです。この記事では、Vue.jsを使って追加・削除・変更・確認機能を実装する方法を紹介します。

1. Vue.js で基本フレームワークを作成する

まず、Vue.js をインストールする必要があります。公式 Web サイトから Vue.js の圧縮ファイルをダウンロードするか、CDN を通じて Vue.js ライブラリを参照できます。

HTML ファイルを作成し、Vue.js ライブラリを導入します。次に、Vue インスタンスを初期化し、テンプレート内のリストを定義します。

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3']
    }
  })
</script>

テンプレート内の v-for ディレクティブは、項目リスト内の各要素をループするために使用されます。インスタンス化中に項目の初期値を指定したため、上記のリストにはこれら 3 つの要素が表示されます。これは、単純な Vue.js アプリケーションの例です。

2. 要素を追加する機能を実装します

次のコードを入力します:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    }
  })
</script>

テンプレートに、テキスト入力ボックスと「項目の追加」ボタンを追加しました。そして、v-model ディレクティブをデータの newItem 属性にバインドします。 Vue インスタンスでは、ユーザーが「項目の追加」ボタンをクリックして項目をリストに追加したときに呼び出される addItem というメソッドを定義しました。

入力ボックスの値は newItem 属性に保存されます。addItem メソッドが呼び出されると、その値が項目リストに挿入され、newItem 属性の値がリセットされます。最後に、Vue.js はリストを自動的に再レン​​ダリングし、ブラウザーに表示します。

3. 要素の削除機能の実装

次に、要素の削除機能を実装します。各リスト項目をワンクリックで削除するボタンを追加する必要があります。
次のコードを入力します:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      {{ item }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      }
    }
  })
</script>

removeItem という名前のメソッドを追加し、リストの [削除] ボタンにバインドしました。ユーザーが「削除」ボタンをクリックすると、removeItem メソッドが呼び出され、リスト内の対応する項目が削除されます。ここでは、2 番目のパラメータ (インデックス) を指定して呼び出して、特定の項目を削除できます。

4.要素変更機能の実装

次に、項目編集機能を実装します。各リスト項目に入力ボックスを配置でき、ユーザーが入力ボックスをクリックすると編集状態になり、項目のテキスト内容を変更できるようになります。次のコードを入力します。

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      <input v-model="item.text" v-show="!item.editing">
      <span v-show="item.editing">{{ item.text }}</span>
      <button @click="editItem(index)">{{ item.editing ? 'Save' : 'Edit' }}</button>
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'item 1', editing: false },
        { text: 'item 2', editing: false },
        { text: 'item 3', editing: false }
      ],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push({ text: this.newItem, editing: false });
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      },
      editItem: function(index) {
        var item = this.items[index];
        if (item.editing) {
          item.editing = false;
        } else {
          item.editing = true;
        }
      }
    }
  })
</script>

各リスト項目に入力ボックスと 2 つのボタン (編集ボタンと削除ボタン) を追加しました。 Vue インスタンスに、ユーザーが [編集] ボタンをクリックしたときに呼び出される editItem というメソッドを追加しました。

このメソッドを使用すると、編集ステータス (編集中) を true または false に設定できます。アイテムが編集中の場合は、アイテムのテキスト内容が表示されます。それ以外の場合は、ユーザーが変更できるように入力ボックスが表示されます。

最後に、変更を保存した後、編集プロパティを false にリセットするだけです。

5. 概要

この記事では、Vue.js フレームワークを使用して、単純な追加、削除、変更、チェック機能を実装する方法を学びました。 Vue.js を使用すると、開発者は複雑な単一ページ アプリケーションを迅速に構築し、開発をより効率的にすることができます。

Vue.js には他にも多くの機能があり、開発者はこれらを深く調べて自分のプロジェクトに適用できます。

以上がVue フロントエンドは追加、削除、変更、クエリを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。