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的更多相关文章
-
两个Vue Demo
1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
-
第 2 篇:上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
-
Framework7+vue demo
最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,
-
vue环境的搭建与第一个demo
参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...
-
vue之综合Demo:打沙袋
demo7.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1 ...
-
Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
-
Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
-
Vue.js 实战教程(附demo)
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...
-
Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
随机推荐
-
log level
ALL < DEBUG < INFO < WARN < ERROR < FATAL < OFF
-
使用dSYM分析App崩溃日志
前言 我们在开发App过程中,因为连接到控制台,所以遇到问题会很容易找到问题代码.但是对于线上的App出现Crash的时候,我们不可能通过这种方式,也不现实,所以我们只能通过收集Crash信息,来解决 ...
-
Microsoft.CSharp.CSharpCodeProvider
Microsoft.CSharp.CSharpCodeProvider MSDN 提供对 C# 代码生成器和代码编译器的实例的访问.类提供可用来检索 C# ICodeGenerator 和 ICode ...
-
Android 常用的常量
常用的Android常量 1.Activity Action 字符串常量("android.intent.action."+) 描述ALL_APPS ...
-
Less的学习(一)
1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
-
API基础开发学习网址
http://www.cnblogs.com/shanyou/category/307401.html http://www.cnblogs.com/beginor/archive/2012/03/1 ...
-
Golang安装与命令
1. 安装 Windows - https://golang.org/dl/ 下载msi安装包,点击安装即可.安装后cmd运行go version弹出版本号即安装成功. 2. 命令行 生成exe文件 ...
-
chrony 时间同步服务器
这篇文章也不错: https://www.zfl9.com/chrony.html 简介 chrony是网络时间协议(NTP)的多用途实现.它可以使系统时钟与NTP服务器.参考时钟(例如GPS接收器) ...
-
SQLSERVER CTE表 row_number()字段 BUG
当CTE中 引用的子视图的字段用了 row_number() over等那么有可能造成row_number() 的对应关系出错的问题 所以CTE row_number() over 排序字段 必须 ...
-
Activiti工作流与BPMN2.0规范
本章内容根据BPMN2.0规范的分类划分为以下部分: 1.启动与结束事件(event) 2.顺序流(Sequence Flow) 3.任务(Task) 4.网关(Gateway) 5.子流程(Subp ...