html

    <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'>
<ul>
<li v-for="(item,index) in items" is="todo-list" v-bind:info="item" v-on:remove="removeItem(index)"></li>
</ul>

js

 /*todo-list demo*/
Vue.component('todo-list',{
props:['info'],
template:'<li>{{info}}<button v-on:click="$emit(\'remove\')">remove</button></li>'
}) var app=new Vue({
el:'#app',
data:{
todoItem:'',
items:['item1','item2','item3','item4','item5']
}
});

vue demo todo-list的更多相关文章

  1. 两个Vue Demo

    1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 第 2 篇:上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  3. Framework7+vue demo

    最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,

  4. vue环境的搭建与第一个demo

    参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...

  5. vue之综合Demo:打沙袋

    demo7.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1 ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  8. Vue.js 实战教程(附demo)

    在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...

  9. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. 在RedHat 5下安装Oracle 10g详解(转)

    在RedHat 5下安装Oracle 10g详解(转) Posted on 2012-09-14 13:26 疯狂 阅读(5075) 评论(0)  编辑  收藏 所属分类: database .uni ...

  2. java Web项目Service层通用接口和entityVo对象与entity对象转化问题的解决方案

    Service层的接口中有一些比较常用方法,一次又一次的在新的Service层中被书写,所以懒惰的程序员又烦了,他们决定写个通用接口来解决这个问题. 有些项目中,实体类即承担接收表单数据的任务,又承担 ...

  3. SpringBoot 配置 @PropertySource、@ImportResource、@Bean

    一.@PropertySource @PropertySource:加载指定的配置文件 @PropertySource(value = {"classpath:person.properti ...

  4. [Android] 随时拍图像处理部分总结及源码分享

    http://blog.csdn.net/eastmount/article/details/45492065#comments [Android] 图像各种处理系列文章合集 http://blog. ...

  5. ASP.NET状态保持cookie与session

    ASP.Net状态保持 一.ASP.Net中的状态保持如下图:   二.客户端的状态保持方案     ViewState.隐藏域.Cookies.控件状态.URL查询参数      ->View ...

  6. P2839 畅通工程

    P2839 畅通工程 题目描述 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连, ...

  7. PostgreSQL 9.3.1 中文手册(解决关键词报错的问题)

    http://www.postgres.cn/docs/9.3/sql-keywords-appendix.html

  8. Java实现敏感词过滤代码

    原文:http://www.open-open.com/code/view/1445762764148 import java.io.BufferedReader; import java.io.Fi ...

  9. Windows下C/C++连接mysql数据库的方法

    步骤 安装MySQL数据库 项目属性页->C/C++->常规->附加包含目录:xxx\mysql Server 5.6\include 项目属性页->链接器->常规-&g ...

  10. Could not find leader nimbus

    运行storm ui, 然后访问storm ui 的网页的时候,死活跑不起来.后面,根据下面这篇文章的说法, 停止zookeeper 之后,删掉zookeeper 上面的storm 节点, 然后再重启 ...