Vue 프런트엔드는 추가, 삭제, 수정 및 쿼리를 구현합니다.

Vue.js는 고성능 단일 페이지 애플리케이션을 구축하는 데 널리 사용되는 프런트 엔드 프레임워크입니다. 이 기사에서는 Vue.js를 사용하여 추가, 삭제, 수정 및 확인 기능을 구현하는 방법을 소개합니다.

1. Vue.js로 기본 프레임워크를 생성합니다

먼저 Vue.js를 설치해야 합니다. 공식 홈페이지에서 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 지시문은 항목 목록의 각 요소를 반복하는 데 사용됩니다. 인스턴스화 중에 항목의 초기 값을 지정했기 때문에 위 목록에는 이러한 세 가지 요소가 표시됩니다. 이것은 간단한 Vue.js 애플리케이션의 예입니다.

둘째, 요소 추가 기능 실현

다음 코드를 입력하세요.

<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이라는 메서드를 추가하고 이를 목록의 "제거" 버튼에 바인딩했습니다. 사용자가 "Remove" 버튼을 클릭하면, RemoveItem 메소드가 호출되어 목록에서 해당 항목을 삭제합니다. 여기서는 두 번째 매개변수(index)와 함께 호출하여 특정 항목을 삭제할 수 있습니다.

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>

각 목록 항목에 입력 상자와 두 개의 버튼(편집 버튼과 삭제 버튼)을 추가했습니다. Vue 인스턴스에서는 사용자가 편집 버튼을 클릭할 때 호출되는 editItem이라는 메서드를 추가했습니다.

이 방법을 사용하면 편집 상태(editing)를 true 또는 false로 설정할 수 있습니다. 항목이 편집 중인 경우 항목의 텍스트 내용을 표시하고, 그렇지 않으면 사용자가 변경할 수 있도록 입력 상자를 표시합니다.

마지막으로 변경 사항을 저장한 후 편집 속성을 false로 재설정하면 됩니다.

5. 요약

이번 글을 통해 Vue.js 프레임워크를 사용하여 간단한 추가, 삭제, 수정, 확인 기능을 구현하는 방법을 배웠습니다. Vue.js를 사용하면 개발자가 복잡한 단일 페이지 애플리케이션을 신속하게 구축하고 개발 효율성을 높일 수 있습니다.

Vue.js에는 개발자가 자신의 프로젝트에 깊이 탐색하고 적용할 수 있는 다른 많은 기능과 기능이 있습니다.

위 내용은 Vue 프런트엔드는 추가, 삭제, 수정 및 쿼리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!