Vue2_10

Vue2_10

1、TodoList

1.自己尝试

不知道怎么子传父

<template>
  <div id="fdiv">
    <!-- 输入 -->
    <div id="d1">
        <input 
            type="text"
            placeholder="请输入你的任务名称,按回车键确认"
            @keydown.enter="add"
            v-model="val" 
            id="text"
        >
    </div>

    <!-- list -->
    <div id="d2">
        <ul>
            <li v-for="i in things" :key="i.id">
                <input type="checkbox" name="list" v-model="ok" :value="i.thing">
                {{ i.thing }}
                <button @click="deList(i)">删除</button>
            </li>
        </ul>
    </div>

    <!-- 总 -->
    <div id="d3">
        <p>
            已完成 {{over}}/ 全部{{all}}
            <button v-if="true" @click="deOver" v-show="over != 0">清除已完成事件</button>
        </p>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            val: '',
            things: [
                {id:1,thing:'打游戏'},
                {id:2,thing:'刷视频'},
                {id:3,thing:'睡大觉'},
            ],
            ok:[],
        }
    },
    methods:{
        add(){            

            console.log('已添加事件:'+this.val)
            // console.log('len:'+ this.things.length);
            const id = this.things[this.things.length-1].id + 1

            const obj = {
                id,
                thing: this.val,
            }
            this.things.push(obj)
            this.val = '';
        },
        deOver(){
            const arr = this.things.filter((a)=>{
                return this.ok.indexOf(a.thing) === -1
            })
            this.things = arr
            this.ok = []
        },
        deList(i){
            // console.log(i);

            const index = this.ok.indexOf(i.thing)
            if (index != -1){
                console.log('删除:' + this.ok[index]);
                this.ok = this.ok.filter( a => {
                    return a != this.ok[index]
                })                
            }

            const arr = this.things.filter(a => {
                return !(a === i)
            })
            this.things = arr
        }
    },
    computed:{
        all(){
            return this.things.length
        },
        over(){
            return this.ok.length
        }
    },
}
</script>

2.看了视频后

2.1 App

<template>
  <div>
	<AddList :addThing="addThing"></AddList>
	<MyList :things='things' :NotOk="NotOk" :deThing="deThing"></MyList>
	<AllValueVue 
		:things='things' 
		:deThing="deThing" 
		v-show="things.length > 0" 
		:all="all">
	</AllValueVue>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
import AddList from './components/AddList.vue';
import AllValueVue from './components/AllValue.vue';
import MyList from './components/MyList.vue';

export default {	
	components:{
		AddList,
		AllValueVue,
		MyList
	},
	data() {
		return {
			things:[
				{id:'001',thing:'打游戏',ok:true},
				{id:'002',thing:'刷视频',ok:false},
				{id:'003',thing:'打个盹',ok:true},
			],
		}
	},
	methods:{
		// 取反ok
		NotOk(ok){
			// console.log(`ok改变:${ok}`);
			this.things[ok].ok = !this.things[ok].ok
		},
		// 添加事件
		addThing(thing){
			this.things.push({id:nanoid(),thing,ok:false})
		},
		// 删除单个事件
		deThing(id,a=confirm('确定删除吗?')){
			// console.log('@@');
			
			if (a) {
				this.things = this.things.filter((th)=>{
				if (th.id == id) {
					console.log('删除:',th.thing);
					return 0
				}
				else return 1
				})
			}
			
		},
		// 全选全不选
		all(okk){
			this.things.forEach(th => {
				th.ok = okk
			})
		},
		
	},
	
}
</script>

<style>

</style>

2.2 MyThing

<template>
    <span>
        {{thing.thing}}
        <button @click="deThing(thing.id)">删除</button>
    </span>
</template>

<script>
export default {
    props:['thing','deThing'],
}
</script>

<style>

</style>

2.3 MyList

<template>
    <div>
        <div v-for="thing,index in things" :key="thing.id">
            <input type="checkbox" :checked="thing.ok" @click="NotOk(index)">
            <MyThing :thing="thing" :deThing="deThing"></MyThing>
        </div>
    </div>
</template>

<script>
import MyThing from './MyThing.vue';
export default {
    components:{MyThing},
    props:['things','NotOk','deThing'],

    // mounted(){
    //     console.log(this.things);
    // }
}
</script>

<style>

</style>

2.4 AllValue

<template>
    <div>
        <input type="checkbox" :checked="things.length === over.overs" @click="okk">
        已完成{{over.overs}}/{{things.length}}全部
        <button @click="over.de">清除已完成事件</button>
    </div> 
</template>

<script>
export default {
    props:['things','deThing','all'],
    computed:{
        over(){
            // 已完成的数组
            const overThings = this.things.filter((th)=>{
                return th.ok
            })
            // console.log(overThings);
            
            // 已完成个数
            const overs = overThings.length

            // 删除已完成
            const de = ()=>{
                overThings.forEach(th => {
                    this.deThing(th.id,true)
                });
            }

            return {overs,de}
        },
    },
    methods:{
        // 全选全不选
        okk(e){
            // 或者在data里创一个 okk，然后watch
            // 又或者在computed set一下，但我忘了
            // console.log(e.target.checked);       
            
            this.all(e.target.checked)
        }
    },
}
</script>

<style>

</style>

2.5 AddList

<template>
    <div>
        <input
            type="text"
            placeholder="请输入事件，回车添加"
            v-model="value"
            @keydown.enter="add"
        >
    </div>
</template>

<script>
export default {
    data() {
        return {
            value:'',
        }
    },
    props:['addThing'],
    methods:{
        // 添加属性
        add(){
            this.addThing(this.value)
            console.log(`添加:${this.value}`);
            this.value = ''
        }
    }
}
</script>

<style>

</style>

3.id 生成器包

1.uuid

2.nanoid

这个是uuid的迷你版，传进来一个函数，调用就生成一个id

2、webStorage

浏览器存储数据, 比如: 搜索记录

1.localStorage 本地存储

1.1 setItem

添加一条数据

localStorage.setItem('msg','hello!!!')

(参数1: key, 参数2: 数据)

注: 参数2不管输入啥都是 字符串

放对象:

• 普通

  localStorage.setItem('person1',p)
  // '[object Object]' 相当于对象调了 toString()
  

• 正确 : JSON.stringify

  localStorage.setItem('person',JSON.stringify(p))
  

1.2 getItem

读取一条数据

// 返回值是读取的数据
console.log(localStorage.getItem('msg'))

又是对象 :

const result = localStorage.getItem('person')
// 变成了字符串, 使用 JSON.parse 解析
console.log(JSON.parse(result))

如果对象为{} , 变量和输出都是 null

1.3 removeItem

移除数据

localStorage.removeItem('msg')

1.4 clear

清除所有数据

localStorage.clear()

2.sessionStorage 会话存储

和 localStorage 的方法 完全一致，唯一不同就是 localStorage 关闭浏览器不会删除，这个关闭浏览器会删除

3.总结们

1. 存储大小一般是 5MB，但是不同浏览器可能会不一样

2. sessionStorage 会在关闭浏览器的时候会被清除

3. localStorage 只有在使用清除相关的API时才会被清除，或者清除浏览器缓存

4. 如果set了多个同一个名字，会变成一个同一个数组