Vue如何制作TodoList网页-创新互联

这篇文章主要为大家展示了“Vue如何制作Todo List网页”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何制作Todo List网页”这篇文章吧。

成都创新互联专注于企业成都全网营销、网站重做改版、西青网站定制设计、自适应品牌网站建设、H5技术、商城系统网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为西青等各大城市提供网站开发制作服务。

具体内容如下

Vue如何制作Todo List网页

跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。

Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接下去的学习中慢慢实践。

Todo List这个网页用到了很多Vue的指令，在这里我贴出一部分代码，全部代码请戳我的Github

以下是HTML部分

<div class="main">
 <h4 class="big-title">添加任务：</h4>
 <input 
  placeholder="在此添加任务" 
  class="task-input" 
  type="text"
  v-model="things"
  @keyup.enter="addTodo"
 />
 <ul class="task-count" v-show="list.length">
  <li>
   {{unCheckedLength}}个任务未完成</li>
  <li class="action">
   <a :class="{active: visibility == 'all'}" href="#all" rel="external nofollow" >所有任务</a>
   <a :class="{active: visibility == 'unfinished'}"href="#unfinished" rel="external nofollow" >未完成任务</a>
   <a :class="{active: visibility == 'finished'}"href="#finished" rel="external nofollow" >完成任务</a>
  </li>
 </ul>
 <div class="tasks">
  <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</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是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。

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中要绑定这些数据，Vue也提供了一套指令：

v-bind绑定一个或多个特性，一般用于绑定class和style， v-on 绑定事件， v-show，v-if都是根据条件渲染元素，v-for是渲染列表…等等，我就不一一赘述了。可以去Vue中文官网看，讲的很详细。

以上是“Vue如何制作Todo List网页”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：Vue如何制作TodoList网页-创新互联
网页路径：https://www.cdcxhl.com/article36/doedpg.html

成都网站建设公司_创新互联，为您提供营销型网站建设、服务器托管、企业网站制作、建站公司、网站改版、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站建设

网站导航知识

分类信息网