Vue制作Todo List网页


Posted in Javascript onApril 26, 2017

Vue学习完成Todo List网页,供大家参考,具体内容如下

Vue制作Todo List网页

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

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

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

以下是HTML部分

<div class="main">
 <h3 class="big-title">添加任务:</h3>
 <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中文官网看,讲的很详细。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
JS解析XML的实现代码
Nov 12 Javascript
jquery实现显示已选用户
Jul 21 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
bootstrap table表格使用方法详解
Apr 26 #Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 #Javascript
windows下vue-cli导入bootstrap样式
Apr 25 #Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 #Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
vuejs如何配置less
Apr 25 #Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
You might like
php实现的短网址算法分享
2014/06/20 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python私有属性和方法实例分析
2015/01/15 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
高中生学期学习自我评价
2014/02/24 职场文书
公司合作意向书
2014/04/01 职场文书
企业文化演讲稿
2014/05/20 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
老公保证书
2015/01/17 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
同学会感言
2015/07/30 职场文书
初中语文教学研修日志
2015/11/13 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Java详细解析==和equals的区别
2022/04/07 Java/Android