目录结构

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue-demo</title>

  </head>

  <body>

    <div class="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

　　main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import TodoList from './TodoList'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '.app',

  router,

  components: { TodoList },

  template: '<TodoList/>'

})

TodoList.vue文件

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button v-on:click="handleSubmit">提交</button>
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete">

      </todo-item>

    </ul>

  </div>
</template>

<script>
  //导入componets下的组件todoItem.vue
  import todoItem from './components/todoItem'

  //局部组件的注册和声明,之后在本页面使用局部组件todo-item
  export default {
  components:{
    'todo-item':todoItem,
  },
    data(){
      return {
        inputValue:'',
        list:[]
      }
    },
    methods:{
      handleSubmit(){
        this.list.push(this.inputValue)
        this.inputValue=''

      },
      //点击ul下的li,删除对应的项,通过index标识
      handleDelete(index){
        this.list.splice(index,1)
      }
    }
}
</script>

<style>

</style>

todoItem.vue文件
<template>
  <li v-on:click="handleDelte">{{content}}</li>

</template>

<script>
export default {
//  父子组件传值如此通信
//  子组件通过props接收父组件传来的值
  props:['content','index'],

  methods:{
    handleDelte(){
      console.log(this.index)
    //  子组件触发了事件出去,父组件那边需要监听并处理
      this.$emit('delete',this.index)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

vue 做一个简单的TodoList的更多相关文章

  1. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  2. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  3. QML学习笔记（五）— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...

  4. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  5. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  8. Jmeter初步使用二--使用jmeter做一个简单的性能测试

    经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...

  9. 用EF DataBase First做一个简单的MVC3报名页面

    使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO. ...

随机推荐

  1. C语言I作业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9888 我在 ...

  2. 学习笔记_58 python语法基础

    1.python是解析型语言. 有点像javaScript在html运行一样,不需要mian函数入口,随时随地定义函数,执行函数, 执行语句,定义类型 2.python能面向对象 3.python使用 ...

  3. Spring Boot实战之定制URL匹配规则

    本文首发于个人网站:Spring Boot实战之定制URL匹配规则 构建web应用程序时,并不是所有的URL请求都遵循默认的规则.有时,我们希望RESTful URL匹配的时候包含定界符". ...

  4. 【控制系统数字仿真与CAD】实验一：状态方程、传函为模型的系统的仿真

    一.实验目的 1. 掌握各数学模型之间的转换与数学模型的参数获取,掌握相关MATLAB命令 2. 掌握欧拉法和RK法的递推公式 3. 掌握欧拉法和RK法的MATLAB算法实现 二.实验内容 1. 分别 ...

  5. 部署https并自动续期

    1.其它步骤参考地址https://blog.csdn.net/achenyuan/article/details/79021340https://blog.csdn.net/Dancen/artic ...

  6. ElasticSearch（六）：索引模板

    ElasticSearch(六):索引模板 学习课程链接<Elasticsearch核心技术与实战> Index Template Index Template - 帮助你设定Mappin ...

  7. Salesforce学习之路-developer篇（五）Aura组件原理及常用属性

    很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...

  8. 『题解』Codeforces656E Out of Controls

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description You are given a complete undirected gr ...

  9. Flash、RAM、ROM的区别

    一. ROM(Read Only Memory)    ROM(Read Only Memory),只读存储器.用来存储和保存数据.ROM数据不能随意更新,但是在任何时候都可以读取.即使是断电,ROM ...

  10. 从多维卷积说起，比较CNN中的全连接和全卷积

    一幅图像里包含三个通道,分别是RGB通道.三通道在卷积时是通过累加三个卷积结果得到的. CNN中全连接层的卷积核大小是feature map的大小.比如feature是3*3的,那么该全连接层的卷积核 ...