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. bzoj 3772 精神污染 主席树+dfs序

    精神污染 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 637  Solved: 177[Submit][Status][Discuss] Descri ...

  2. Quoit Design(hdu 1007)

    题意:给n个点的坐标,求距离最近的一对点之间距离的一半.第一行是一个数n表示有n个点,接下来n行是n个点的x坐标和y坐标.实数. /* 最小点距离问题 采用分治算法,假设对于1-n的区间,我们已经求出 ...

  3. java验证身份证号码是否有效源代码

    原文:http://www.open-open.com/code/view/1420373343171 1.描述 用java语言判断身份证号码是否有效,地区码.出身年月.校验码等验证算法 2.源代码 ...

  4. Meteor check

    check方法用于检查参数或类型是否匹配模式. 安装check包 打开命令提示符窗口,并安装该软件包. C:\Users\Administrator\Desktop\meteorApp>mete ...

  5. ArcGIS Server启动服务报:ERROR: Unable to start Xvfb on any port in the range 6600 - 6619

    http://blog.csdn.net/linghe301/article/details/10094421 今天尝试在Linux环境下安装ArcGIS Server10.2,启动服务碰到一个错误: ...

  6. Zookeeper中的FastLeaderElection选举算法简述

    Zookeeper是一个开源的分布式应用协调项目, 当中为了保证各节点的协同工作,Zookeeper在工作时须要有一个Leader. 而Leader是怎样被选举出来的?Zookeep中使用的缺省算法称 ...

  7. composer-安装laravel

    laravel文档地址: https://docs.golaravel.com/docs/5.6/installation/ 我们怎么将Apache和PHP互联起来呢? http://www.cnbl ...

  8. Unity 3D 中动态字体的创建

    原创不易,转载请注明转自: http://blog.csdn.net/u012413679/article/details/26232453 ---- kosion 1.载入NGUI插件包,载入完毕后 ...

  9. UICollectionView 具体解说学习

    UICollectionView 和UITableView非常像,是APPLE公司在iOS 6后推出的用于处理图片这类UITableView 布局困难的控件,和UITableView 一样,它也有自己 ...

  10. Spring学习笔记——Spring中lazy-init与abstract具体解释

    Spring的懒载入的作用是为了避免无谓的性能开销,就是当真正须要数据的时候才去运行数据的载入操作.不只在Spring中.我们在实际的编码过程中也应该借鉴这种思想,来提高我们程序的效率. 首先我们看一 ...