本地存储完成

huang303513 · huang303513 · commit 37a7e289513e · 2016-09-30T16:42:49.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+DS_Store
diff --git a/vuejs入门基础/.gitignore b/vuejs入门基础/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/vuejs入门基础/my-second-vue-project/src/App.vue b/vuejs入门基础/my-second-vue-project/src/App.vue
@@ -1,79 +1,82 @@
 <template>
   <div id="app">
-      <h1 v-text="title"></h1>
-      <input v-model="newItem" v-on:keyup.enter="addNew">
-      <ul>
-          <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
-              {{item.label}}
-          </li>
-      </ul>
+    <h1 v-text="title"></h1>
+    <input v-model="newItem" v-on:keyup.enter="addNew">
+    <ul>
+      <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
+        {{item.label}}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
-import Store from './store'
+  import Store from './store'
+  export default {
+    data: function () {
+      return {
+        title: 'this is a todo list',
+        items: Store.fetch(),
+        newItem: '',
+        liClass: 'thisisliClass'
 
-
-export default {
-    data:function(){
-        return { 
-            title:'this is a todo list',
-            items:[
-            {label:'coding',isFinished:false
-            },{
-            label:'walking',isFinished:true
-            }],
-            newItem:'',
-            liClass:'thisisliClass'
-        };
+      };
     },
-    methods:{
-        toggleFinish:function(item){
-            item.isFinished = !item.isFinished;
-        },
-        addNew:function(){
-            this.items.push({
-                label:this.newItem,
-                isFinished:false,
-            });
-            this.newItem = '';
+    watch:{
+        items:{
+            handler:function(items){
+                Store.save(items);
+            },
+            deep:true
         }
+    },
+    methods: {
+      toggleFinish: function (item) {
+        item.isFinished = !item.isFinished;
+
+      },
+      addNew: function () {
+        this.items.push({
+          label: this.newItem,
+          isFinished: false,
+        });
+        this.newItem = '';
+      }
     }
-}
+  }
 </script>
 
 <style>
-.finished {
+  .finished {
     text-decoration: underline;
-}
-
+  }
 
-html {
-  height: 100%;
-}
+  html {
+    height: 100%;
+  }
 
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
 
-#app {
-  color: #2c3e50;
-  margin-top: -100px;
-  max-width: 600px;
-  font-family: Source Sans Pro, Helvetica, sans-serif;
-  text-align: center;
-}
+  #app {
+    color: #2c3e50;
+    margin-top: -100px;
+    max-width: 600px;
+    font-family: Source Sans Pro, Helvetica, sans-serif;
+    text-align: center;
+  }
 
-#app a {
-  color: #42b983;
-  text-decoration: none;
-}
+  #app a {
+    color: #42b983;
+    text-decoration: none;
+  }
 
-.logo {
-  width: 100px;
-  height: 100px
-}
+  .logo {
+    width: 100px;
+    height: 100px
+  }
 </style>
