一个实例：

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. PHP--目录处理

    __file___ dirname(): dirname()与__file__的组合:dirname(__file__)

  2. Java学习笔记14--动态代理

    InvocationHandler接口 public interface InvocationHandler{ public Object invoke(Object proxy,Method met ...

  3. 如何通过maven ，将本地jar 安装到仓库中去。

    场景: 现在很多公司,都有 maven 的私服 ,在maven项目中,基本上有两个仓库 ,一个是maven的公共仓库,一个是私服仓库: 有的时候,我们download 别人的代码的时候,pom文件中报 ...

  4. Linux命令小结：fdisk

    查看分区信息 分区信息包括容量.扇区数目.柱面数目.磁头数目和IO大小等信息. root@cvm:/# fdisk -l /dev/sda7 Disk /dev/sda7: 441.8 GB, 441 ...

  5. servers中添加server时，看不到运行环境的选择。

    servers中添加server时,看不到运行环境的选择. 主要原因是tomcat目录中的配置文件格式不对.

  6. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

  7. 关于GP的理解

    连续式中,CMMI有5个GG:阶段式只有3个.多出来的2个GG,一个对应的是阶段4的量化,一个是阶段5的持续优化,确保了阶段式和连续式在范围上的一致性. GG就是讲各个过程中的共有元素抽取出来,形成的 ...

  8. Java集合的运算之减法A-B

    import com.sun.media.sound.SoftSynthesizer; import java.util.*;   public class a123 { public static ...

  9. document.write()

    以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉 ...

  10. centos使用jexus支持php小记录

    安装php(文章参考http://linuxdot.net/bbsfile-3132) yum install php 1)修改“/etc/php.ini”文件(有的位置在/etc/php5/cgi/ ...