vue快速入门（二十五）本地存储与初始化使用

news2024/12/23 0:19:05

注释很详细，直接上代码

新增内容

本地获取数据
数据存储到本地

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
    <div>
      姓名：
      <input type="text" v-model="msg.name">
    </div>
    <div>
      年龄：
      <input type="text" v-model="msg.age">
    </div>
  </div>
  
    <!-- 导入vue的js代码：不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          //从本地获取数据，没有获取到，就使用默认内容
          msg: JSON.parse(localStorage.getItem('msg')) || {
            name: '张三',
            age: 18
          }
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          
        },
        watch:{// 侦听器
         msg:{          
          deep:true,
          handler(val){
            // 将数据保存到本地
            localStorage.setItem('msg',JSON.stringify(val))
          }
         }
        }
      })
    </script>
</body>

</html>