Vue组件化开发小笔记及浏览器本地存储

ref 属性

1. 被用来给 元素 或 子组件 注册引用信息(ide 替代者)

2. 应用在 html 标签上获取的是真实 DOM 元素,应用在组件标签上是组件实例对象(VueComponent)

3. 使用方式:
   打标识:

   <h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
   

   获取: this.$refs.xxx

配置项 props

功能:让组件接收外部传过来的数据

1. 传递数据:

   <Demo name='xxx'/>
   

2. 接收数据:
   第一种方式(只接收):

   props:['name']
   

   第二种方式(限制类型):

   props:{
   	name:Number
   }  
   
   

   第三种方式(限制类型,限制必要性,指定默认值):

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

   注意:props 是只读的,优先级高于 data 里的参数,如果要修改传进来的 props,可以用 data 来中转接收

   myName: this.name 
   

mixin(混合/混入)

功能:可以把多个组件共用的配置提取成一个混入对象
使用方法:
第一步定义混入,例如:

export const hunhe = {
	//数据冲突时混入的数据不采用,但是生命周期冲突是两者都要且优先级高
	data(){.......},
	methods: {......},
	},
};

第二步使用混入,例如:

1. 全局混入:在 main.js 里配置-Vue.mixin(xxx)
2. 局部混入:在需要的组件里配置项-mixins:[xxx]

插件

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

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

使用方法:在 main.js 里引入,然后-Vue.use()

案例总结

1. 组件化编码流程:

   (1).拆分静态组件:组件要按功能点拆分,命名不要与html元素冲突.

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

   ​ 1).一个组件用:放在组件自身就可以.

   ​ 2).一些组件用:放在它们的共同的父组件上(状态提升).

   (3).实现交互:从绑定事件开始.

2. props适用于:

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

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

3. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为不可以直接修改props的各项值.

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

webStorage(网页存储)

1. 存储内容支持5MB(不同浏览器可能不一样)

2. 浏览器端通过 Window.localStorage 和 Window.sessionStorage 属性来实现本地存储机制.

3. 相关Api:

   (1) xxxxxStorage.setItem('key','value);

   ​ 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在就更新其对应的值.

   (2) xxxxxStorage.getItem('key');

   ​ 该方法接受一个键作为参数,返回键名对应的值.

   (3) xxxxxStorage.removeItem('key');

   ​ 该方法接受一个键名作为参数,并把该键值对从存储中删除.

   (4) xxxxxStorage.clear();

   ​ 该方法会清空存储中所有的数据

4. 备注:

   1. sessionStorage存储的内容会随着浏览器窗口关闭而消失.

   2. localStorage存储的内容,需要手动清除才消失.

   3. xxxxxStorage.getItem('key');如果key对应的value获取不到,那么getItem的返回值是null

   4. JSON.parse(null)的结果依然是null(将字符串形式的对象转换为对象)

   5. JSON.stringify将对象转换为字符串