实现效果如下：

把玩了添加和删除功能，代码如下：

index.html：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Template • TodoMVC</title>

        <link rel="stylesheet" href="node_modules/todomvc-common/base.css">

        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">

        <!-- CSS overrides - remove if you don't need it -->

        <link rel="stylesheet" href="css/app.css">

    </head>

    <body>

        <section class="todoapp" id="app">

            <header class="header">

                <h1 v-on:click="f">{{ title }}</h1>

                <form>

                    <input @keyup.enter="add" v-model="text" class="new-todo" placeholder="What needs to be done?" autofocus>

                </form>

            </header>

            <!-- This section should be hidden by default and shown when there are todos -->

            <section class="main">

                <input id="toggle-all" class="toggle-all" type="checkbox">

                <label for="toggle-all">Mark all as complete</label>

                <ul class="todo-list">

                    <!-- These are here just to show the structure of the list items -->

                    <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->

                    <li class="completed">

                        <div class="view">

                            <input class="toggle" type="checkbox" checked>

                            <label>Taste JavaScript</label>

                            <button class="destroy" ></button>

                        </div>

                        <input class="edit" value="Create a TodoMVC template">

                    </li>

                    <li class="editing">

                        <div class="view">

                            <input class="toggle" type="checkbox">

                            <label>Buy a unicorn</label>

                            <button class="destroy"></button>

                        </div>

                        <input class="edit" value="Rule the web">

                    </li>

                    <li v-for="todo in todos">

                        <div class="view">

                            <input class="toggle" type="checkbox" v-model="todo.completed">

                            <label>{{ todo.text }}</label>

                            <button class="destroy" v-on:click="destory(todo.text)"></button>

                        </div>

                        <input class="edit" value="Rule the web">

                    </li>

                </ul>

            </section>

            <!-- This footer should hidden by default and shown when there are todos -->

            <footer class="footer">

                <!-- This should be ` items left` by default -->

                <span class="todo-count"><strong></strong> item left</span>

                <!-- Remove this if you don't implement routing -->

                <ul class="filters">

                    <li>

                        <a class="selected" href="#/">All</a>

                    </li>

                    <li>

                        <a href="#/active">Active</a>

                    </li>

                    <li>

                        <a href="#/completed">Completed</a>

                    </li>

                </ul>

                <!-- Hidden if no completed items are left ↓ -->

                <button class="clear-completed">Clear completed</button>

            </footer>

        </section>

        <footer class="info">

            <p>Double-click to edit a todo</p>

            <!-- Remove the below line ↓ -->

            <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>

            <!-- Change this out with your name and url ↓ -->

            <p>Created by <a href="http://todomvc.com">you</a></p>

            <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>

        </footer>

        <!-- Scripts here. Don't remove ↓ -->

        <!-- <script src="node_modules/todomvc-common/base.js"></script> -->

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

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

    </body>

</html>

app.js:

(function (window) {

    'use strict';

    // Your starting point. Enjoy the ride!

    var todos = [

        {text: '吃饭', completed: true},

        {text: '睡觉', completed: false},

        {text: '相亲', completed: true},

    ]

    new Vue({

        el: '#app',

        data: {

            title: '思思时钟',

            todos: todos,

            text: ''

        },

        methods: {

            f: function() {

                window.alert('思思，你好');

            },

            // 添加

            add: function() {

                //  在vue应用程序中的方法内部可以通过this来访问当前应用程序的上的data中的成员

                // window.alert(this.text);

                // 由于改变了数据成员，使用v-for指定的地方就会重新渲染，修改模型，就会修改视图界面

                // 修改了视图界面就会修改模型数据

                if (this.text.trim().length === ) {

                    return;

                }

                this.todos.push({

                    text: this.text,

                    completed: false

                });

                this.text = '';

            },

            // 删除

            destory: function(text) {

                // console.log(text);

                var that = this;

                this.todos.find(function(todo, index) {

                    if (todo.text === text) {

                        that.todos.splice(index, );

                    }

                });

            }

        }

    });

})(window);

对Vue突然开始产生了很大的兴趣，思思打算把玩Vue了哟，哈哈

Vue.js学习TodoMVC小Demo的更多相关文章

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

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

  2. vue.js学习系列-第一篇

    VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...

  3. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  4. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  8. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. Jquery “This”的指向

    JavaScript中的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时当前对象的this指向的是win ...

  2. MybatisX idea 快速开发插件

    一.idea安装MybatisX 1.按ctrl+alt+s,弹出Settings 2.在plugins中搜索MybatisX,安装即可 3.点击操作重启idea 二.操作说明 1.业务层点击小鸟进入 ...

  3. How to Fix Broken Packages in Ubuntu

    How to Fix Broken Packages in Ubuntu By Nick Congleton – Posted on Jan 11, 2019 in Linux   Apt, Ubun ...

  4. mongodb mongod.lock文件及oplog文件

    在mongodb的启动时,在数据目录下,会生成一个mongod.lock文件.如果在正常退出时,会清除这个mongod.lock文件,若要是异常退出,在下次启动的时候,会禁止启动,从而保留一份干净的一 ...

  5. 068_不登陆虚拟机,修改虚拟机网卡 IP 地址

    #!/bin/bash #该脚本使用 guestmount 工具,Centos7.2 中安装 libguestfs-tools-c 可以获得 guestmount 工具#脚本在不登陆虚拟机的情况下,修 ...

  6. CF837D Round Subset 动态规划

    开始的时候数据范围算错了~ 我以为整个序列 2 和 5 的个数都不超过 70 ~ 一个非常水的 dp code: #include <bits/stdc++.h> #define M 75 ...

  7. NetworkX系列教程(8)-Drawing Graph

    小书匠Graph图论 如果只是简单使用nx.draw,是无法定制出自己需要的graph,并且这样的graph内的点坐标的不定的,运行一次变一次,实际中一般是要求固定的位置,这就需要到布局的概念了.详细 ...

  8. payOrder

    parent <script> export default class Parents extends wepy.page { data = { tabdata:{}, //下面要用这里 ...

  9. 利用 make_plan 规划起点到目标点的路径，并且发布出去

    geometry_msgs::PoseStamped Start; Start.header.seq = ; Start.header.stamp = Time(); Start.header.fra ...

  10. Vuex学习心得

    最近公司项目中使用Vuex做状态管理,就全面温习了一遍文档,然后在项目使用中遇到一些常见问题就一一总结下. 一.由来 我们知道Vue中数据是自顶向下单向流动的,但是以下两种情况单向数据流实现起来十分繁 ...