vue todolist 기능,todolist 구성 요소 분할 및 todolist 삭제 기능 구현

5799 단어 vuetodolist
•간단 한 todolist 기능 의 실현
사용자 가 제출 단 추 를 누 르 면 input 상자 의 내용 을 아래 list 에 표시 하고 list 의 내용 을 비 웁 니 다.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue);
          this.inputValue=''
        }
      }
    })
  </script>
</body>
"input"입력 상자 와"input Value"데이터 양 방향 연결
click 이 벤트 를 통 해"input Value"의 내용 을"list"에 추가 합 니 다.
목록 에 데 이 터 를 push()로 추가 합 니 다.       this.list.pust(this.inputValue)"list"를 추가 할 때마다 input 내용 을 비 웁 니 다.
•todolist 구성 요소 분할
1.Vue.coponent 는 전역 구성 요소 로 vue 가 제공 하 는 구성 요 소 를 만 드 는 방법 입 니 다.템 플 릿
2.구성 요 소 를 만 든 후 바로 사용 할 수 있 습 니 다.예 를 들 어 만 든 구성 요소 이름 이'todo-item'이면을 사용 할 수 있 습 니 다.
3.

 <div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{
  template:'<li>item<li>'
  })
  new Vue({
    el:"root"
  })
</script>
4.부분 구성 요소 var TodoItem={}코드 만 적 혀 있 습 니 다.
5.

div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  var TodoItem={
     template:'<li>item<li>'
  }
  new Vue({
    el:"root",
    components:{
      'todo-item':TodoItem
    } 
  })
</script>
6. 
 다른 vue 에서 이 부분 구성 요 소 를 사용 하려 면 vue 에서 이 부분 구성 요 소 를 등록 해 야 합 니 다.
7.구성 요소 로 맨 위 에 있 는 todolist 기능 을 실현 할 때 매개 변수 전달 과 수신 을 하고 content 와 props 를 사용 해 야 합 니 다.
8.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content'],
      template:'<li>{{content}}<li>'
    })
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        }
      }
    })
  </script>
</body>
9.
이 안 에는 content 로 item 의 값 을 전달 하고 props 로 content 의 값 을 받 습 니 다.데이터 전달 기능 실현
•todolist 삭제 기능
1.
위의 코드 를 계속 하고 list 데 이 터 를 클릭 할 때 list 의 삭제 기능 을 실현 합 니 다.
2.
먼저 논 리 를 살 펴 보 겠 습 니 다.만 든 가장 바깥쪽 의 큰 구성 요소/인 스 턴 스 에 작은 구성 요소 todoitem 을 사 용 했 습 니 다.가장 바깥쪽 의 큰 구성 요 소 는 부모 구성 요소 이 고 안의 작은 구성 요 소 는 하위 구성 요소 라 고 생각 할 수 있 습 니 다.
3.
우 리 는 부모 구성 요소 에서 속성 형식 으로 하위 구성 요소 에 구체 적 인 내용 을 전달 한 다음 하위 구성 요 소 는 부모 구성 요소 가 전달 하 는 내용 을 받 은 다음 하위 구성 요소 의 템 플 릿 에 표시 합 니 다.
4.
하위 구성 요소 의 데 이 터 를 삭제 하려 면 부모 구성 요소 에 해당 하 는 데 이 터 를 삭제 해 야 합 니 다.하위 구성 요소 의 데 이 터 를 클릭 할 때 하위 구성 요소 와 부모 구성 요소 의 통신 을 실현 하여 부모 구성 요소 에서 해당 하 는 데 이 터 를 삭제 하 는 작업 을 해 야 합 니 다.
5.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      :index="index"
      @delete="handleDelete"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content','index'],
      template:'<li @clicl="handleClick">{{content}}<li>',
      methods:{
        handleClick:function(){
          this.$emit('delete',this.index)
        }
      }
    })
    new Vue({
      el:"#root",
      data:{
        inputValue='',
        list=[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        },
        handleDelete:function(index){
          this.list.splice(index,1)
        }
      }
    })
  </script>
</body>
총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue 가 todolist 기능,todolist 구성 요소 분할 및 todolist 삭제 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!
PHP 싱크로 율 계산 함수:levenshtein 사용 설명
Iframe 에서 쿠키 와 세 션 을 어떻게 크로스 오 버 하 는 지 에 대한 해결 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage