【初始化脚手架+ref属性+props配置+mixin混入+插件+scoped样式+组件化编码流程+Todo-list案例+浏览器本地存储+TodoList本地存储】

1 初始化脚手架

• Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
• Vue脚手架官方文档：https://cli.vuejs.org/zh/
• 安装脚手架步骤：
  1> 安装node.js，安装完成后可使用npm -v检验是否安装成功
  2> 配置npm淘宝镜像npm config set registry http://registry.npmmirror.com
  
  3> (仅第一次执行)：全局安装@vue/cli
  在命令行中运行命令npm install -g @vue/cli
  等待安装完成，重新打开cmd，输入vue，发现不报错了
  4> 切换到你要创建项目的目录(此时要创建到桌面上)，然后使用命令Vue create vue_test创建项目(vue_test为自定义的项目名)
  
  
  
  
  
  5> 将第一个网址复制下来粘贴到一个新建标签页中，可得到组件：
  
  
  6> 终止Vue项目
• 分析脚手架结构：
  
  
  
  
  
  
  
  
  
• render函数：

关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别：
	(1) vue.js是完整版的Vue，包含：核心功能+模板解析器
	(2) vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

• 修改默认配置：
  
  vue.config.js配置文件:
  1> 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2> 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2 ref属性

• 被用来给元素或子组件注册引用信息（id的替代者）
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
• 使用方式：
  1> 打标识：<h1 ref="xxx">.....</h1>或<School ref="xxx"></School>
  2> 获取：this.$refs.xxx
• School.vue代码：

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
    export default {
    name:'School',
    data() {
        return {
            name:'霍格沃兹魔法学院',
            address:'苏格兰高地'
        }
    }
}
</script>

<style>
    .school {
        background-color: gray;
    }
</style>

• App.vue代码：

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch" />
  </div>
</template>

<script>
    // 引入School组件
    import School from './components/School.vue' 
    
    export default {
        name:'App',
        components:{School},
        data() {
          return {
            msg:'欢迎学习Vue！'
          }
        },
        methods: {
          showDOM() {
            console.log(this.$refs.title); // 获取到真实DOM元素
            console.log(this.$refs.btn); // 获取到真实DOM元素
            console.log(this.$refs.sch); // 获取到School组件的实例对象(vc)
          }
        }
    }
</script>

3 props配置

• 功能：让组件接收外部传过来的数据
• 传递数据：<Demo name="xxx"/>
• 接收数据：
  1> 第一种方式（只接收）：props:['name']
  2> 第二种方式（限制类型）：props:{name:String}
  3> 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
    	type:String, //类型
        required:true, //必要性
        default:'老王' //默认值
	}
}

• 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
• Student.vue代码：

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{myAge+1}}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
    export default {
    name:'Student',
    data() {
        return {
            msg:'我是一名毕业生',
            myAge:this.age
        }
    },
    methods: {
      updateAge() {
        this.myAge++
      }
    },
    // 简单声明接收
    // props:['name','sex','age']

    // 接收的同时对数据进行类型限制
    /* props: {
      name:String,
      age:Number,
      sex:String
    } */

    // 接收的同时对数据进行：类型限制+默认值的指定+必要性的限制(最完整的写法)
    props:{
      name:{
        type:String, // name类型是字符串
        required:true // name是必要的
      },
      age:{
        type:Number, // age类型是字符串
        default:99 // 默认值 age可传可不传，若不传，则给默认值99
      },
      sex:{
        type:String, // sex类型是字符串
        required:true // sex是必要的
      },
    }
}
</script>

• App.vue代码：

<template>
  <div>
    <!-- 加冒号是因为此处需要数值类型的，冒号是v-bind的简写 -->
    <Student name="小王" sex="女" :age="22"/> 
    <!-- <Student name="小刘" sex="男" age="29"/> -->
  </div>
</template>

<script>
    // 引入Student组件
    import Student from './components/Student.vue' 
    
    export default {
        name:'App',
        components:{Student},
    }
</script>

4 mixin混入

• 功能：可以把多个组件共用的配置提取成一个混入对象
• 使用方式：

1> 第一步定义混合：
{
	data(){....},
	methods:{....}
   	....
}

2> 第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

• mixin.js代码：

// 使用分别暴露
export const hunhe = {
    methods: {
        showName() {
          alert(this.name)
        }
      }
}

• School.vue代码：

<template>
  <div>
    <h2 @click="showName">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
  // 引入一个混合
  import {hunhe} from '../mixin.js'

  export default {
    name:'School',
    data() {
      return {
        name:'霍格沃兹魔法学院',
        address:'苏格兰高地'
      }
    },
    /* methods: {
      showName() {
        alert(this.name)
      }
    } */
    // 应用混合(局部混入)
    mixins:[hunhe]
}
</script>

• Student.vue代码：

<template>
  <div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  // 引入一个混合
  import {hunhe} from '../mixin.js'
  export default {
    name:'Student',
    data() {
      return {
        name:'小王',
        sex:'女'
      }
    },
    /* methods: {
      showName() {
        alert(this.name)
      }
    } */
    // 应用混合
    mixins:[hunhe]
}
</script>

• main.js代码：

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'

// import {hunhe} from './mixin.js'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 全局混入
// Vue.mixin(hunhe)

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})

5 插件

• 功能：用于增强Vue
• 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
• 定义插件：

对象.install = function (Vue, options) {
	// 1. 添加全局过滤器
    Vue.filter(....)
    
    // 2. 添加全局指令
    Vue.directive(....)
    
    // 3. 配置全局混入(合)
    Vue.mixin(....)
    
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

• 使用插件：Vue.use()
• plugins.js代码：

export default {
    install(Vue) {
        // console.log('@@@install',Vue);

        // 全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        // 全局自定义指令
        Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){ // eslint-disable-line no-unused-vars 
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            }
        })

        // 给Vue原型上添加一个方法(vm和vc就都能用了)
        Vue.prototype.hello = () => {alert('你好啊')}
    }
}

• main.js代码：

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import plugins from './plugins'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 应用插件
Vue.use(plugins)

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})

• School.vue代码：

<template>
  <div>
    <h2>学校名称：{{name | mySlice}}</h2> <!-- 使用全局过滤器 -->
    <h2>学校地址：{{address}}</h2>
    <button @click="test">点我测试一下hello方法</button>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
        name:'霍格沃兹魔法学院',
        address:'苏格兰高地'
      }
    },
    methods:{
      test() {
        this.hello()
      }
    }
  }
</script>

• Student.vue代码：

<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <input type="text" v-fbind:value="name"> <!-- 此时文本框上有小王且获取了焦点 -->
  </div>
</template>

<script>
  export default {
    name:'Student',
    data() {
      return {
        name:'小王',
        sex:'女'
      }
    }
  }
</script>

6 scoped样式

• 作用：让样式在局部生效，防止冲突。
• 写法：<style scoped>
• School.vue代码：

<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2 class="qwe">学校地址：{{address}}</h2>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
        name:'霍格沃兹魔法学院',
        address:'苏格兰高地'
      }
    }
  }
</script>

<style lang="less" scoped>
  .demo {
    background-color: pink;
    .qwe {
      font-size: 40px;
    }
  }
</style>

• Student.vue代码：

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  export default {
    name:'Student',
    data() {
      return {
        name:'小王',
        sex:'女'
      }
    }
  }
</script>

<style scoped>
  .demo{
    background-color: orange;
  }
</style>

• App.vue代码：

<template>
  <div>
    <h1 class="test">你好啊</h1>
    <School />
    <hr />
    <Student />
  </div>
</template>

<script>
    // 引入Student组件
    import Student from './components/Student.vue' 
    // 引入School组件
    import School from './components/School.vue'


    
    export default {
      name:'App',
      components:{School, Student},
    }
</script>

