vue组件编写之todolist组件实例详解


Posted in Javascript onJanuary 22, 2018

我们在topNav这个页面上插入一个todolist子组件

我不知道怎么回事,这里的markdown的代码总是串行。。所以代码看得不舒服,见谅啊,我最后会放github的源代码地址。

1. 父组件topNav中注册子组件,引入子组件

<template>
 <div>
  <p>下面这一行就是定义的组件名称</p>
  <todo-list></todo-list>
  <router-view></router-view>
 </div>
</template>
<script>
/*

    1. 通过import来引入我们的子组件drawerLayout

    2. 引入子组件,并重新取名为todoList,然后在components组册一下

    3.在我们的template中按照html标签的形式使用组件,todoList就是<todo-list>

注意:

    (1) 子组件的名字无所谓,但是我们引入的那个子组件名todoList,第二个单词的首字母一定要大写(不然你会踩坑的)

    (2) 使用标签时,todoList,就是todo-list,就是写成驼峰命名法(通俗说就是在第二个单词的大写首字母改成小写形式,然后前面加一个 “-”)

*/
import todoList from '../components/todoList.vue'
 export default {
  components: {
   todoList
  },
  data() {
   return {
   };
  }
 }
</script>

2. 先看看组件的功能

首先我们先大体看看组件长啥样,然后我才去构思如何写

首先我们看到的是一个input输入框,默认显示edit..,当我们没有添加数据的时候,下方显示的“暂无内容”

vue组件编写之todolist组件实例详解 

接着,我们输入数据“第一个例子”然后敲击回车,就会出现一行list

list包括一个单选框,文字,还有一个删除的按钮

vue组件编写之todolist组件实例详解 

那怎么删除呢?那既然要做,肯定稍微做多一点功能,把一些内部指令都用一下,我们设置的删除规则是

先选中该list,然后点击删除,然后该条记录就没有了,如果删除这个数据后,就没有list了,那“暂无内容”就要显示出来了

vue组件编写之todolist组件实例详解

vue组件编写之todolist组件实例详解

3. 开始写我们的todo子组件了

关于代码中的样式我放在最后,所以此刻你可以忽略一些class

