数据合集localStorage的存储,读取,删除 localStorage存储但有时value为一个对象Object

webStorage 存储5M左右

localStorage的存储,读取,删除

localStorage存储

window.localStorage.setItem('key',value)

但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为
{object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式
传入Object

window.localStorage.setItem('param',JOSON.stringfy(Object))

通过JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储

localStorage读取

window.localStorage.getItem('key')

相对的在读取json格式字符串只有我们也无法直接使用,需要将它转换为josn对象之后才是我们想要的结果,所以我们需要调用JSON.parse()方法来进行转化,
之后在继续使用

JSON.parse(window.localStorage.getItem('key'))

localStorage删除

window.localStorage.removeItem('key')

localStorage清空所有的key

清空所有的本地存储数据

window.localStorage.clear()

LocalStorage和sectionStorage的区别，后者关闭浏览器数据就消失，前者需要手动删除

Vue数据绑定

- 用于解决页面与data中数据同步问题

可以在Vue文档中搜索表单输入绑定章节查看

单向数据绑定：就是数据只能从data流向页面；其语法为指令语法，以v-前缀的特殊属性，用于解析标签(绑定事件)

//单向绑定
<input type="text"  v-bind:value="name">

双向数据绑定：用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
负责监听用户的输入事件以更新数据(改内存的数据，页面同步发生变化)
v-model会忽略所有表单元素的初始值,将 Vue 实例的数据作为数据来源,在组件的 data 选项中声明初始值。

输入类元素基本用法

文本框-input

<input v-model="message" placeholder="edit me">\
<p>Message is: {{ message }}</p>

export default{
    data:(){
        return{
          message:'hi'
        }
    }
}

多行文本框-textarea

<textarea v-model="message" placeholder="add multiple lines"/>

复选框-checkbox

爱好：{{x}}
<label>
<input type="checkbox" v-model="x" :value:'1'>
<span>抽烟</span>
</label>
<label>
<input type="checkbox" v-model="x" :value:'2'>
<span>喝酒</span>
</label>
<label>
<input type="checkbox" v-model="x" :value:'3'>
<span>烫头</span>
</label>

export default{
    data:(){
        return{
          x:[]
        }
    }
}

单选框-radio

你想要：{{x}}
<label>
<input name:"want" type="radio" v-model="x" :value:'1'>
<span>抽烟</span>
</label>
<label>
<input name:"want" type="radio" v-model="x" :value:'2'>
<span>喝酒</span>
</label>
<label>
<input name:"want" type="radio" v-model="x" :value:'3'>
<span>烫头</span>
</label>

export default{
    data:(){
        return{
          x:''
        }
    }
}

选择框-select

你想要：{{x}}
<hr/>
<select v-model="x">
  <option value=""> - </option>
  <option v-for="item in array" :value="item.value" :key="item.value">
  {{item.text}}
  </option>
</select>  

export default{
    data:(){
        return{
          array:[
            {text:'抽烟',value:1},
            {text:'喝酒',value:2},
            {text:'烫头',value:3}
          ]
        }
    }
}

表单-form(提交元素，比如用户名和密码)

登陆
<hr>
<form @submit.prevent="onSubmit">
<label>
<span>用户名</span>
  <input type="text" v-model="user.username"/>
</label>
<span>密码</span>
  <input type="password" v-model="user.password"/>
</label>
<button type="submit">提交</button>
</form>

export default{
    data:(){
        return{
          user:{
            username:'',
            password:''
          }
        }
    },
    methods:{
      onSubmit(){
        console.log(this.user);
      }
    }
}

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。添加 lazy 修饰符，转为在 change 事件之后进行同步

<input type="text" v-model.lazy="user.username"/>

.number

自动将用户的输入值转为数值类型

.trim

自动过滤用户输入的首尾空白字符

v-model详解

v-model是 v-bind：value(可以简写为:value)和v-on：input的语法糖
原生的input v-on:input = "xxx = $event.target.value"
自定义的input v-on:input = "xxx = $event"

//绑定value等于user.username，让user.username = $event.target.value
  <input type="text" :value="user.username" 
                     @input="user.username = $event.target.value" />
  
  <input type="text" v-model="user.username"/>

自己封装一个input

<template>
  <div>
     <input :value="_value" @input="_value = $event.target.value"/>
     //可以简写为
     <input v-model="_value"/>
  </div>
</template>

<script>
export default {
    name:'MyInput',
    props:{
      value:{
        type:String
      }
    },
    computed:{
     _value:{
        get(){
          return this.value
        },
        set(newValue){
          this.$emit("input",newValue)
        }
     }
    }
}
</script>

<template>
  <div>
     <input :value="value" @input="$emit("input",$event.target.value)"/>
     //可以简写为
     <input v-model="value"/>
  </div>
</template>

<script>
export default {
    name:'MyInput',
    props:{
      value:{
        type:String
      }
    }
}
</script>

Ant Design of Vue

是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品

$ yarn add ant-design-vue

import Antd from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd)

数据合集