序：目前前端框架如：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. Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...

  2. C语言 · Torry的困惑(基本型)

    问题描述 Torry从小喜爱数学.一天,老师告诉他,像2.3.5.7--这样的数叫做质数.Torry突然想到一个问题,前10.100.1000.10000--个质数的乘积是多少呢?他把这个问题告诉老师 ...

  3. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  4. C++随笔：.NET CoreCLR之corleCLR核心探索之coreconsole（2）

    这篇文章是上篇的续集,本文将会继续介绍coreconsole.cpp里面的逻辑.也许大家会看一些CLR的书,我承认我没有看过,因为我觉得一个人,他再NB,那也是他自己的眼光,而且说句难听的,CLR也不 ...

  5. Mybatis XML配置

    Mybatis常用带有禁用缓存的XML配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  6. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  7. 应该是Angular2的一个bug？

    为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...

  8. 项目游戏开发日记 No.0x000001

    14软二杨近星(2014551622) 既然已经决定了开发软件, 时不时就要练练手, 还要时不时的去寻找素材, 因为开发的人物设定就是DotA2里面的祈求者, 所以, 就去找了他的相关人物图片和模型, ...

  9. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  10. ASP.NET Aries DataGrid 配置表头说明文档

    DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...