目录结构

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. unity UI事件

    由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_source=tuico ...

  2. django-Views之常见的几种错误视图代码（三）

    1.404 page not found(找不到对应的页面) 2.500 server error(服务器错误) 3.400 bad request(无效的请求) 4.403 HTTP forbidd ...

  3. rem1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  4. 解决axios发送post请求，后端接收不到数据

    https://segmentfault.com/a/1190000012635783

  5. docker 概念简介、简单入门

    1.docker 简介 Docker 是一个开源项目,这个项目旨在通过把应用程序打包为可移植的.自给自足的容器(引用语) DocKer一次构建可放在任何地方就可以运行,不需要进行任何改变DocKer  ...

  6. 【MySQL】MySQL Workbench快捷键小结

    执行当前行,ctrl+enter 执行整篇sql脚本: ctrl+shift+enter 格式化sql语句(美化sql语句):ctrl+b 自动补全:ctrl+space(似乎win10中这个快捷键失 ...

  7. Python的闭包以及迭代器

    一,闭包 什么是闭包呢?闭包就是内层函数,对外层函数(非外层)的变量的引用,叫做闭包 def mz(): name = 'YJ' def xue(): print(name) #闭包 xue() mz ...

  8. AXI4-Stream协议总结与分析

    一.协议介绍 1.AXI4_Stream:适用于高速数据流,去掉了地址项,允许无限制的数据突发传输.除了总线时钟和总线复位,其他的接口信号都是以字母T开头. 2.信号接口描述: (1).ACLK--- ...

  9. emacs考场短配置

    (set-background-color "gray15") (set-foreground-color "gray") ;;设置颜色 (global-set ...

  10. Keepalived+LVS DR模式高可用架构实践

    Keepalived最初是为LVS设计,专门监控各服务器节点的状态(LVS不带健康检查功能,所以使用keepalived进行健康检查),后来加入了VRRP(虚拟路由热备协议(Virtual Route ...