一个实例：

html:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Vuejs</title>

    <style>

        .finished {

            text-decoration: underline;

        }

    </style>

</head>

<body>

<div id="demo">

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

    <!-- v-model随表单控件的不同而不同 -->

    <input type="text" v-model="newItem" @keyup.enter="addNew"/>

    <ul>

        <li v-for="item in items" :class="{finished: item.isFinished}"

                @click="toggleFinish(item)">

            {{item.label}}

        </li>

    </ul>

</div>

<script src="jquery-3.1.0.min.js"></script>

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

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

</body>

</html>

js:

var demo = new Vue({

    el: '#demo',

    data: function () {

        return {

            title: 'this is a todo list',

            items: [

                /*{

                    label: 'coding',

                    isFinished: false

                },

                {

                    label: 'walking',

                    isFinished: true

                }*/

            ],

            newItem: '',

            liClass: 'thisIsLiClass'

        };

    },

    methods: {

        doSomething: function () {

            console.log(this.a);

        },

        toggleFinish: function (item) {

            item.isFinished = !item.isFinished; // 布尔值取反

        },

        addNew: function () {

            this.items.push({

                label: this.newItem,

                isFinished: false

            });

            this.newItem = '';

        }

    }

});

用localstorage来存储todolist

html:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Vuejs</title>

    <style>

        .finished {

            text-decoration: underline;

        }

    </style>

</head>

<body>

<div id="demo">

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

    <!-- v-model随表单控件的不同而不同 -->

    <input type="text" v-model="newItem" @keyup.enter="addNew"/>

    <ul>

        <li v-for="item in items" :class="{finished: item.isFinished}"

                @click="toggleFinish(item)">

            {{item.label}}

        </li>

    </ul>

</div>

<script src="jquery-3.1.0.min.js"></script>

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

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

</body>

</html>

js:

var demo = new Vue({

    el: '#demo',

    data: function () {

        return {

            title: 'this is a todo list',

            items: JSON.parse(window.localStorage.getItem('todolist') || '[]'),

            newItem: '',

            liClass: 'thisIsLiClass'

        };

    },

    methods: {

        doSomething: function () {

            console.log(this.a);

        },

        toggleFinish: function (item) {

            item.isFinished = !item.isFinished; // 布尔值取反

        },

        addNew: function () {

            this.items.push({

                label: this.newItem,

                isFinished: false

            });

            this.newItem = '';

        }

    },

    watch: {

        items: {

            handler: function (items) {

                window.localStorage.setItem('todolist', JSON.stringify(items));

            },

            deep: true

        }

    }

});

localStorage.setItem('todotype', '1');

//console.log(localStorage.getItem('todotype'));

查看localStorage：

vue.js（二）的更多相关文章

  1. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  2. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  3. vue.js 二 路由懒加载

    当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...

  4. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

  5. 一天带你入门到放弃vue.js(一)

    写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...

  6. 前端知识(一)04 Vue.js入门-谷粒学院

    目录 一.介绍 1.Vue.js 是什么 2.初识Vue.js 二.基本语法 1.基本数据渲染和指令 2.双向数据绑定 3.事件 4.修饰符 5.条件渲染 6.列表渲染 7.实例生命周期 一.介绍 1 ...

  7. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  8. vue.js+socket.io+express+mongodb打造在线聊天[二]

    vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...

  9. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  10. Python学习二十八周（vue.js）

    一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. 关于git新建本地分支与远程分支关联问题

    背景 新建本地分支并推送到远端后,当前分支没有与远端分支关联,每次推送都需要填写一堆信息. 操作 git branch --set-upstream-to=origin/20160928 切换到本地分 ...

  2. php SPL常用接口

    在PHP中有好几个预定义的接口,比较常用的四个接口(Countable.ArrayAccess.Iterator.IteratorAggregate(聚合式aggregate迭代器Iterator)) ...

  3. python学习之路-day3

    本节内容 1.集合操作 2.文件操作 3.字符编码与转码 4.函数 ==================================== 一.集合操作 集合是一个无序的,不重复的数据组合,它的主要 ...

  4. dropbear

    生成ssh连接所需要的公钥,如下: /usr/bin/dropbearkey -t dss -f /etc/dropbear/dropbear_dss_host_key     (dss加密,长度默认 ...

  5. UVAL1277_Cops and Thieves

    单源点汇点无向图,要阻隔某个点的流量,必须在一个点上消耗一定的价值,问你能否在消耗价值不超过k的前提下,阻隔源点到汇点的流量. 直接对于有权值的点拆点,拆后边容量即为点权.其余的点的容量无穷,最大流即 ...

  6. web form 复合控件

    DropDownList 下拉列表 会被编译为select option ps.name 服务端常用,id 客户端常用 一般用法: 一.将数据放进去 方法一:同WinForm相同,给定数据源,然后绑定 ...

  7. HTTP 头部

      通用头域(即通用头) 通用头域包含请求和响应消息都支持的头域,通用头域包含Cache-Control. Connection.Date.Pragma.Transfer-Encoding.Upgra ...

  8. step by step 之餐饮管理系统五(Util模块)------附上篇日志模块源码

    这段时间一直在修改日志模块,现在基本上写好了,也把注释什么的都加上了,昨天邮件发送给mark的园友一直报失败,老是退回来,真是报歉,如下图所示:

  9. C++ 多重集的使用

    C++ 多重集的使用 多重集当中的数据映射关系将不是前面的一对一的关系,而是一对多,也就是可以在容器当中插入具有相同key的实例.关于组织方式,LZ进行了下面的大胆的预测. 第一.底层的数据组织方式如 ...

  10. STL源码--iterator和traits编程技法

    第一部分 iterator学习 STL iterators定义: 提供一种方法,使之能够依序巡访某个聚合物(容器)所含的各个元素,而又无需暴露该聚合物的内部表达方式. 任何iteartor都应该提供5 ...