<div id="todo-list-example">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div> Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
}) new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})

todos Vue的更多相关文章

  1. vue父子通信

    首先在组件创建中创建子组件Todos.vue <template> <div class="hello"> <h1>todos show< ...

  2. Vue作用域插槽:用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  3. vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递

    1,子子组件  TodoItem.vue     <template>   <div class="todo-item" :class="{'is-co ...

  4. vue - 子组件向父组件 传递方法和参数

    1,子组件 TodoItem.vue  : <template>   <div class="todo-item" :class="{'is-compl ...

  5. [Vuex] Split Vuex Store into Modules using TypeScript

    When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...

  6. [Vuex] Perform Async Updates using Vuex Actions with TypeScript

    Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous ...

  7. [Vuex] Create a Vuex Store using TypeScript

    A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In t ...

  8. Nuxt使用Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网 ...

  9. 框架入门经典项目TodoMVC

    一.项目介绍 ①地址:http://todomvc.com/ ②GitHub下载模板 ③通过npm下载模板的样式 ④通过npm下载Vuejs ⑤项目文件,主要修改app.js和index.html两个 ...

随机推荐

  1. 深入浅出RxJava就这一篇就够了

    前言: 第一次接触RxJava是在前不久,一个新Android项目的启动,在评估时选择了RxJava.RxJava是一个基于事件订阅的异步执行的一个类库.听起来有点复杂,其实是要你使用过一次,就会大概 ...

  2. Android 自己收集的开源项目集合(持续更新 2018.2.5)

    2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...

  3. ElasticSearch调优问题

    1. 近期遇到一个ES内存居高不下的问题,查了查,发现ES有个fielddata,当你发起一个查询,分析字符串的聚合将会被加载到 fielddata,如果这些字符串之前没有被加载过.如果结果中 fie ...

  4. ylbtech-LanguageSamples-PythonSample

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-PythonSample 1.A,示例(Sample) 返回顶部 本示例演示如何使用 C ...

  5. http 使用curl发起https请求报错的解决办法

    使用curl发起https请求的时候报错:“SSL certificate problem, verify that the CA cert is OK. Details: error:1409008 ...

  6. automake连载--Linux下使用autoconfig automake进阶

    http://blog.csdn.net/shanzhizi/article/details/30247325 前言:       这次task,我大概用了4天的时间去完成.四天的时间内,我不停地去查 ...

  7. Python进阶---python strip() split()函数实战(转)

    先看一个例子: >>> ipaddr = 10.122.19.10 File "", line 1 ipaddr = 10.122.19.10 ^ SyntaxE ...

  8. spring下载和安装

    下载和安装Spring请按例如以下步骤进行.   (1)登录网站,下载Spring的最新稳定版本号.最新版本号为spring-framework-4.0.建议下载spring-framework-sp ...

  9. 【Python 数据分析】module 'numpy' has no attribute 'array'

    安装好Numpy模块后,开始做了几个小测试都可以运行,但是当我创建numpy.py这个文件后 numpy.py import numpy y = numpy.array([[11,4,2],[2,6, ...

  10. 7.12归来赛_B

    Prime Judge 时间限制 1000 ms 内存限制 65536 KB 题目描写叙述 众所周知.假设一个正整数仅仅能被1和自身整除,那么该数被称为素数.题目的任务非常easy.就是判定一个数是否 ...