主要文件目录:

文件代码:

根实例,初始化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. python通过xlsxwriter模块将文字写入xlsx文件

    #今天和大家一起学习通过python的xlsxwriter模块 xlsxwriter模块主要用来生成excel表格,插入数据.插入图标等表格操作等. 环境:python 3 1)安装 xlsxwrit ...

  2. 用JS遍历循环时覆盖了之前的值

    使用js遍历Echarts时,三个数据项,七个分类,遍历如下, 其他都没有问题,就是series.data里的数据只加载了一组,控制台显示数组的长度是7,可是下面的数据只有一个 发现把给数据项赋值的语 ...

  3. 如何发布自己模块到NPM

    创建项目 npm init name: (my-npm) version: (1.0.0) description: 0.0.1 entry point: (index.js) test comman ...

  4. 宏观看restframework序列化

    序列化 序列化意义 web有两种应用模式,一种是前后端不分离,一种是前后端分离,当前后端分离的时候,后端只需要向前端传输数据即可,不需要进行其他的操作,一般如果是中大型公司,都是前后端分离,这也是目前 ...

  5. 随记181120Service Fabric问题

    https://github.com/Azure/service-fabric-issues/issues/1056 不能启动node one /five 问题

  6. Delphi东京版FireDAC连接MSSQL2000提示对象名 'SYS.DATABASES' 无效

    在Delphi 10.2.1 东京 版中,FireDAC默认不兼容MSSQL2000,会提示“[FireDAC][Phys][ODBC][Microsoft][ODBC SQL Server Driv ...

  7. Python学习:19.Python设计模式-单例模式

    一.单例模式存在的意义 在这里的单例就是只有一个实例(这里的实例就像在面向对象的时候,创建了一个对象也可以说创建了一个实例),只用一个实例进行程序设计,首先我们可以了解一下什么时候不适合使用单例模式, ...

  8. Python调用time模块设置当前时间-指定时间

    import datetimeimport time#新建元旦时间#将程序打包def A(): # 设定时间 newyear =datetime.datetime(2033,10,1) #调用当前时间 ...

  9. Angular5学习笔记 路由配置

    因为angular-cli脚手架的关系,所以配置路由可以通过命令行来创建路由文件 原本创建一个angular项目的命令是ng new 项目名,就可以了,但这样创建出来的项目是没有路由文件的. 如果需要 ...

  10. Docker学习笔记-Windows系统支持(一)

    Docker对windows的支持情况: 一.Docker for Windows ServerDocker Enterprise Edition for Windows Server 2016htt ...