vue入门学习知识要点总结（六），Vue在脚手架的使用，scoped属性、案例总结、webstorage

接上一篇文章继续总结Vue的入门知识，这里主要是关于vue在脚手架中的使用和理解scoped、案例总结、webstorage

Vue在脚手架中的使用

scoped样式

vue文件中的style可以配置scoped属性，当配置时，该文件的CSS样式就只能作用于当前的组件，即让样式在局部生效，防止组件间的污染。

使用方法：<style scoped>

实现原理：通过PostCSS转译实现，给该组件中的所有dom添加了个独特的动态属性，然后，给CSS选择器额外添加对应的属性选择器来选择该组件中dom，使得样式只作用于含有该属性的dom，即组件内部dom。

//代码模拟展示
//转译前
<template>
  <div class="demo">hello</div>
</template>

<script></script>

<style scoped>
.demo {
  color: red;
}
</style>

//转译后
<template>
  <div class="demo" data-v-5051822a>hi</div>
</template>

<script></script>

<style>
.demo[data-v-5051822a] {
  color: red;
}
</style>

备注：

可以在定义一个含有scoped属性的style标签时，再定义一个不含有scoped属性的style标签。实现在一个vue组件中定义一个全局的style标签，一个含有作用域的style标签

推荐方法，不使用scoped，结合scoped原理，自己给外层的dom上添加唯一的class来区分，如前缀等。

总结TodoList开发案例

1. 组件化编码流程：

   ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

   ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

   ​ 1).一个组件在用：放在组件自身即可。

   ​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。

   ​ (3).实现交互：从绑定事件开始。

2. props适用于：

   ​ (1).父组件 ==> 子组件 通信

   ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

   例如在父组件中定义一个删除函数，deleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )}，然后通过props传给子组件，子组件在自身的函数方法里再调用父组件传过来的方法函数。

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

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。

本文参考了vue官方文档和尚硅谷张天禹老师的vue教程及资料。

欢迎交流