Vuejs 实现简易 todoList 功能 与 组件实例代码


Posted in Javascript onSeptember 10, 2018

todoList

结合之前 Vuejs 基础与语法
•使用 v-model 双向绑定 input 输入内容与数据 data
•使用 @click 和 methods 关联事件
•使用 v-for 进行数据循环展示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>TodoList</title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="root">
  <div>
   <input v-model="inputValue"/>
   <button @click="handleSubmit">提交</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: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })
 </script>
</body>
</html>

JSbin 预览

todoList 组件拆分

Vuejs 组件相关 详细参考组件基础

全局组件

注册全局组件,并在 HTML 中通过模板调用组件

//注册全局组件
  Vue.component('todo-item',{
   template: '<li>item</li>'
  })
  <ul>
   <!-- <li v-for="(item,index) of list" :key="index">
    {{item}}
   </li> -->
   <todo-item></todo-item>   <!-- 通过模板使用组件 -->
  </ul>

JSbin 预览

局部组件

在注册了局部组件之后,直接通过模板调用是不可以的,必须要在最外层的 Vue 的实例中添加 components: { }进行组件声明。 

//注册局部组件
  var TodoItem = {
   template: '<li>item</li>'
  }
  new Vue({
   el: "#root",
   components: {  //局部组件需要声明的 components
    'todo-item': TodoItem
   },
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })

JSbin 预览

即通过局部注册的组件,需要在其他的 Vue 实例中使用该局部组件。必须使用 components 对该局部组件进行注册。
上面的实例中,要在 Vue 实例中使用 TodoItem 这个局部组件,就通过 todo-item 这个标签来使用。当在实例中 注册好了以后,才可以在模板里面使用这个标签。这样就算正确的使用了局部组件。

外部传递参数

给 todo-item 标签添加 :content 属性,值为循环的每一项的内容 "item",

这样就可以吧 content 传递给 todo-item 这个组件

<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>

但是直接将组件改成是不行的

Vue.component('todo-item',{
   template: '<li>{{content}}</li>'
  })

需要让组件接收属性,所以要在todo-item组件里面定义props属性,其值为一个数组 'content' 。
其含义是,该组件接收从外部传递的进来的名字叫做 content 的属性

Vue.component('todo-item',{
   props: ['content'],
   template: '<li>{{content}}</li>'
  })

JSbin 预览

组件与实例的关系

Vue 之中,每一个组件其实也是一个 Vue 的实例。因此在 Vue 项目中,是一个个实例构建而成的。
因此组件之中,也可以绑定 @click 事件,添加 methods 属性。

Vue.component('todo-item',{
   props: ['content'],
   template: '<li @click="handleClick">{{content}}</li>',
   methods: {
    handleClick: function(){
     alert('clicked')
    }
   }
  })

JSbin 预览

同样的实例也可以被称作一个组件,那么我们这个根实例当中的 template 模板是什么呢 ?
如果一个 Vue 实例没有模板,会到挂载点去找。如下实例,根实例会找到 #root 下面挂载点的所有内容作为模板。

new Vue({
   el: "#root",
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    }
   }
  })

为 todoList 添加删除功能

通过 发布 / 订阅,当子组件点击时,通知父组件把数据删除掉。在子组件中,发布自定义一个 'delete' 事件。调用 this.$emit 方法,并传递 index 的值。

子组件向外部进行发布

//子组件
  Vue.component('todo-item',{
   props: ['content','index'],
   template: '<li @click="handleClick">{{content}}</li>',
   methods: {
    handleClick: function(){
     //发布
     this.$emit('delete', this.index)
    }
   }
  })

父组件在模板里创建子组件的时候,监听子组件向外触发的 delete 事件,如果监听到 delete 事件,执行 handleDelete 函数。

<todo-item v-for="(item,index) of list"
         :key="index"
         :content="item"
         :index="index"
         @delete="handleDelete"> <!-- 监听delete事件 -->
   </todo-item>   <!-- 通过模板使用组件 -->

然后在父组件的 methods 中,写好 handleDelete 方法。

//最外层实例,父组件
  new Vue({
   el: "#root",
   data: {
    inputValue: '',
    list: []
   },
   methods: {
    handleSubmit: function(){
     this.list.push(this.inputValue)
     this.inputValue = ''
    },
    handleDelete: function(index){
     this.list.splice(index,1) //使用splice方法删除list
    }
   }
  })

总结

以上所述是小编给大家介绍的Vuejs 实现简易 todoList 功能 与 组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JavaScript原型链详解
Nov 07 Javascript
浅谈微信小程序flex布局基础
Sep 10 #Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 #Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 #Javascript
You might like
php HandlerSocket的使用
2011/05/02 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP多文件上传类实例
2015/03/07 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python的re模块应用实例
2014/09/26 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python全排列操作实例分析
2018/07/24 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
校园新闻广播稿
2014/01/10 职场文书
集体婚礼策划方案
2014/02/22 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
python 中的@运算符使用
2021/05/26 Python
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL