vue-cli 基礎Demo使用

HelloWorld.vue 改造成自己的頁面

<template>
    <element>
        <br>
        <input v-model="msg" @keydown="doAdd($event)"/><button @click="addTitle()">添加列表</button>
        <div>{{msg}}</div>
        
        <hr>
        <br>
        
        <h3>所有列表</h3>
            <ul>
              <li v-for="item in list" v-if="!item.check">
                    <input type='checkbox' v-model="item.check" @change="saveList()"/>{{item.title}}
              </li>
            </ul>
            
        <hr>
        <br>
        
        <h3>已選列表</h3>
            <ul>
              <li v-for="(item,key) in list" v-if="item.check">
                    <input type='checkbox' v-model="item.check" @change="saveList()"/>{{item.title}}&nbsp;<button @click="del(key)">刪除</button>
              </li>
            </ul>
        
    </element>
</template>

<script>

import storage from '../model/storage.js';

console.log(storage);

export default {
  name: 'HelloWorld',
  data () {
    return { 
      visible: false,
      msg: 'hello vue',
      list: []      
    }
  },
  methods:{
    addTitle(){
        console.log(this.msg);
        this.list.push({
            title:this.msg,
            check:false
        })
        storage.set('list',this.list);
    },
    doAdd(e){
        console.log(e);
        if(e.keyCode==13){
            this.list.push({
                title:this.msg,
                check:false
            })
        }
        storage.set('list',this.list);
    },
    del(index){
        this.list.splice(index,1);//刪除index索引位置的元素
        storage.set('list',this.list);
    },
    saveList(){
        storage.set('list',this.list);
    }
  }, 
  
  
  mounted(){
    //生命鉤子函數 VUE頁面刷新就會加載
    console.log("mounted method executed");
    var storageList = storage.get('list');
    if(storageList){
        this.list = storageList;
    }
  }
}
</script>
 

2.storage  模塊 封裝緩存

var storage={
    set(key,val){
        localStorage.setItem(key,JSON.stringify(val));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
}

export default storage;