文档章节

vue-todolist-example学习

writeademo
 writeademo
发布于 2017/03/16 11:16
字数 102
阅读 218
收藏 0

<!DOCTYPE html>
<html>

<head>
    <title>todos-add-remove</title>
    <meta charset="utf-8">
</head>

<body>
    <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:title="todo" v-on:remove="todos.splice(index,1)">
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
    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: [
                'Do the dishes',
                'Take out the trash',
                'WOw the lawn'
            ]
        },
        methods: {
            addNewTodo: function() {

                this.todos.push(this.newTodoText);
                this.newTodoText = '';
            }
        }


    })
    </script>
</body>

</html>

 

© 著作权归作者所有

writeademo
粉丝 27
博文 681
码字总数 256388
作品 0
东城
私信 提问
Vue2.5去哪儿网App开发实战(二) - Vue 起步

本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。 1 hello world 下载安装 2-3 开发TodoList(v-model...

JavaEdge
02/13
0
0
Vue 系列二 之 猛龙行动之绝密代码

Create by jsliang on 2019-1-2 08:46:46 Recently revised in 2019-1-10 08:19:41 Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习折腾的动力!GitHub 地址 关...

jsliang
01/14
0
0
vue3.0尝鲜 -- 摒弃Object.defineProperty,基于 Proxy 的观察者机制探索

写在前面: 11月16日早上,Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性,其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制,取代之前使用...

nightZing
2018/12/06
0
0
React + Antd实现简单的todolist

工作中使用vue居多,今天使用 react 来实现一个简易版的 todolist,顺便熟悉一下antd。 项目地址 1. 使用create-react-app创建项目 2. 安装antd并配置按需加载和less 安装antd 2.引入 react-...

新页2018
05/01
0
0
前端框架的图形化探索方向一个尝试, Respo Composer - 知乎

之前参加活动的时候想起一个问题, 怎么样才能让设计做出的稿子能更多被前端复用. 特别是在代码方面. 应该说设计工具已经包含了前端界面的大量信息, 编写代码包含相当多的重复劳动的. 但这是一...

边城的编程
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
40分钟前
5
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
57分钟前
96
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0
正则表达式基础(一)

1.转义 转义的作用: 当某个字符在表达式中具有特殊含义,例如字符串引号中出现了引号,为了可以使用这些字符本身,而不是使用其在表达式中的特殊含义,则需要通过转义符“\”来构建该字符转...

清自以敬
今天
4
0
idea中@Data标签getset不起作用

背景:换电脑以后在idea中有@data注解都不生效 解决办法:idea装个插件 https://blog.csdn.net/seapeak007/article/details/72911529...

栾小糖
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部