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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
JS中准确判断变量类型的方法
Jun 01 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP中phar包的使用教程
2017/06/14 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
浅谈js中的bind
2019/03/18 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python不同系统中打开方法
2020/06/23 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
求职自我评价范文
2015/03/09 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL