vue实现todolist功能、todolist组件拆分及todolist的删除功能


Posted in Javascript onApril 11, 2019

•简单todolist功能的实现

用户点击提交按钮时,将input框的内容显示在下方的list中,同时清空list中内容。

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue);
          this.inputValue=''
        }
      }
    })
  </script>
</body>

“input”输入框和“inputValue”数据双向绑定

通过click事件,来讲"inputValue"中的内容添加到"list"中

向列表中添加数据用 push( )      this.list.pust(this.inputValue)

每次添加"list"后,把input内容清空

•todolist组件拆分

1. Vue.component是全局组件,是vue提供的创建组件的方法。里面可以写模板:template

2. 创建组件之后,可以直接使用。比如创建的组件名字是'todo-item',就可以使用<todo-item></todo-item>

3.

<div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item',{
  template:'<li>item<li>'
  })
  new Vue({
    el:"root"
  })
</script>

4.局部组件var TodoItem={}这里只写了部分代码

5.

div id="root">
  <ul>
    <todo-item></todo-item>
  </ul>
</div>
<script>
  var TodoItem={
     template:'<li>item<li>'
  }
  new Vue({
    el:"root",
    components:{
      'todo-item':TodoItem
    } 
  })
</script>

6. 
 如果想在其他vue里面使用这个局部组件,需要在vue里对该局部组件进行注册

7.当用组件来实现最上面的那个todolist功能时,需要进行参数的传递和接收,用content和props

8.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content'],
      template:'<li>{{content}}<li>'
    })
    new Vue({
      el:"#root",
      data:{
        inputValue:'',
        list:[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        }
      }
    })
  </script>
</body>

9.

这里面用content来传递item的值,用props来接收content的值。实现数据的传递功能

• todolist的删除功能

1.

继续上面的代码,当点击list数据的时候,实现list的删除功能

2.

首先来捋一下逻辑:创建的最外层的大组件/实例中使用了一个小的组件todoitem,我们可以认为最外层的大组件为父组件,里面的小组件为子组件。

3.

我们在父组件中通过属性的形式给子组件传递了具体的内容,然后子组件进行接收父组件传递的内容,然后在子组件的模板中进行显示。

4.

要想实现子组件中数据的删除,需要删除父组件中对应的数据。当点击子组件的数据时,要实现子组件和父组件的通信,来在父组件中进行删除对应数据的操作。

5.

<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="submit">submit</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" 
      :key="index" 
      :content="item"
      :index="index"
      @delete="handleDelete"
      >
      </todo-item>
    </ul>
  </div>
  <script>
    Vue.component('todo-item',{
      props:['content','index'],
      template:'<li @clicl="handleClick">{{content}}<li>',
      methods:{
        handleClick:function(){
          this.$emit('delete',this.index)
        }
      }
    })
    new Vue({
      el:"#root",
      data:{
        inputValue='',
        list=[]
      },
      methods:{
        submit:function(){
          this.list.push(this.inputValue)
          this.inputValue=' '
        },
        handleDelete:function(index){
          this.list.splice(index,1)
        }
      }
    })
  </script>
</body>

总结

以上所述是小编给大家介绍的vue实现todolist功能、todolist组件拆分及todolist的删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Three.js基础学习教程
Nov 16 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 #Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 #Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 #Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
关于js陀螺仪的理解分析
Apr 11 #Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
You might like
探讨php中header的用法详解
2013/06/07 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
Vue精简版风格概述
2018/01/30 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
python 正则式使用心得
2009/05/07 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
eclipse创建python项目步骤详解
2019/05/10 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python如何运行js语句
2020/09/09 Python
Python实现EM算法实例代码
2020/10/04 Python
《珍珠泉》教学反思
2014/02/20 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
党员民主评议个人总结
2014/10/20 职场文书