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 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JS获取时间的方法
Jan 21 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php集成开发环境详解
2019/09/24 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python实现股市信息下载的方法
2015/06/15 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python创建n行m列数组示例
2019/12/02 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Yahoo的PHP面试题
2014/05/26 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
农民入党思想汇报
2014/01/03 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
师范生教育见习总结
2015/06/23 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers