序：目前前端框架如：vue、react、angular，构建工具fis3、gulp、webpack等等......

可谓是五花八门，层出不穷，眼花缭乱。。。其实吧只要你想玩还是可以玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todo list.感觉确实方便~！~

预览戳这里

vuejs官方:http://cn.vuejs.org/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>todolist-vue</title>

    <script src="src/vue.js"></script>

    <style>

        *{

            list-style: none;

            outline: none;

            border: none;

        }

        #app{

            font-family: 'Avenir', Helvetica, Arial, sans-serif;

            -webkit-font-smoothing: antialiased;

            -moz-osx-font-smoothing: grayscale;

            text-align: center;

            color: #2c3e50;

        }

        .app{

            width: 90%;

            margin: 0 auto;

            background: #c5c5c5;

            padding: 5%;

            border: 1px solid #000;

            margin-top: 10px;

        }

        .app li.finished{

            text-decoration: line-through;

        }

        .typeInput input{

            width: 70%;

            font-size: 24px;

            border: 1px solid #000;

            padding-left:5px;

        }

    </style>

</head>

<body>

    <div id="app" class="app">

        <h1 v-text='title'></h1>

        <p class='typeInput'>

            <input type="text" v-model='newText' v-on:keyup.enter='addNewlist'>

        </p>

        <ul>

            <li v-for='item in items' v-bind:class='{finished:item.isFinished}' v-on:click='toggleFinish(item)'>{{item.text}}</li>

        </ul>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                title:'My todo list',

                items:[

                    {

                        text:'Learn CSS',

                        isFinished:true

                    },

                    {

                        text:'Learn javascript',

                        isFinished:false

                    }

                ],

                newText:''

            },

            methods:{

                toggleFinish:function(item){

                    // console.log(item.isFinished);

                    item.isFinished=!item.isFinished;

                },

                //3、输入后按enter键盘的事件

                addNewlist:function(){

                    var _self=this;

                    //3.1 如果不为空就将刚刚输入的内容以对象的形式，追加到items数组对象内部，

                    //默认新追加的是没完成的为false

                    if(_self.newText){

                        _self.items.push({

                            text:_self.newText,

                            isFinished:false

                        });

                    }

                    // console.log(_self.newText);

                    // console.log(this);

                    //3.2 同时清空input输入框

                    _self.newText='';

                }

            }

        });

    </script>

</body>

</html>

目前只能输入按entry追加一个选项，未完待续...

vue.js几行实现的简单的todo list的更多相关文章

  1. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  3. 搭建Vue.js环境，建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. vue.js使用echarts一分钟简单入门

    图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echa ...

  5. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  6. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  7. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  8. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  9. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

随机推荐

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. 【翻译】MongoDB指南/CRUD操作（一）

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(一) 主要内容:CRUD操作简介,插入文档,查询文档. CRUD操作包括创建.读取.更新和删 ...

  3. JavaScript 开发规范

    本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...

  4. MVC Core 网站开发（Ninesky） 1、创建项目

    又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...

  5. ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法

    在对ASP.NET Core管道中关于依赖注入的两个核心对象(ServiceCollection和ServiceProvider)有了足够的认识之后,我们将关注的目光转移到编程层面.在ASP.NET ...

  6. ZKWeb网页框架1.1正式发布

    发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.1.md 主要改动 添加EFC ...

  7. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  8. (转) 将ASP.NET Core应用程序部署至生产环境中（CentOS7）

    原文链接: http://www.cnblogs.com/ants/p/5732337.html 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Cor ...

  9. php安装threads多线程扩展

    php5.3或以上,且为线程安全版本.apache和php使用的编译器必须一致.通过phpinfo()查看Thread Safety为enabled则为线程安全版.通过phpinfo()查看Compi ...

  10. Linux下的C Socket编程 -- server端的继续研究

    Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...