Vue 목록 페이지 추가, 삭제, 수정 및 확인-프런트엔드 Q&A-php.cn

Vue.js가 점점 대중화되면서 Vue 애플리케이션에 대한 수요는 필연적으로 증가할 것입니다. 대부분의 웹 애플리케이션에서 목록 페이지의 중요성이 계속 증가함에 따라 Vue 목록 페이지 추가, 삭제 및 수정은 매우 중요한 애플리케이션 요구 사항일 뿐만 아니라 Vue 학습자가 배워야 할 가장 중요한 것 중 하나입니다. 이 기사에서는 Vue.js를 사용하여 목록 페이지에서 기본 추가, 삭제, 수정 및 확인 작업을 수행하는 방법을 소개합니다.

준비:

이 기사를 시작하기 전에 Vue.js, HTML 및 JavaScript를 사용하여 목록 애플리케이션을 만들 것이므로 HTML 및 JavaScript의 기본에 대한 충분한 지식이 있는지 확인하십시오.

이 문서에서는 다음 주제를 다룹니다.

1. Vue 애플리케이션 만들기

3. 새 항목 추가

5. Vue 애플리케이션 만들기

Vue.js를 설치해야 합니다. CDN 또는 npm 패키지 관리자를 통해 설치할 수 있습니다. CDN을 통해 설치하려면 https://unpkg.com/vue@next/dist/vue.global.js에서 다운로드할 수 있습니다. npm 패키지 관리자를 사용하여 설치하려면 터미널에서 다음 명령을 사용할 수 있습니다.

npm install vue

로그인 후 복사

설치가 완료되면 이제 다음과 같이 Vue 인스턴스를 생성할 수 있습니다.

const app = Vue.createApp({
});

로그인 후 복사

다음으로 템플릿을 정의하겠습니다. 인스턴스에서는 데이터, 메소드 및 계산된 속성이 있습니다.

2. 목록 만들기

v-for 명령을 사용하여 목록 데이터를 반복합니다. 목록 항목 데이터를 저장하는 배열이 있다고 가정합니다. 다음과 같이 Vue 인스턴스에서 이 배열을 데이터 모델로 선언할 수 있습니다.

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ]
    }
  }
});

로그인 후 복사

이제 템플릿에서 v-for 지시어를 사용하여 이 배열을 반복하고 각 항목에 대한 데이터를 표시해야 합니다. 이를 위해 Vue 템플릿에 다음 코드를 추가합니다.

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

로그인 후 복사

위 코드는 v-for 지시어를 사용하여 데이터 배열을 반복하고 키워드:key를 사용하여 각 항목 요소에 고유 식별자를 제공합니다.

이제 목록 생성이 완료되었습니다.

3. 새 항목 추가

Vue에서 제공하는 v-model 지시문을 사용하여 새 목록 입력 및 제출 양식을 만듭니다. v-model 지시어를 사용하면 입력 값을 Vue 구성 요소에 바인딩할 수 있습니다. v-model 지시문을 사용하는 것은 실제로 우리가 일반적으로 텍스트 입력 상자를 사용하는 방식이며 양방향 데이터 바인딩을 자동으로 업데이트합니다.

새 목록 항목을 추가하려면 양식을 표시하고 양식에서 새 데이터를 수집해야 합니다. 아래와 같이 Vue.js를 사용하여 양식을 만듭니다.

<template>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

로그인 후 복사

양식이 실제로 제출되지 않도록 양식에 @submit.prevent 이벤트 수정자를 사용합니다. 대신 addItem 메서드에 바인딩된 이벤트 핸들러를 트리거합니다. 이 메소드는 데이터 배열에 새 항목을 추가합니다.

v-model 지시문은 입력 예약 텍스트 상자에 어떻게 바인딩되나요? 아래와 같이 Vue 구성 요소의 데이터 모델에서 새 변수 newItem를 정의해야 합니다. v-model指令来建立新的列表输入和提交表单。v-model指令允许绑定输入值到Vue组件中。使用v-model指令实际上是我们一般使用文本输入框的理解方式，它会自动更新双向数据绑定。

为了添加新的列表项，我们需要显示一个表单，并从该表单收集新数据。我们用Vue.js创建表单，如下所示：

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    }
  }
});

로그인 후 복사

我们在表单上使用了@submit.prevent事件修饰符，这样表单永远不会真正提交。而是触发我们绑定到addItem方法上的事件处理程序。此方法将添加新项目到数据数组中。

这里v-model指令是如何绑定到输入预留文本框中的呢？我们需要在Vue组件的数据模型中定义一个新的变量newItem，如下所示：

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: '',
      editing: false,
      currentItem: null
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    },
    editItem(item) {
      this.editing = true;
      this.currentItem = item;
    },
    saveItem() {
      this.editing = false;
      this.currentItem = null;
    }
  }
});

