目录
1、xxxStorage.setItem('key','value')
3、xxxStorage.removeItem('key')
localStorage或者sessionStorage区别
ref属性
用来实现组件间的通信
1、他是被用来给元素或者子组件注册应用信息的(id的替代者)
2、他应用在html标签上的时候获取的是真实的DOM元素,应用在组件标签上的时候,获取的是组件实例对象,这个要千万注意
使用方式
定义
<h1 ref="xxxx></h1>
<Student ref = "xxxx"></Student>
获取
this.$refs.xxxx
props配置
他的用途就是:可以使我们的组件接收到外部传过来的数据,进而展现到页面处理
传递数据
<组件名 name=“xxxx”/>
接收数据
1)只进行接收
props:['name']
2)限制数据类型
props:{
name:String
}
3)指定默认值、限制类型、必要性的校验
props:{
name:{
type:String, // 确定要限制的类型
required:true, // 必要性的校验
default:'董sb' // 指定默认值
}
}
注意:
1、props他是一个只读的,Vue底层他会对你props修改进行监视的,当我们怼他进行了修改操作,那么Vue就会对我们在控制台发出一个警告信息。
2、如果我们的业务确定必须要进行修改操作,那么我们就需要将props的内容复制到data中保留一份,最终我们是要修改data中的数据来实现修改的目的。
mixin(混入)
他的作用就是,把我们多个组件的共有的配置提取到了一个混入对象中,供我们使用。
使用方法
1、定义
{
data(){……},
methods:{……}
……
}
2、使用
两种使用方式,分别如下:
1)、局部使用混入:mixins:['xxxx']
2)、全局使用混入:Vue.mixin(xxxx)
插件
插件他是用来增强Vue的。他本质上就是包含了install方法的一个对象而已,install的第一个参数就是Vue,后面的自定义参数就是插件的使用者要传递的数据参数了。
定义
对象.install = function(Vue,opetions){
// 添加一下全局的过滤器(可以没有)
Vue.filter(……)
// 添加一下全局的指令(可以没有)
Vue.directive(……)
// 可以配置全局的混入
Vue.mixin(……)
// 可以添加我们的示例方法
Vue.prototype.$myMethod=function(){……}
Vue.prototype.$myProperty = xxxx
}
如何使用
这里使用其实就更加方便了,只需在我那要用的地方引入插件并且调用即可
import xxxx
Vue.use(xxxx)
scoped样式配置
他的作用就是,使我们的样式在局部生效,并且不会产生冲突。
前面讲到了组件之后,就有很多同学会疑惑,假如在两个组件中定义了相同名字的样式类,那么谁会起作用呢?
这个问题其实很好回到,样式覆盖,就是谁后引入的,就显示谁的样式。
这样如果有两个相同的不就会冲突或者覆盖了吗,这就用到了这个主角scoped了。
使用方式就是在我们组件的style后面加上scoped就可以了,如下:
<style scoped></style>
本地存储
本地存储又被称作webStorage。它存储的内容大小大概支持5M左右(不同的浏览器他有不一样的支持)。
浏览器会通过Window.sessionStorage和Window.localStorage的属性方法来实现我们浏览器的本地存储机制。
API
下面通过xxx可以替换为localStorage或者sessionStorage来实现两种存储
1、xxxStorage.setItem('key','value')
这个方法他是接收一个键值对,通过其来添加到交到存储中的, 如果这个时候key存在他会更新,不存在的话新增。
2、xxxStorage.getItem(‘key’)
这个方法接收到了一个键,他作为参数,返回这个键所对应的value值
3、xxxStorage.removeItem('key')
这个方法接收到了一个键,他作为参数,然后把这个键对应的value值在存储中删除
4、xxxStorage.clear()
这个方法他的目的就是清空存储中的所有数据。
localStorage或者sessionStorage区别
1、浏览器通过SessionStorage储存的内容会伴随着浏览器的窗口关闭操作而消息
2、浏览器通过LocalStorage存储的内容,他是需要我们手动清除,这样才会消失的
3、xxxStorage.getItem(xxx)的时候,如果xxx对应的value获取不到value的时候,那么getItem他返回的值就是null
4、JSON.parse(null)得到的结果依然是一个null。
关于Vue中的配置、属性、本地存储以及插件,我们就到这里。
欢迎大家点击下方卡片,扫描关注《coder练习生》