一个实例：

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. Java核心知识点学习----多线程并发之线程间的通信,notify,wait

    1.需求: 子线程循环10次,主线程循环100次,这样间隔循环50次. 2.实现: package com.amos.concurrent; /** * @ClassName: ThreadSynch ...

  2. c# 程序检测日志输出的类

    public class LogWrite     {         public LogWrite()         {             //             // TODO:  ...

  3. AngularJs 返回上一页

    html <script src="lib/angular/angular-1.4.9/angular.js"></script> <script s ...

  4. IOS 进度条与手势

    //进度条#import "ViewController.h" @interface ViewController () { UIImageView* _animaImageV; ...

  5. Echarts动态加载后台数据

    注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...

  6. 生成树的个数——基尔霍夫定理（Matrix-Tree Theorem）

    树有很多种形态,给定结点个数,求生成不同形态二叉树的个数,显然要用到Catalan数列. 那如果给定一个图(Graph)\(G=(V,E)\),要求其最小生成树G',最好的方法莫过于Prim或Krus ...

  7. iOS 图片压缩

    + (UIImage *)scaleFromImage:(UIImage *)image {    CGSize newSize = CGSizeMake(366, 366);   //目标图片的大小 ...

  8. C++ 无法将值写入注册表 HKEY_LOCAL_MACHINE\Sofeware\Microsoft\Windows\CurrentVersion\Run，以实现开机自启动应用程序。

    C++  无法将值写入注册表 HKEY_LOCAL_MACHINE\Sofeware\Microsoft\Windows\CurrentVersion\Run,以实现开机自启动应用程序.但可以写入到H ...

  9. （并查集）~APTX4869（fzu 2233）

    http://acm.fzu.edu.cn/problem.php?pid=2233 Problem Description 为了帮助柯南回到一米七四,阿笠博士夜以继日地研究APTX4869的解药.他 ...

  10. Install nutch

    1. Install nutch on single node: $apt-get install subversion $apt-get install ant $svn co https://sv ...