로그인 후 복사

在addItem方法中，我们在数组的末尾插入一个新的项目对象，并为新的项目对象提供一个唯一的ID。添加项目后，我们将使用空字符串重置newItem。现在我们已经实现了向数组添加新条目的功能。

4、编辑条目

我们现在的目标是为每个项目添加一个编辑按钮，当点击该按钮时，可以修改项目的名称。实现这种编辑功能的方法是将v-model绑定到数据模型中的当前项并显示保存按钮。可以在每个项目旁边放一个编辑按钮，单击该按钮时切换到编辑模式。

首先，我们需要定义一个currentItem变量。该变量将指定当前正在编辑的项目。我们还需要定义editing变量，以便在编辑模式下隐藏显示条目名称，如下所示：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
    </li>
  </ul>
</template>

로그인 후 복사

现在我们需要在每个项目元素中显示编辑按钮。当编辑按钮被单击时，我们需要切换到编辑模式，这样就可以开始编辑当前项目了。我们可以使用以下代码为每个项目设置编辑按钮：

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: '',
      editing: false,
      currentItem: null
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    },
    editItem(item) {
      this.editing = true;
      this.currentItem = item;
    },
    saveItem() {
      this.editing = false;
      this.currentItem = null;
    },    
    deleteItem(item) {
      const index = this.items.indexOf(item);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    }
  }
});

로그인 후 복사

我们通过使用v-if

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
      <button @click="deleteItem(item)">Delete</button>
    </li>
  </ul>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

로그인 후 복사

addItem 메서드에서 다음 위치에 새 변수를 삽입합니다. 배열 프로젝트 개체의 끝을 지정하고 새 프로젝트 개체에 대한 고유 ID를 제공합니다. 항목을 추가한 후 newItem을 빈 문자열로 재설정합니다. 이제 배열에 새 항목을 추가하는 기능을 구현했습니다.

4. 항목 편집

이제 각 항목에 편집 버튼을 추가하는 것이 목표입니다. 버튼을 클릭하면 항목 이름을 수정할 수 있습니다. 이 편집 기능은 v-model을 데이터 모델의 현재 항목에 바인딩하고 저장 버튼을 표시하여 수행됩니다. 클릭하면 편집 모드로 전환되는 각 항목 옆에 편집 버튼을 배치할 수 있습니다.

먼저 currentItem 변수를 정의해야 합니다. 이 변수는 현재 편집 중인 항목을 지정합니다. 또한 편집 모드에서 항목 이름을 숨기려면 다음과 같이 editing 변수를 정의해야 합니다.

rrreee

이제 모든 항목 요소에 편집 버튼을 표시해야 합니다. 편집 버튼을 클릭하면 현재 프로젝트 편집을 시작할 수 있도록 편집 모드로 전환해야 합니다. 다음 코드를 사용하여 각 항목에 대한 편집 버튼을 설정할 수 있습니다.

rrreee

대체 텍스트 요소를 전환하고 텍스트 입력 상자를 편집하여 v-if를 사용하여 항목 이름을 표시하거나 숨깁니다. 지령. 편집 모드를 사용할 경우 편집 텍스트 상자에 프로젝트 이름을 입력하거나 편집합니다. 저장 버튼을 클릭하면 편집 모드를 종료할 수 있습니다. 🎜🎜5. 항목 삭제🎜🎜 이제 항목을 삭제하는 기능을 추가해야 합니다. 각 항목에 대해 삭제 버튼을 추가해야 합니다. 삭제 버튼을 클릭하면 데이터 배열에서 이 항목이 삭제됩니다. 항목을 찾고 삭제하려면 JavaScript의 Array.prototype.indexOf() 메서드를 사용하겠습니다. 🎜rrreee🎜 이제 각 항목에 삭제 버튼을 추가할 수 있습니다. 삭제 버튼을 클릭하면 deleteItem() 메서드를 호출할 수 있습니다. 🎜rrreee🎜Vue.js를 사용하여 목록 페이지를 추가, 삭제, 수정, 확인하는 방법을 배웠습니다. Vue의 단순성과 사용 용이성은 목록 애플리케이션에 대한 대부분의 작업을 쉽게 처리할 수 있는 매우 강력한 선택입니다. 🎜🎜Vue를 사용하면 코드를 더 쉽게 이해할 수 있을 뿐만 아니라 강력한 웹 애플리케이션을 빠르게 만들 수 있습니다. Vue.js의 도움으로 모든 프로젝트에 대한 목록 페이지를 만드는 것이 더 쉬워졌습니다. 🎜

위 내용은 Vue 목록 페이지 추가, 삭제, 수정 및 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!