目录结构

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. Android应用程序版本升级时签名冲突

    这种错误特别容易在调试中出现,原因是你手机上的应用是直接用eclipse或者android studio安装的,而eclipse或者android studio有自己默认的签名:**debug.key ...

  2. python小例子（三）

    1.提高Python运行速度的方法 (1)使用生成器,节约大量内存: (2)循环代码优化,避免过多重复代码的执行: (3)核心模块使用cpython,pypy等: (4)多进程,多线程,协程: (5) ...

  3. django-模板之静态文件加载（十四）

    1.在templates同级目录下建static 2.index.css 3.index.html {% load static %} <!DOCTYPE html> <html l ...

  4. Airy Memory 内存清理 + 注册码

    链接: https://pan.baidu.com/s/1ZGxDtJBMhrRtBISvL1Lv0w 提取码: ccjs

  5. H5与CSS3常用设置

    1.设置div铺满全屏 对于一个div1,要使其属性height:100%生效,需要使其所有父元素,有确定的属性height.要铺满全屏,就是从html开始,所有的height为100%. 2.垂直居 ...

  6. ABAP中时间戳的处理

    UTC(UTC, Universal Time Coordinated,通用协调时)时间戳,分为长时间戳和段时间戳,其中长时间戳餐开始的系统的数据元素TIMESTAMPL,类型为DEC(21,7):而 ...

  7. C语言I作业05

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

  8. 关于self

    关于self 就像C++的this 但是不同之处是他不是关键字,只代表第一个参数,可以用任何一个普通变量代替 self在对象的方法中表示当前对象本身,如果通过对象调用一个方法,那么该对象会自动传入到当 ...

  9. Ubuntu 10.04——boa服务器的搭建

     声明:自从第一次发表博文不知不觉过去了好久了,非常抱歉没能把自己的东西分享出来,但是由于上家公司本月初裁员,所以致使学的新东西成了半成品,无奈又换了一家,目前已工作三周了,自己也很想写博文分享知识, ...

  10. 自闭枪战C++

    Player1: ad左右移动,w跳,jk发射子弹 Player2: 左右键左右移动,上键跳,23发射子弹 #include <bits/stdc++.h> #include <co ...