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. /etc/fstab readyonly 解决办法

    阿里云主机切换地区强制升级后,“新的磁盘盘符识别为vdb1,但是在/etc/fstab中记录的挂载信息还是旧的xvdb1,导致磁盘挂载失败” 机子启动出错了. 按提示 输入 root的密码,进入以Re ...

  2. 安装Android SDK(东软开源镜像介绍)

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...

  3. CentOS6 Install kafka

    https://www.cnblogs.com/caoguo/p/5958608.html

  4. python学习之-- 协程

    协程(coroutine)也叫:微线程,是一种用户态的轻量级线程,就是在单线程下实现并发的效果.优点:1:无需线程上下文切换的开销.(就是函数之间来回切换)2:无需原子操作锁定及同步的开销.(如改一个 ...

  5. python学习之 - 时间模块

    时间模块模块名:time时间模块的转换流程图. UTC:英国格林威治时间.时间戳作用:是用来进行时间计算的.进行加减时间.注意:时间计算是用秒为单位time.process_time():测量处理器运 ...

  6. 学习日常笔记<day17>jdbc基础

    1.jdbc入门 1.1.jdbc定义 使用java代码发送sql语句的技术就是jdbc技术 1.2.使用jdbc发送sql前提 需要登录数据库服务器(数据库的IP地址,端口,数据库用户名,密码) / ...

  7. HDU 4786 Fibonacci Tree(生成树,YY乱搞)

    http://acm.hdu.edu.cn/showproblem.php? pid=4786 Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others ...

  8. Django学习系列之request对象

    先来一个简单的实例 urls.py from django.conf.urls import url from django.contrib import admin from cmdb import ...

  9. Linux 的 Socket IO 模型

    前言 之前有看到用很幽默的方式讲解Windows的socket IO模型,借用这个故事,讲解下linux的socket IO模型: 老陈有一个在外地工作的女儿,不能经常回来,老陈和她通过信件联系. 他 ...

  10. JAVA_the user operation is waiting怎么办

    彻底解决 MyEclipse出现the user operation is waiting的问题   2011-05-31 10:32:30|  分类: 软件编程 |  标签:java  myecli ...