序：目前前端框架如：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. boost强分类器的实现

    boost.cpp文件下: bool CvCascadeBoost::train( const CvFeatureEvaluator* _featureEvaluator, int _numSampl ...

  2. 第一个shell脚本

    打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好. #!/bin/bash echo "Hello World !" &quo ...

  3. log4net使用手册

    1. log4net简介 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.Java平台下,它还 ...

  4. 后缀数组的倍增算法（Prefix Doubling）

    后缀数组的倍增算法(Prefix Doubling) 文本内容除特殊注明外,均在知识共享署名-非商业性使用-相同方式共享 3.0协议下提供,附加条款亦可能应用. 最近在自学习BWT算法(Burrows ...

  5. 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)

    今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...

  6. 修改MySQL默认字符集编码

    好记心不如烂笔头,很多东西当时没记下来,过了就忘了,下次用到时又得浪费好多时间才能解决.今天又遇到修改MySQL默认字符集编码的问题,折腾了半天解决了,赶快记录下来,以后就不用每次折腾了. 查看MyS ...

  7. 《CPU的工作过程》

    本文转载自inter官方网址:https://software.intel.com/zh-cn/articles/book-Processor-Architecture_CPU_work_proces ...

  8. [转]nopCommerce Widgets and How to Create One

    本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one A widget is a sta ...

  9. EasyPR--开发详解（4）形态学操作、尺寸验证、旋转等操作

    在上一篇深度分析与调优讨论中,我们介绍了高斯模糊,灰度化和Sobel算子.在本文中,会分析剩余的定位步骤. 根据前文的内容,车牌定位的功能还剩下如下的步骤,见下图中未涂灰的部分. 图1 车牌定位步骤 ...

  10. 深入解析js异步编程利器Generator

    我们在编写Nodejs程序时,经常会用到回调函数,在一个操作执行完成之后对返回的数据进行处理,我简单的理解它为异步编程. 如果操作很多,那么回调的嵌套就会必不可少,那么如果操作非常多,那么回调的嵌套就 ...