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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
js实现常用排序算法
Aug 09 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue实现微信分享功能
Nov 28 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
ThinkPHP之getField详解
2014/06/20 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
js表头排序实现方法
2015/01/16 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python字典底层实现原理详解
2019/12/18 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
Java程序员常见面试题
2015/07/16 面试题
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2015年化验室工作总结
2015/04/23 职场文书
预备党员半年考察意见
2015/06/01 职场文书
卡特教练观后感
2015/06/08 职场文书
教师节联欢会主持词
2015/07/04 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
浅谈Redis的几个过期策略
2021/05/27 Redis