day06

1.localStorage,sessionStorage的用法,深度监听
2.vue生命周期,事件监听
3.vant-ui视配

生命周期图示

一、数据持久化

localStorage
sessionStorage
//1.设置缓存
sessionStorage.setItem()
//2.获取缓存
sessionStorage.getItem()
//使用localStorage+watch实现一个todoList
>Tips:localStorage只能设置字符串

<template>
  <div class="home">
    <h2>todoList</h2>
    <input type="text" v-model="keyword" @keyup.enter="handleEnter" />
    <div v-for="item of arr" :key="item.word">
      <input type="checkbox" v-model="item.checked" />
      {{item.word}}
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      keyword: "",
      arr: []
    };
  },
  /* [{word:"vue",checked:false},{word:"react",checked:false}] */
  methods: {
    handleEnter() {
      /* localStorge值只能是字符串 JSON.stringify JSON.parse  */
      this.arr.push({ word: this.keyword, checked: false });
      var words = JSON.parse(localStorage.getItem("words"));
      words.push({ word: this.keyword, checked: false });
      localStorage.setItem("words", JSON.stringify(words));
    }
  },
  mounted() {
     //有缓存则取缓存,没有缓存设置缓存
    let words = localStorage.getItem("words");
    if (words) {
      this.arr = JSON.parse(words);
    } else {
      localStorage.setItem("words", "[]");
    }
  },
  watch: {
    arr: {
      handler(newVal) {
        var words = JSON.parse(localStorage.getItem("words"));
        words = newVal;
        localStorage.setItem("words", JSON.stringify(words));
      },
      deep: true
    }
  }
};
</script>

二、生命周期+事件监听

<template>
  <div class="about">
    <h1 ref="dom">This is an about page</h1>
    <input type="text" v-model="msg">
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:"hello world"
    }
  },
  beforeCreate(){
    console.log(this.msg)
    console.log("组件被创建之前")
  },
  created () {
    console.log(this.msg)
    console.log(this.$refs.dom)
    console.log("组件已经被创建好了");
  },
  /* 组件被装载到真实DOM元素之前 */
  beforeMount(){
    console.log("组件被装载之前")
  },
  mounted(){
    console.log(this.$refs.dom)
    console.log("组件被装载到DOM上")
    window.addEventListener("scroll",this.go)
  },
  /* data的数据更新,update生命周期函数会触发 */
  beforeUpdate(){
    console.log("beforeUpdate")
  },
  updated(){
    console.log("updated")
  },
  beforeDestroy(){
    console.log("组件销毁之前")
  },
  destroyed(){
    window.removeEventListener("scroll",this.go)
    console.log("组件销毁的时候")
  },
  methods:{
    go(){
      console.log(1)
    }
  }
}
</script>

三、vant-ui实现视配

//3-1 安装依赖
yarn add postcss-pxtorem amfe-flexible
//3-2 main.js引入依赖
import 'amfe-flexible/index.js'
//3-3 postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

Tips：public/index.html 一定要加上视口