主要文件目录：

文件代码：

根实例，初始化vue：

<!--index.html，网站入口页面，和main.jsp组成一套.vue文件，包含-->
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

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

    <title>todolist</title>

  </head>

  <body>

    <div id="app"></div>

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

  </body>

</html>
// main.js

import Vue from 'vue'

import TodoList from './TodolList'  //引用第一个父组件

//import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',　　//根节点，挂载点

  //router,

  components: { TodoList },　　//组件

  template: '<TodoList/>'　　　　//模板就是组件

})

第一个.vue模板文件，是第一个父组件

<!--TodoItem.vue-->

<template>

  <div>

    <div>

      <input v-model="inputValue"/>

      <button @click="handleSubmit">提交</button>

    </div>

    <ul>

      <todo-item

        v-for="(item,index) of list"

        :key="index"

        :content="item"

        :index="index"

        @delete="handleDelete"

      ></todo-item>

    </ul>

  </div>

</template>

<script>

  import TodoItem from './components/TodoItem'　　//引用子组件

  export default {

    components: {

      'todo-item': TodoItem

    },

    //在vue-cli中data是一个函数

    // data: function () {

    //   return {

    //     inputValue: '',

    //   }

    // },

    //ES6中的简写

    data() {

      return {

        inputValue: '',

        list: []

      }

    },

    methods: {

      handleSubmit() {

        this.list.push(this.inputValue)

        this.inputValue = ''

      },

      handleDelete(index) {

        this.list.splice(index, 1)

      }

    }

  }

</script>

<style>

</style>

第二个.vue模板文件，是父组件下的一个子组件

<!--TodoItem-->

<template>

  <li class='item' @click="handleDelete">{{content}}</li>

</template>

<script>

  export default {

    props: ['content', 'index'],

    methods: {

      handleDelete() {

        this.$emit('delete', this.index)

      }

    }

  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scoped 该样式的作用域只在这个组件中,去掉scoped则为全局样式-->
<style scoped> 
.item={
    color: red
}

</style>

页面输出：

可以对照02慕课网《vue.js2.5入门》——Vue中的组件 的todolist实现

04慕课网《vue.js2.5入门》——Vue-cli开发todolist的更多相关文章

  1. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  2. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

  3. 03慕课网《vue.js2.5入门》——Vue-cli的安装，创建webpack模板项目

    安装Vue-cli 第一种 貌似不可以,然后用了第二种,但是重装系统后,第二种不能用了,用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创 ...

  4. 02慕课网《vue.js2.5入门》——Vue中的组件，实现todolist

    TodoList功能开发 例子:输入字符,在列表中显示: 由于有v-for属性,<li>不会被渲染,它已经和数据绑定在一起,有数据来决定 input和button上都有事件监听器,inpu ...

  5. 04慕课网《进击Node.js基础（一）》HTTP讲解

    HTTP:通信协议 流程概述: http客户端发起请求,创建端口默认8080 http服务器在端口监听客户端请求 http服务器向客户端返回状态和内容 稍微详细解析: 1.域名解析:浏览器搜素自身的D ...

  6. 耗时近一个月，终于录完了VUE.JS2.0前端视频教程！

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  7. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  8. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

  1. PTA基础编程题目集6-2多项式求值（函数题）

    本题要求实现一个函数,计算阶数为n,系数为a[0] ... a[n]的多项式f(x)=∑​i=0​n​​(a[i]×x​i​​) 在x点的值. 函数接口定义: double f( int n, dou ...

  2. 20155337祁家伟 2016-2017-2 《Java程序设计》第2周学习总结

    20155337 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 这周我学习了从JDK到IDE的学习内容,简单来说分为以下几个部分 使用命令行和IDE两种方式 ...

  3. 最优布线问题(wire.cpp)

    最优布线问题(wire.cpp) [问题描述] 学校有n台计算机,为了方便数据传输,现要将它们用数据线连接起来.两台计算机被连接是指它们间有数据线连接.由于计算机所处的位置不同,因此不同的两台计算机的 ...

  4. Zabbix学习之路（四）之Web监控

    1.Zabbix监控web服务器访问性能 zabbix 对 web 性能的监控,通过它可以了解 web 站点的可用性以及性能.最终将各项指标绘制到图形中,这样我们可以了解到一个站点的下载速度.响应速度 ...

  5. ELKStack入门篇（二）之Nginx、Tomcat、Java日志收集以及TCP收集日志使用

    1.收集Nginx的json格式日志 1.1.Nginx安装 [root@linux-node1 ~]# yum install nginx -y [root@linux-node1 ~]# vim ...

  6. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（零） 前言（内容已过期，阅读请慎重）

    2018-09-19 更新 :现在已经更新ASP.NET Core Middleware版本.对.NET Core SignalR感兴趣的朋友移步:https://github.com/fanpan2 ...

  7. 强化学习读书笔记 - 10 - on-policy控制的近似方法

    强化学习读书笔记 - 10 - on-policy控制的近似方法 学习笔记: Reinforcement Learning: An Introduction, Richard S. Sutton an ...

  8. gitlab runner 填坑记

    一.Gitlab Runner  CI/CD 错误: Couldn't connect to Docker daemon at http+docker://localhost - is it runn ...

  9. Appium+python的单元测试框架unittest(3)——discover（转）

    (原文:https://www.cnblogs.com/fancy0158/p/10047906.html) TestSuite套件可以添加很多个用例后运行,但是每个用例都需要调用addTest()函 ...

  10. Java普通编程和Web网络编程准备工作

    一.工具下载 链接:https://pan.baidu.com/s/1geOdq3h 密码:pzl5 二.Java普通编程 解压下载的资料,并按readme.txt安装jdk和Eclipse. 三.J ...