<style scoped>
  .test {
    color:red
  }
</style>

7 组件化编码流程(通用)

• 1.实现静态组件：抽取组件，使用组件实现静态页面效果
• 2.展示动态数据：
  2.1. 数据的类型、名称是什么？
  2.2. 数据保存在哪个组件？
• 3.交互——从绑定事件监听开始

8 Todo-list案例

• 添加一个todo:
  
• 勾选or取消勾选一个todo:
  

8.1 App.vue代码

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addTodo="addTodo"/>
        <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/> <!--传递数据-->
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
      </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:true},
          {id:'003',title:'健身',done:false}
        ]
      }
    },
    methods:{
      // 添加一个todo
      addTodo(todoObj) {
        // console.log('我是App组件，我收到了数据：',x);
        this.todos.unshift(todoObj)
      },
      // 勾选or取消勾选一个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
        })
      },
      // 全选or取消全选
      checkAllTodo(done) {
        this.todos.forEach((todo)=>{
          todo.done = done
        })
      },
      // 清除所有已经完成的todo
      clearAllTodo() {
        this.todos = this.todos.filter((todo)=>{
          return !todo.done
        })
      }
    }
  }
</script>

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

  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 5px;
    margin-left: 285px;
    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>

8.2 MyHeader.vue代码

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        props:['addTodo'],
        data() {
            return{
                title:''
            }
        },
        methods: {
            add() {
                // 校验数据
                if(!this.title.trim()) return alert('输入不能为空') // 如果输入为空 敲回车就没反应 trim()去掉前后空格
                // console.log(e.target.value);
                // 将用户的输入包装成为一个todo对象
                const todoObj = {id:nanoid(),title:this.title,done:false}
                // console.log(todoObj)
                // 通知App组件去添加一个todo对象
                this.addTodo(todoObj)
                // 清空输入
                this.title = ''
            }
        }
    }
</script>

<style scoped>
    /*header*/
    .todo-header input {
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }

    .todo-header input:focus {
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>

8.3 MyList.vue代码

<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todoObj in todos" 
            :key="todoObj.id" 
            :todo="todoObj" 
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        /> <!--遍历数组并且传递数据-->
    </ul>
</template>

<script>
    import MyItem from './MyItem.vue'

    export default {
        name:'MyList',
        components: {MyItem},
        props:['todos','checkTodo','deleteTodo'] // 接收数据
    }
</script>

<style scoped>
    /*main*/
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>

8.4 MyItem.vue代码

<template>
    <li>
        <label>
            <!-- 写法一 -->
            <!-- <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>  :checked="true" 给input指定一个checked选项，如为true,拥有checked,如为false,则没有checked-->
            <!-- 写法二 -->
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
            <!-- 写法三 此写法直接合并后两项 不用App插件将数据传给MyList再传给MyItem 不推荐此写法 因为props是只读的 不建议修改-->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',
        // 声明接收todo对象
        props:['todo','checkTodo','deleteTodo'],
        methods:{
            // 勾选or取消勾选
            handleCheck(id) {
                // console.log(id);
                // 通知App组件将对应的todo对象的done值取反
                this.checkTodo(id)
            },
            // 删除
            handleDelete(id) {
                // confirm根据用户的交互 确定布尔值为真还是假
                if(confirm('确定删除吗？')) {
                    // console.log(id);
                    this.deleteTodo(id)
                }
            }
        }
    }
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #ddd;
    }

    li:hover button {
        display: block;
    }
</style>

8.5 MyFooter.vue代码

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="doneTotal === total"/> -->
            <!-- 写法一 -->
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            <!-- 写法二 -->
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <!-- <span>已完成{{doneTotal}}</span> / 全部{{todos.length}} -->
            <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'MyFooter',
        props:['todos','checkAllTodo','clearAllTodo'],
        computed:{
            total() {
                return this.todos.length
            },
            doneTotal() {
                /* const x =  this.todos.reduce((pre,current)=>{
                    console.log('@',pre,current)
                    return pre + (current.done ? 1 : 0)
                },0)
                console.log('###',x); */
                // 简写为：
                return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
            },
            // 写法一
            /* isAll() {
                return this.doneTotal === this.total && this.total > 0
            }, */
            // 写法二
            isAll: {
                get(){
                    return this.doneTotal === this.total && this.total > 0
                },
                set(value){
                    this.checkAllTodo(value)
                }
            }
        },
        methods: {
            /* checkAll(e) {
                // console.log(e.target.checked);
                this.checkAllTodo(e.target.checked)
            } */

            clearAll() {
                this.clearAllTodo()
            }
        }
    }
</script>

<style scoped>
    /*footer*/
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer; /* 网页浏览时用户鼠标指针的样式或图形形状为一只手 */
    }
</style>

8.6 TodoList案例总结

• 组件化编码流程：
  1> 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
  2> 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
  ① 一个组件在用：放在组件自身即可。
  ② 一些组件在用：放在他们共同的父组件上（状态提升）。
  3> 实现交互：从绑定事件开始。
• props适用于：
  1> 父组件 --> 子组件 通信
  2> 子组件 --> 父组件 通信（要求父先给子一个函数）
• 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
• props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

9 浏览器本地存储

• localStorage和sessionStorage统称为webStorage。
• 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
• 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
• 相关API：
  1> xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
  2> xxxxxStorage.getItem('person');该方法接受一个键名作为参数，返回键名对应的值。
  3> xxxxxStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除。
  4> xxxxxStorage.clear()该方法会清空存储中的所有数据。
• 备注：
  1> SessionStorage存储的内容会随着浏览器窗口关闭而消失。
  2> LocalStorage存储的内容，需要手动清除才会消失。
  3> xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
  4> JSON.parse(null)的结果依然是null。

<!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>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空一个数据</button>

    <script>
        let p = {name:'张三',age:18}

        function saveData() {
            // window.localStorage.setItem('msg','Hello!')
            localStorage.setItem('msg','Hello!')
            localStorage.setItem('msg2',666)
            localStorage.setItem('person',p)
            localStorage.setItem('person1',JSON.stringify(p))
        }
        function readData() {
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));
            console.log(localStorage.getItem('person'));
            console.log(localStorage.getItem('person1'));
            
            const result = localStorage.getItem('person1')
            console.log(JSON.parse(result));
        }
        function deleteData() {
            localStorage.removeItem('msg2')
        }
        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>
</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>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空一个数据</button>

    <script>
        let p = {name:'张三',age:18}

        function saveData() {
            // window.sessionStorage.setItem('msg','Hello!')
            sessionStorage.setItem('msg','Hello!')
            sessionStorage.setItem('msg2',666)
            sessionStorage.setItem('person',p)
            sessionStorage.setItem('person1',JSON.stringify(p))
        }
        function readData() {
            console.log(sessionStorage.getItem('msg'));
            console.log(sessionStorage.getItem('msg2'));
            console.log(sessionStorage.getItem('person'));
            console.log(sessionStorage.getItem('person1'));
            
            const result = sessionStorage.getItem('person1')
            console.log(JSON.parse(result));
        }
        function deleteData() {
            sessionStorage.removeItem('msg2')
        }
        function deleteAllData() {
            sessionStorage.clear()
        }
    </script>
</body>
</html>

10 TodoList本地存储

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addTodo="addTodo"/>
        <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/> <!--传递数据-->
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
      </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:JSON.parse(localStorage.getItem('todos')) || []
      }
    },
    methods:{
      // 添加一个todo
      addTodo(todoObj) {
        // console.log('我是App组件，我收到了数据：',x);
        this.todos.unshift(todoObj)
      },
      // 勾选or取消勾选一个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
        })
      },
      // 全选or取消全选
      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) {
          localStorage.setItem('todos',JSON.stringify(value))
        }
      }
    }
  }
</script>

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

  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 5px;
    margin-left: 285px;
    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>