快捷導(dǎo)航

vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

更新時(shí)間：2019年04月11日 11:11:43 作者：增偉

這篇文章主要介紹了vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下

•簡單todolist功能的實(shí)現(xiàn)

用戶點(diǎn)擊提交按鈕時(shí)，將input框的內(nèi)容顯示在下方的list中，同時(shí)清空list中內(nèi)容。

<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”輸入框和“inputValue”數(shù)據(jù)雙向綁定

通過click事件，來講"inputValue"中的內(nèi)容添加到"list"中

向列表中添加數(shù)據(jù)用 push( ) this.list.pust(this.inputValue)

每次添加"list"后，把input內(nèi)容清空

•todolist組件拆分

1. Vue.component是全局組件，是vue提供的創(chuàng)建組件的方法。里面可以寫模板：template

2. 創(chuàng)建組件之后，可以直接使用。比如創(chuàng)建的組件名字是'todo-item'，就可以使用<todo-item></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里面使用這個(gè)局部組件，需要在vue里對(duì)該局部組件進(jìn)行注冊(cè)

7.當(dāng)用組件來實(shí)現(xiàn)最上面的那個(gè)todolist功能時(shí)，需要進(jìn)行參數(shù)的傳遞和接收，用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的值。實(shí)現(xiàn)數(shù)據(jù)的傳遞功能

• todolist的刪除功能

1.

繼續(xù)上面的代碼，當(dāng)點(diǎn)擊list數(shù)據(jù)的時(shí)候，實(shí)現(xiàn)list的刪除功能

2.

首先來捋一下邏輯：創(chuàng)建的最外層的大組件/實(shí)例中使用了一個(gè)小的組件todoitem，我們可以認(rèn)為最外層的大組件為父組件，里面的小組件為子組件。

3.

我們?cè)诟附M件中通過屬性的形式給子組件傳遞了具體的內(nèi)容，然后子組件進(jìn)行接收父組件傳遞的內(nèi)容，然后在子組件的模板中進(jìn)行顯示。

4.

要想實(shí)現(xiàn)子組件中數(shù)據(jù)的刪除，需要?jiǎng)h除父組件中對(duì)應(yīng)的數(shù)據(jù)。當(dāng)點(diǎn)擊子組件的數(shù)據(jù)時(shí)，要實(shí)現(xiàn)子組件和父組件的通信，來在父組件中進(jìn)行刪除對(duì)應(yīng)數(shù)據(jù)的操作。

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>

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: