這篇文章主要為大家展示了“Vue如何制作Todo List網(wǎng)頁”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue如何制作Todo List網(wǎng)頁”這篇文章吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、西青網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為西青等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

具體內(nèi)容如下

跟著老師學(xué)習(xí)Vue，我喜歡清爽的界面，就自己改了樣式，看起來還不錯，以后就用來記錄要做的事情，實用性還蠻強(qiáng)。

Vue非常容易上手，運用到了雙向綁定機(jī)制，即HTML里的DOM元素與JS里的Vue實例進(jìn)行雙向綁定，只要Vue實例中的代理數(shù)據(jù)改變，HTML中的實際數(shù)據(jù)就會跟著變，這和原生的Js的命令驅(qū)動模式不同，它是數(shù)據(jù)驅(qū)動模式，通過數(shù)據(jù)的改變來控制DOM的變化。什么意思呢？我們會在接下去的學(xué)習(xí)中慢慢實踐。

Todo List這個網(wǎng)頁用到了很多Vue的指令，在這里我貼出一部分代碼，全部代碼請戳我的Github

以下是HTML部分

<div class="main">
 <h4 class="big-title">添加任務(wù)：</h4>
 <input 
  placeholder="在此添加任務(wù)" 
  class="task-input" 
  type="text"
  v-model="things"
  @keyup.enter="addTodo"
 />
 <ul class="task-count" v-show="list.length">
  <li>
   {{unCheckedLength}}個任務(wù)未完成</li>
  <li class="action">
   <a :class="{active: visibility == 'all'}" href="#all" rel="external nofollow" >所有任務(wù)</a>
   <a :class="{active: visibility == 'unfinished'}"href="#unfinished" rel="external nofollow" >未完成任務(wù)</a>
   <a :class="{active: visibility == 'finished'}"href="#finished" rel="external nofollow" >完成任務(wù)</a>
  </li>
 </ul>
 <div class="tasks">
  <span class="no-task-tip" v-show="!list.length">還沒有添加任何任務(wù)</span>
  <ul class="todo-list">
   <li class="todo" v-for="item in filteredList" :class="{completed: item.isChecked,editing:item === editItem}" >
    <div class="view">
     <div class="word">
      <input class="toggle" type="checkbox" v-model="item.isChecked" >
      <label @dblclick="editTodo(item)">{{item.title}}</label>
     </div>
     <button class="destroy" type="text" @click="deleteTodo(item)">×</button>

    </div>
    <input 
     v-focus="editItem === item" 
     class="edit" 
     type="text" 
     v-model="item.title"
     @blur="edited"
     @keyup.enter="edited"
     @keyup.esc="cancel(item)"
    />
   </li>
  </ul>
 </div>
</div>

Vue實例部分

var vm = new Vue({
 el: ".main",
 data: {
  list:list,
  things:"",
  editItem:"",
  beforeTitle:"",
  visibility:"all",
  inputId:"",
 }, 
 watch:{
  list:{
   handler:function(){
    store.save("todolist",this.list)
   },
   deep:true
  }
 },
 computed:{
  unCheckedLength(){
   return this.list.filter(function(item){
    return item.isChecked == false
   }).length
  },
  filteredList(){   
   return filter[this.visibility] ? filter[this.visibility](this.list) : list
  }
 },
 methods: {
  addTodo(ev){
   if(this.things !== ""){
    var item = {
     title:this.things,
     isChecked:false, 
    }
    this.list.push(item)
   }    
   this.things = "";
  },
  deleteTodo(item){
   var index = this.list.indexOf(item);
   this.list.splice(index,1);
  },
  editTodo(item){ 
   this.beforeTitle = item.title;
   this.editItem = item
  },
  edited(item){
   this.editItem = ""
  },
  cancel(item){
   item.title = this.beforeTitle;
   this.editItem = "";
   this.beforeTitle = ""
  }
 },
 directives:{
  "focus":{         
   update(el,binding){
    if(binding.value){
     el.focus()
    }

   }
  }
 }
});

這是一個基本的Vue實例，el是和DOM元素連接的掛載點，data是代理數(shù)據(jù)，在DOM的內(nèi)容中如果要用到代理數(shù)據(jù)就用{{xxx}}表示，比如{{list}}，{{visibility}}，而當(dāng)data中的代理數(shù)據(jù)出現(xiàn)在DOM標(biāo)簽里的時候就不需要用花括號。

new Vue({
 el: ".main",
 data: {
  list:list,
  things:"",
  editItem:"",
  beforeTitle:"",
  visibility:"all",
  inputId:"",
 }
}）

Vue要用大的方法都放在methods部分

methods: {
   addTodo(ev){
    if(this.things !== ""){
     var item = {
      title:this.things,
      isChecked:false, 
     }
     this.list.push(item)
    }    
    this.things = "";
   },
   deleteTodo(item){
    var index = this.list.indexOf(item);
    this.list.splice(index,1);
   },
   editTodo(item){ 
    this.beforeTitle = item.title;
    this.editItem = item
   },
   edited(item){
    this.editItem = ""
   },
   cancel(item){
    item.title = this.beforeTitle;
    this.editItem = "";
    this.beforeTitle = ""
   }
 }

還有計算屬性

computed:{
  unCheckedLength(){
   return this.list.filter(function(item){
    return item.isChecked == false
   }).length
  },
  filteredList(){   
   return filter[this.visibility] ? filter[this.visibility](this.list) : list
 }
}

觀察屬性

watch:{
  list:{
   handler:function(){
    store.save("todolist",this.list)
   },
   deep:true
  }
}

自定義屬性

directives:{
  "focus":{         
   update(el,binding){
    if(binding.value){
     el.focus()
    }

   }
  }
}

在HTML中要綁定這些數(shù)據(jù)，Vue也提供了一套指令：

v-bind綁定一個或多個特性，一般用于綁定class和style， v-on 綁定事件， v-show，v-if都是根據(jù)條件渲染元素，v-for是渲染列表…等等，我就不一一贅述了。可以去Vue中文官網(wǎng)看，講的很詳細(xì)。

以上是“Vue如何制作Todo List網(wǎng)頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.rwnh.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：Vue如何制作TodoList網(wǎng)頁-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.rwnh.cn/article36/doedpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、服務(wù)器托管、企業(yè)網(wǎng)站制作、建站公司、網(wǎng)站改版、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)