vue2 양식 추가, 삭제, 비즈니스 로직 확인

최신 웹 애플리케이션이 지속적으로 개발됨에 따라 양식은 여전히 ​​사용자와 애플리케이션 간의 중요한 상호 작용 방법입니다. 널리 사용되는 프런트 엔드 프레임워크인 Vue2는 양식의 추가, 삭제 및 쿼리 작업을 빠르게 구현할 수 있는 편리한 양식 처리 방법을 제공합니다. Vue2 양식 추가 및 삭제 쿼리를 구현하기 전에 먼저 Vue2가 무엇인지, 기본 개념을 이해해야 합니다.

Vue2는 점진적인 개발을 지원하고 사용자 인터페이스를 빠르게 구축하는 방법인 경량 JavaScript 프레임워크입니다. Vue2의 핵심 아이디어는 DOM을 JavaScript 코드에서 분리하고, 객체 모델을 뷰에 바인딩하고, 컴포넌트화를 통해 애플리케이션을 구축하는 것입니다. Vue2의 주요 기능은 데이터 기반 뷰입니다. 구성 요소의 상태 변수가 변경되면 Vue2는 페이지에서 해당 뷰를 자동으로 업데이트합니다. Vue2는 복잡한 비즈니스 로직을 쉽게 구현할 수 있는 지침 및 라이프사이클 후크와 같은 기능도 지원합니다.

다음으로 Vue2를 사용하여 양식 추가, 삭제 및 쿼리의 비즈니스 로직을 구현하는 방법을 보여 드리겠습니다. 이 예에서는 Vue2를 사용하여 간단한 할 일 목록 애플리케이션을 만듭니다. Vue2의 컴포넌트 메커니즘을 사용하여 목록 양식을 구축하고 컴포넌트 간 데이터 전송을 통해 추가, 삭제 및 확인 작업을 구현해 보겠습니다. 다음은 우리가 생성할 구성 요소 목록입니다.

1. TodoList - 목록 구성 요소
2. TodoItem - 목록 항목 구성 요소

TodoList 구성 요소는 모든 할 일 항목 목록을 표시하는 데 사용되며 TodoItem 구성 요소는 단일 할 일 항목 콘텐츠를 표시하는 데 사용됩니다. TodoList 구성 요소에 여러 개의 TodoItem 구성 요소를 만들어 완전한 할 일 목록을 만듭니다.

먼저 단일 할 일 항목 콘텐츠를 나타내는 TodoItem 구성 요소를 만들어야 합니다. 우리는 props를 사용하여 데이터를 구성 요소에 전달하고 이러한 props는 구성 요소에서 내부적으로 뷰를 렌더링하는 데 사용됩니다. TodoItem 컴포넌트에 다음 코드를 정의합니다.

<template>
  <div>
    <input type="checkbox" v-model="completed">{{ item.text }}
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      completed: false
    }
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.item)
    }
  }
}
</script>

위 코드에서는 먼저 컴포넌트의 템플릿 파일을 정의하고 v-model 지시어를 사용하여 컴포넌트의 상태를 입력 상자의 값에 양방향으로 바인딩합니다. 사용자가 할 일 항목을 확인하는 작업을 수행합니다. 또한 "Delete" 버튼을 추가했으며, 사용자가 버튼을 클릭하면 할 일 항목의 데이터 개체를 매개변수로 전달하는 $emit 메서드를 사용하여 "delete-item" 이벤트를 발생시킵니다.

다음으로 TodoList 구성 요소의 TodoItem 구성 요소를 사용하여 여러 할일 항목을 만들어야 합니다. v-for 지시문을 사용하여 모든 할 일 항목을 반복하고 각 할 일 항목에 TodoItem 구성 요소를 렌더링합니다. TodoList 구성 요소에 다음 코드를 정의합니다.

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <todo-item :item="item" @delete-item="deleteItem"></todo-item>
    </div>
    
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '完成Vue2表单增删查', completed: false },
        { id: 2, text: '学习JavaScript高级编程', completed: true },
        { id: 3, text: '尝试构建一个全栈应用', completed: false }
      ],
      newItemText: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItemText) {
        let newId = this.items.length + 1
        this.items.push({
          id: newId,
          text: this.newItemText,
          completed: false
        })
        this.newItemText = ''
      }
    },
    deleteItem(item) {
      let index = this.items.findIndex(x => x.id === item.id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

위 코드에서는 먼저 3개의 할 일 항목이 포함된 데이터 목록 항목을 정의합니다. 또한 사용자가 입력한 새로운 할 일 콘텐츠를 저장하는 데 사용되는 newItemText 변수를 정의합니다. 템플릿에서는 v-for 지시문을 사용하여 모든 할 일 항목을 반복하고 TodoItem 구성 요소를 사용하여 각 할 일 항목을 렌더링합니다. 또한 새 항목을 추가하기 위해 제출 이벤트를 양식에 바인딩하고 메서드에 새 할 일 항목을 추가했습니다.

할 일 항목을 삭제할 때 findIndex 메소드를 사용하여 삭제할 항목의 인덱스를 양식에서 찾고, splice 메소드를 사용하여 목록에서 해당 항목을 삭제합니다. 사용자가 할 일 항목을 확인하면 구성 요소의 상태 변수가 업데이트되고 v-model 지시문을 사용하여 입력 상자의 값에 바인딩됩니다.

이러한 간단한 예를 통해 Vue2를 사용하여 양식 추가, 삭제 및 쿼리를 구현하는 것이 매우 편리하고 빠르다는 것을 알 수 있습니다. 실제 애플리케이션에서는 Vue2의 구성 요소 메커니즘과 데이터 바인딩 기능을 사용하여 개발 속도를 높이고 오류 가능성을 줄여 보다 복잡한 비즈니스 요구 사항을 달성할 수 있습니다.

위 내용은 vue2 양식 추가, 삭제, 비즈니스 로직 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!