序：目前前端框架如：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. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  2. scanf()中清除输入缓冲区的几种方法归纳

    应用场景:我们使用多个scanf()的时候,如果输入缓冲区还有数据的话,那么scanf()就不会询问用户输入,而是直接就将输入缓冲区的内容拿出来用了,这就导致了前面的错误影响到后面的内容,为了隔离这种 ...

  3. 让kindeditor显示高亮代码

    kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...

  4. 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack（131）

    上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...

  5. Hive安装配置指北（含Hive Metastore详解）

    个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...

  6. 免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）

    在生活中有一种东西几乎已经快要成为我们的另一个电子”身份证“,那就是二维码.无论是在软件开发的过程中,还是在普通用户的日常中,几乎都离不开二维码.二维码 (dimensional barcode) , ...

  7. C# 工厂模式+虚方法(接口、抽象方法)实现多态

    面向对象语言的三大特征之一就是多态,听起来多态比较抽象,简而言之就是同一行为针对不同对象得到不同的结果,同一对象,在不同的环境下得到不同的状态. 实例说明: 业务需求:实现一个打开文件的控制台程序的d ...

  8. 敏捷测试模式之Scrum及其实践

    一.    敏捷开发模式简介 敏捷是近年来软件研发领域很火的一个词,采用敏捷开发模式的研发团队是越来越多了,尤其是敏捷模式中的Scrum更是佼佼者大行其道,这表明敏捷模式确有其好处,能给企业带来效率的 ...

  9. 如何dos命令打开服务窗口？

    1.输入services.msc点击<确定>进入服务窗口.如图:

  10. 浅析SQL查询语句未显式指定排序方式，无法保证同样的查询每次排序结果都一致的原因

    本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...