目录结构

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.     <title>vue-demo</title>
  7.   </head>
  8.   <body>
  9.     <div class="app"></div>
  10.  
  11.     <!-- built files will be auto injected -->
  12.   </body>
  13. </html>

　　main.js

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import TodoList from './TodoList'
  5. import router from './router'
  6.  
  7. Vue.config.productionTip = false
  8.  
  9. /* eslint-disable no-new */
  10. new Vue({
  11.   el: '.app',
  12.   router,
  13.   components: { TodoList },
  14.   template: '<TodoList/>'
  15. })

TodoList.vue文件

  1. <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">
  2.  
  3.       </todo-item>
  4.  
  5.     </ul>
  6.  
  7.   </div>
    </template>
  8.  
  9. <script>
      //导入componets下的组件todoItem.vue
      import todoItem from './components/todoItem'
  10.  
  11.   //局部组件的注册和声明,之后在本页面使用局部组件todo-item
      export default {
      components:{
        'todo-item':todoItem,
      },
        data(){
          return {
            inputValue:'',
            list:[]
          }
        },
        methods:{
          handleSubmit(){
            this.list.push(this.inputValue)
            this.inputValue=''
  12.  
  13.       },
          //点击ul下的li,删除对应的项,通过index标识
          handleDelete(index){
            this.list.splice(index,1)
          }
        }
    }
    </script>
  14.  
  15. <style>
  16.  
  17. </style>
  18.  
  19. todoItem.vue文件
  1. <template>
      <li v-on:click="handleDelte">{{content}}</li>
  2.  
  3. </template>
  4.  
  5. <script>
    export default {
    //  父子组件传值如此通信
    //  子组件通过props接收父组件传来的值
      props:['content','index'],
  6.  
  7.   methods:{
        handleDelte(){
          console.log(this.index)
        //  子组件触发了事件出去,父组件那边需要监听并处理
          this.$emit('delete',this.index)
        }
      }
  8.  
  9. }
    </script>
  10.  
  11. <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
  12.  
  13. </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. OptimalSolution(7)--大数据和空间限制

    一.布隆过滤器 问题:不安全网页的黑名单包含100亿个黑名单网页,每个网页的URL最多占用64B.现在想要实现一种网页过滤系统,可以根据网页的URL判断该网页是否在黑名单上,如何设计该系统. 要求:允 ...

  2. Spring Boot集成JSON Web Token（JWT）

    一:认证 在了解JWT之前先来回顾一下传统session认证和基于token认证. 1.1 传统session认证 http协议是一种无状态协议,即浏览器发送请求到服务器,服务器是不知道这个请求是哪个 ...

  3. vue+uwsgi+nginx部署luffty项目

    在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/fil ...

  4. 四、docker 仓库(让我们的镜像有处可存)

    前言 前面讲完了docker 镜像和容器,以及通过Dockerfile 定制属于我们自己的镜像,那那现在就是需要将我们自己定制的镜像存放到仓库中供他们使用.这一套流程才算是正式走完了.从获取镜像,操作 ...

  5. ABAP中将Unicode字符串转换成中文的方法

    以下为示例代码: DATA: LV_UNICODE TYPE STRING,           "Unicode字符串       LV_CHINESE TYPE STRING.      ...

  6. 在虚拟机上的关于Apache（阿帕奇）（3）基于IP访问网站

    这篇随笔是基于IP访问网站,和后面两篇文章基于域名和基于端口一起练习效果更好 基于IP(记得下载httpd服务) 首先使用nmtui命令为网卡添加多个ip地址  输入命令:nmtui  进入下面这个界 ...

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

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

  8. python正则小结

    注意pattern字符串前要加r    原始字符串 元字符 .                匹配除换行的任意字符 ^            匹配开头 $            匹配结尾 表示重复   ...

  9. CSPS模拟 56

    前十基本都A题了,只有$Dybala$.$Naito$和弱比$yxs$没有A题 $T1 Merchant$ 明明学过$nth element$但是由于不懂原理导致我用了个鬼畜的${U队}$来维护前$K ...

  10. NOIP模拟测试14

    考完19了再写14,我也是够咕的. 14的题很好,也充分暴露了我的问题. T1是个分析性质推结论的题 对于区间[L,R],不妨设a[L]!=a[R],那么两个端点对答案没有贡献,也就是[L+1,R], ...