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 相关文章推荐
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
node.js使用express框架进行文件上传详解
Mar 03 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
在javascript中对于DOM的加强
2013/04/11 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
用python实现的线程池实例代码
2018/01/06 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
领导干部廉政承诺书
2014/03/27 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
戒赌保证书
2015/05/11 职场文书
小时代观后感
2015/06/10 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书