VUE第十五天

我想giao啊
99 阅读2分钟

今天是2022年7月5日,是我学习vue的第十五天

啊，昨天是周一，又没学，看了看layui框架

webStorage

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2. LocalStorage存储的内容，需要手动清除才会消失。

    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

    4. JSON.parse(null)的结果依然是null。

sessionStorage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="delData()">点我删除一个数据</button>
    <button onclick="delAllData()">点我清除数据</button>
    <!-- 本地存储，游览器关闭也不会消失 -->
</body>
<script>
    let p={name:'giao',age:19}
    function saveData(){ //保存数据
        window.sessionStorage.setItem('msg','hello')
        window.sessionStorage.setItem('msg2',666)//tostring
        window.sessionStorage.setItem('person',JSON.stringify(p))
        
    }
    function readData(){ //读取数据
        //读一个没有的数据则为null
        console.log(window.sessionStorage.getItem('msg'));
        console.log(window.sessionStorage.getItem('msg2'));
        const p=sessionStorage.getItem('person')
        console.log(JSON.parse(p));//parse() 将JSON数据转换为js对象
    }
    function delData(){ //删除数据
        window.sessionStorage.removeItem('msg2')
        
    }
    function delAllData(){ //清除所有数据
        window.sessionStorage.clear()
        
    }
</script>
</html>

localStorage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="delData()">点我删除一个数据</button>
    <button onclick="delAllData()">点我清除数据</button>
    <!-- 本地存储，游览器关闭也不会消失 -->
</body>
<script>
    let p={name:'giao',age:19}
    function saveData(){ //保存数据
        window.localStorage.setItem('msg','hello')
        window.localStorage.setItem('msg2',666)//tostring
        window.localStorage.setItem('person',JSON.stringify(p))
        
    }
    function readData(){ //读取数据
        //读一个没有的数据则为null
        console.log(window.localStorage.getItem('msg'));
        console.log(window.localStorage.getItem('msg2'));
        const p=localStorage.getItem('person')
        console.log(JSON.parse(p));//parse() 将JSON数据转换为js对象
    }
    function delData(){ //删除数据
        window.localStorage.removeItem('msg2')
        
    }
    function delAllData(){ //清除所有数据
        window.localStorage.clear()
        
    }
</script>
</html>

对案例中的数据本地存储

App.vue

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 用props传输addTodo函数 -->
        <MyHeader :addTodo="addTodo"/>
        <!-- 给List传todos对象 -->
        <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></MyList>
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></MyFooter>
      </div>
    </div>
</div>
</template>

<script>
//引入组件
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  name: "App",
  components: {
    MyHeader,
    MyList,
    MyFooter,

  },
  data() {
      return {
        // todos: [
        //   { id: '001', title: '吃饭', done: true },
        //   { id: '002', title: '睡觉', done: false },
        //   { id: '003', title: '打豆豆', done: true }
        // ]//写死了的数据
        todos:JSON.parse(localStorage.getItem('todos')) || []
      };
  },
  methods: {

    //给Header组件传递addTodo函数，再通过函数调用获取函数的参数也就是todos对象数据
    addTodo(todoObj) {//添加一个todo
      // console.log('我是App组件，我收到了数据');
      this.todos.unshift(todoObj)
      // console.log('123');

    },
    //勾选或取消勾选todo
    checkTodo(id){
        this.todos.forEach((todo) => {
          if(todo.id === id) todo.done =! todo.done
      })
    },
    //删除一个todo
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => {
        return todo.id != id
      })
    },
    //全选或取消全选
    checkAllTodo(done) {
      this.todos.forEach((todo)=> {
        todo.done=done
      })
    },
    //清除所有已经完成的todo
    clearAllTodo() {
      this.todos=this.todos.filter((todo) => {
        return !todo.done
      })
    }
  },
  watch: {
    todos: {
      deep: true,//深度监视
      handler(value) {
        //每次修改将硬盘数据进行更新
        window.localStorage.setItem('todos', JSON.stringify(value));
      }
    }
  }
};
</script>

<style>
  /*base*/
  body {
    background: #fff;
  }

  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }

  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }

  .btn:focus {
    outline: none;
  }

  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

组件的自定义事件

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

avatar
文章
阅读
粉丝