快捷導(dǎo)航

Vuejs 實現(xiàn)簡易 todoList 功能與組件實例代碼

更新時間：2018年09月10日 09:12:10 作者：苦作舟

本文通過實例代碼給大家介紹了Vuejs 實現(xiàn)簡易 todoList 功能與組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

todoList

結(jié)合之前 Vuejs 基礎(chǔ)與語法
•使用 v-model 雙向綁定 input 輸入內(nèi)容與數(shù)據(jù) data
•使用 @click 和 methods 關(guān)聯(lián)事件
•使用 v-for 進(jìn)行數(shù)據(jù)循環(huán)展示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>TodoList</title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="root">
  <div>
   <input v-model="inputValue"/>
   <button @click="handleSubmit">提交</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: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })
 </script>
</body>
</html>

JSbin 預(yù)覽

todoList 組件拆分

Vuejs 組件相關(guān) 詳細(xì)參考組件基礎(chǔ)

全局組件

注冊全局組件，并在 HTML 中通過模板調(diào)用組件

//注冊全局組件
  Vue.component('todo-item',{
   template: '<li>item</li>'
  })
  <ul>
   <!-- <li v-for="(item,index) of list" :key="index">
    {{item}}
   </li> -->
   <todo-item></todo-item>   <!-- 通過模板使用組件 -->
  </ul>

JSbin 預(yù)覽

局部組件

在注冊了局部組件之后，直接通過模板調(diào)用是不可以的，必須要在最外層的 Vue 的實例中添加 components: { }進(jìn)行組件聲明。

//注冊局部組件
  var TodoItem = {
   template: '<li>item</li>'
  }
  new Vue({
   el: "#root",
   components: {  //局部組件需要聲明的 components
    'todo-item': TodoItem
   },
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })

JSbin 預(yù)覽

即通過局部注冊的組件，需要在其他的 Vue 實例中使用該局部組件。必須使用 components 對該局部組件進(jìn)行注冊。
上面的實例中，要在 Vue 實例中使用 TodoItem 這個局部組件，就通過 todo-item 這個標(biāo)簽來使用。當(dāng)在實例中注冊好了以后，才可以在模板里面使用這個標(biāo)簽。這樣就算正確的使用了局部組件。

外部傳遞參數(shù)

給 todo-item 標(biāo)簽添加 :content 屬性，值為循環(huán)的每一項的內(nèi)容 "item"，

這樣就可以吧 content 傳遞給 todo-item 這個組件

<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>

但是直接將組件改成是不行的

  Vue.component('todo-item',{
   template: '<li>{{content}}</li>'
  })

需要讓組件接收屬性，所以要在todo-item組件里面定義props屬性，其值為一個數(shù)組 'content' 。
其含義是，該組件接收從外部傳遞的進(jìn)來的名字叫做 content 的屬性

  Vue.component('todo-item',{
   props: ['content'],
   template: '<li>{{content}}</li>'
  })

JSbin 預(yù)覽

組件與實例的關(guān)系

Vue 之中，每一個組件其實也是一個 Vue 的實例。因此在 Vue 項目中，是一個個實例構(gòu)建而成的。
因此組件之中，也可以綁定 @click 事件，添加 methods 屬性。

 Vue.component('todo-item',{
   props: ['content'],
   template: '<li @click="handleClick">{{content}}</li>',
   methods: {
    handleClick: function(){
     alert('clicked')
    }
   }
  })

JSbin 預(yù)覽

同樣的實例也可以被稱作一個組件，那么我們這個根實例當(dāng)中的 template 模板是什么呢 ?
如果一個 Vue 實例沒有模板，會到掛載點去找。如下實例，根實例會找到 #root 下面掛載點的所有內(nèi)容作為模板。

new Vue({
   el: "#root",
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })

為 todoList 添加刪除功能

通過發(fā)布 / 訂閱，當(dāng)子組件點擊時，通知父組件把數(shù)據(jù)刪除掉。在子組件中，發(fā)布自定義一個 'delete' 事件。調(diào)用 this.$emit 方法，并傳遞 index 的值。

子組件向外部進(jìn)行發(fā)布

  //子組件
  Vue.component('todo-item',{
   props: ['content','index'],
   template: '<li @click="handleClick">{{content}}</li>',
   methods: {
    handleClick: function(){
     //發(fā)布
     this.$emit('delete', this.index)
    }
   }
  })

父組件在模板里創(chuàng)建子組件的時候，監(jiān)聽子組件向外觸發(fā)的 delete 事件，如果監(jiān)聽到 delete 事件，執(zhí)行 handleDelete 函數(shù)。

   <todo-item v-for="(item,index) of list"
         :key="index"
         :content="item"
         :index="index"
         @delete="handleDelete"> <!-- 監(jiān)聽delete事件 -->
   </todo-item>   <!-- 通過模板使用組件 -->

然后在父組件的 methods 中，寫好 handleDelete 方法。

  //最外層實例，父組件
  new Vue({
   el: "#root",
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    },
    handleDelete: function(index){
     this.list.splice(index,1) //使用splice方法刪除list
    }
   }
  })

總結(jié)

以上所述是小編給大家介紹的Vuejs 實現(xiàn)簡易 todoList 功能與組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: