一个实例：

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. Android Studio 引入 Fresco

    首选在build.gradle文件中配置 查看NDK路径 然后在gradle.properties文件中配置 ndk.path=C\:\\Users\\lixishuang\\AppData\\Loc ...

  2. RHEL 集群(RHCS)配置小记 -- 文档记录

    1.RHEL 6 集群配置官方管理手册 https://access.redhat.com/site/documentation/zh-CN/Red_Hat_Enterprise_Linux/6/pd ...

  3. RRDTool 三个命令的使用

    要了解rrdtool如何使用就要先从rrd的数据存储方式开始,rrdtool就是为了操作这个数据库的工具,抄来下面一段文字解释. 0x01 什么是rrd数据库 所谓的“Round Robin” 其实是 ...

  4. Java签名

    有的时候会忘记签名,想想还是在博客里面记录下,,省的我忘了还要去翻文档,哈哈: 除了boolean, long,类型其他的基本类型都是首字母大写: Java类型 类型描述符 boolean  Z ch ...

  5. HighChats报表使用C#mvc导出本地图片

    最近工作使用了HighCharts,要用到保存成图片功能,但是是内部使用,不允许连接外网,于是就学习了下highcharts生成本地图片. highcharts有一个exporting.js来负责导出 ...

  6. JSON代码小计

    //strut json配置 <package name="mall_theme_ajax" extends="json-default" namespa ...

  7. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

  8. js-DOM-页面元素的兼容性、常用事件、节点

    页面元素的兼容性: 所谓的兼容性指的就是当前浏览器是否支持当前对象的属性或是方法,如果支持就是兼容,如果不支持就是不兼容. 举个例子: /** * 设置页面标签之间的文本内容的兼容性写法 * @par ...

  9. monkeyrunner功能函数

    MonkeyRunner Command Summary 1. #导入模块;    from com.android.monkeyrunner import MonkeyRunner, MonkeyD ...

  10. MYSQL 查询出最大/最小值所在的记录

    基本上都知道用MAX()/MIN()来求出所需的最大/最小值,但是只能查出那个最值的字段,而想查出整条记录或是对应的其他值却不行(SELECT MAX(grade), name FROM test;- ...