Vue基础练习之Todo List
<body>
<div id = "app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li>-->
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete = "handleItemDelete"><!--监听事件-->
</todo-item>
</ul>
</div>
<script>
/*Vue.component("TodoItem",{//全局组件
props:["content"],
template :"<li>{{content}}</li>"
})*/
var TodoItem = {
//局部组件，需要在实例中声明
props:["content","index"],
template :"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function () {
this.$emit("delete",this.index);//触发事件
}
}
} var app =new Vue({//创建实例
el:"#app",//实例负责管理的dom区域
components:{
//子组件声明
TodoItem: TodoItem,
},
data:{
list: [],
inputValue: ""
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue);
this.inputValue="";
}, handleItemDelete:function (index) {
this.list.splice(index,1);
}
}
}) </script> </body>
Vue基础练习之Todo List的更多相关文章
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
随机推荐
- GNN 相关资料记录；GCN 与 graph embedding 相关调研；社区发现算法相关；异构信息网络相关；
最近做了一些和gnn相关的工作,经常听到GCN 和 embedding 相关技术,感觉很是困惑,所以写下此博客,对相关知识进行索引和记录: 参考链接: https://www.toutiao.com/ ...
- 小爬爬5:scrapy介绍2
1.scrapy:爬虫框架 -框架:集成了很多功能且具有很强通用性的一个项目模板 -如何学习框架:(重点:知道有哪些模块,会用就行) -学习框架的功能模板的具体使用. 功能:(1)异步爬取(自带buf ...
- 遗传算法MATLAB实现(1):工具箱下载及安装
到官网下载谢菲尔德大学的GA工具箱:http://codem.group.shef.ac.uk/index.php/ga-toolbox(其实蛮不懂为什么有人把这个传到某个网上还需要积分才能下载,人家 ...
- [框架]eclipse搭建ssm框架 一 标签： eclipsetomcat框架 2017-03-25 21:28 1085人阅读 评论(
虽然现在也做过一些项目,但是自己从头搭起来的框架几乎没有,所以这两天自己搭了一下ssm的框架,下面写一下框架的搭建过程.并且给出增删改查四条线来方便大家熟悉代码. 环境准备 maven3.2.3 ec ...
- PHPCMS快速建站系列之phpcms v9 模板标签说明整理
[摘要]本文介绍phpcms v9中模板标签使用说明. {template "content","header"} 调用根目录下phpcms\template\ ...
- CODE FESTIVAL 2017 qual B C - 3 Steps【二分图】
CODE FESTIVAL 2017 qual B C - 3 Steps 题意:给定一个n个结点m条边的无向图,若两点间走三步可以到,那么两点间可以直接连一条边,已经有边的不能连,问一共最多能连多少 ...
- 2018-7-5-dotnet-设计规范-·-抽象定义
title author date CreateTime categories dotnet 设计规范 · 抽象定义 lindexi 2018-07-05 15:48:20 +0800 2018-2- ...
- oracle函数 LPAD(c1,n[,c2])
[功能]在字符串c1的左边用字符串c2填充,直到长度为n时为止 [参数]C1 字符串 n 追加后字符总长度 c2 追加字符串,默认为空格 [返回]字符型 [说明]如果c1长度大于n,则返回c1左边n个 ...
- 在 Windows Azure 中运行SuperSocket
关键字: Windows Azure, WorkRole, InputEndPoint, 云计算, 微软云 什么是 Windows Azure? Windows Azure 是微软的云计算平台!微软的 ...
- g++ 编译单个文件和多个文件
转载:https://www.cnblogs.com/battlescars/p/cpp_linux_gcc.html 1.单个源文件生成可执行程序 下面是一个保存在文件 helloworld.cpp ...