我们先把这个todolist的大体框架搭好,然后往里面增加功能

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputNum">请输入:</label>
 <input type="text" 
    id="inputNum" 
    name="inputNum" 
    placeholder="edit..">

 <!--列表内容-->
 <ul>
  <li>
   <input type="checkbox" >
   <span>dd</span>
   <button>删除</button>
  </li>
 </ul>
 <p class="empty" v-if="!inputList.length">暂无内容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {
   return {
    inputList: [],
    inputItem: {
     content: '',
  finished: false,
  deleted: false
 }
   }
  },
  methods: {
   //将输入框的数据添加到list中  
   addItem: function() {}
   //改变选中状态
   changeState: function(index) {},
   //删除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

vue组件编写之todolist组件实例详解 

接下来我就不针对每一小步都给出代码来更新了,因为篇幅太大,我会更具一个功能块来写(我会很详细的)

首先我们先理清以下思路

在输入框中输入数据,按下回车就会在下方显示一行list列表(包括一个单选框,输入的数据,蓝色操作按钮)

将输入框的值和inputItem.content进行双向绑定

给输入框绑定回车事件(@keydown.13)到addItem方法中,每次输入回车,就将输入框的数据添加进list列表中(inputList数组中)

利用v-for指令遍历inputList中的值并显示

选中单选框,list的内容变成删除效果(中间横线划过),蓝色操作按钮变成红色删除按钮,点击按钮,就会删除该列list

将单选框的checked和inputItem的finished进行绑定,绑定后就可以利用这个finished来做一些别的事了

刚添加进列表内容的list的按钮是蓝色操作按钮,如果我们要通过单选框的选中与否的两种状态来使content的子添加和移除一个class(就是上面说的删除效果),以及将按钮变成红色的删除按钮,那就可以绑定changeState方法来操作

那删除功能呢?首先,我们要选中该行list,再点击删除才能删除该行数据,对吧。所以我们将按钮绑定一deleteItem方法,方法做的事情就是先检测该行的finished是否是true,如果是true,那么我们就删除该行数据

我们先完成添加功能:在输入框输入数据,回车,会在下面显示一行列表(包括单选框,输入的数据,删除按钮)

<template>
<div class="ex1">
  <div class="input-text">
 <label for="inputNum">请输入:</label>
 
  <!--@keydow.13表示回车的事件-->
  <!--v-model是为了让输入的数据和inputItem.content同步-->
  
  <input type="text" id="inputNum" name="inputNum" placeholder="edit.."
   @keydown.13="addItem" v-model="inputItem.content" class="edit"
  >
  <!--列表内容-->
  <ul class="task">
   <li v-for="(key, item) in inputList">
    <input type="checkbox" :checked="item.finished">
    <span>{{key.content}}</span>
    <button class="del">删除</button>
   </li>
  </ul>
 <p class="empty" v-if="!inputList.length">暂无内容</p>
  </div>
</div>
</template>
<script>
 export default {
  data () {...省略  },
  methods: {
   addItem: function() {
     this.inputList.push(this.inputItem);
     /*
     为什么我们要对inputItem再次初始化?
     解答:因为每次在输入框中输入数据,都会同时改变inputItem的content属性,
     然后我们点击回车,该inputItem的整个对象都添加进inputList中,
     按正常逻辑来说,inputList内的内容和inputItem是没有联系了。
     如果我们此时不对inputItem进行再次初始化,那么就会发现你再次在输入框中输入数据的时候,
     会同时改变下面的list的值,简易你们把初始化的代码去掉,运行下试试看!
     */
  this.inputItem = {
      content: '',
      finished: false,
      deleted: false
  };
   },
   //改变选中状态
   changeState: function(index) {},
   //删除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

我们先看看列表内容的代码

<!--列表内容-->
<ul class="task">
 <li v-for="(item, index) in inputList">
  <!--单选框绑定了item.finished,还添加了点击事件-->
  <input type="checkbox"
  :checked="item.finished"
  @click="changeState(index)"
  >
  <!--通过item.finished值来动态绑定class-->
  <span :class="{'finish':item.finished}">{{item.content}}</span>
  <!--按钮的颜色通过动态添加class来实现,然后按钮的文本通过改变isDel来实现,isDel的改变也是通过changeState方法来操作的-->
  <button @click="deleteItem(index)"
   class="del"
   :class="{'native':item.finished === true}"
  >{{isDel}}</button>
 </li>
</ul>
<p class="empty" v-if="!inputList.length">暂无内容</p>

然后我们讲解changeState方法

//改变选中状态
   changeState: function (index) {
    // this.inputList[index].finished = true 错误:这样如果点击第二次,无法回到false,就会一直true状态
    this.inputList[index].finished = !this.inputList[index].finished;
    // 根据finished的值来对应的修改isDel的值,isDel的值就是按钮的文本
    if (this.inputList[index].finished) {
   this.isDel = '删除'
    }else {
     this.isDel = '操作'
 }
   },
//删除列表元素
   deleteItem: function (index) {
   if (this.inputList[index].finished) {
    his.inputList.splice(index,1);
   }
   }

总结

以上所述是小编给大家介绍的vue组件编写之todolist组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
基于openlayers4实现点的扩散效果
Aug 17 #Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 #Javascript
webpack引入eslint配置详解
Jan 22 #Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
JavaScript中EventLoop介绍
Jan 22 #Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 #Javascript
You might like
PHP+DBM的同学录程序(4)
2006/10/09 PHP
完美解决PHP中文乱码
2009/11/26 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php 类自动载入的方法
2015/06/03 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
pytorch构建多模型实例
2020/01/15 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
大学生军训广播稿
2014/01/24 职场文书
工程招投标邀请书
2014/01/26 职场文书
汇源肾宝广告词
2014/03/20 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android