props配置项，scoped样式，localStorage和sessionStorage

props配置项

?# 1 使用方式一
props: ['msg'], # ?基本用法，没有限制类型

#2 ?使用方式二 中级用法，有限制类型
props: {
? ? ?msg: {
? ? ? ?type: String, //类型
? ? ?}
? ?},?
# 3 使用方式三：高级用法，有限制类型，限制是否必填，加默认值
? props: {
? ? msg: {
? ? ? type: String, //类型
? ? ? required: true, //必要性
? ? ? default: '老王' //默认值
? ? }

混入

# 功能：可以把多个组件共用的配置提取成一个混入对象
?? ?created,methods,data.....??
? ??
# 举个栗子：记录用户查看每个页面所用时间（停留）
?? ?全局每个页面都要写东西：
? ? ?? ?beforeCreate：启动一个定时器，每隔1s向后端发送一次请求
? ? ? ? destroyd：中销毁定时器

#如何使用？
?? ?1 新建 mixin/index.js
? ? 2 写代码：能写的配置项：
? ? ?? ?data，methods,watch....
? ? 3 在组件中局部使用（如果有多个，在数组中继续追加即可）
? ? ?? ?import common from "@/common";
? ? ? ? export default {
? ? ? ? ? name: 'HomeView',
? ? ? ? ??? ?mixins: [common],
? ? ? ? }
? ? 4 全局使用：main.js中
? ? ? ? # 使用全局混入
? ? ? ? import common from '@/common'
? ? ? ? Vue.mixin(common)
? ? ? ? # Vue.mixin(common1) // 使用多个混入
? ? ? ??? ? ??
? ?5 以后再在组件中写 data，methods，新的不会影响，如果跟混入一样的会使用当前组件中得

插件

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

#2 咱们见过的第三方 vue的插件：
?? ?vue-router
? ? vuex
? ? elementui
?? ?

#3 补充：python 中和js中往类中放属性
class Person:
? ? ?pass
Person.name='lqz'
p=Person()
print(p.name)

# js中
new Vue() ?# Vue类
Vue.prototype.$name='lqz' # 往类中加属性,跟python有些区别
# this.$router # this代指Vue实例
this.$name ? ?# 从对象中取

# 4 自定义插件
?? ?-1 plugins/index.js,写入代码
? ? ? ? export default {
? ? ? ? ? ? install(Vue) {
? ? ? ? ? ? ? ? console.log('######' + Vue)
? ? ? ? ? ? ? ? # 用插件干什么？
? ? ? ? ? ? ? ? # 1 设置全局变量--以后可以把axios做成全局，每个组件都直接使用this.$http
? ? ? ? ? ? ? ? Vue.prototype.$http = axios
? ? ? ? ? ? ? ? # 2 设置全局函数--->以后任意组件中 ?this.$add(2,3)
? ? ? ? ? ? ? ? Vue.prototype.$add = (a, b) => {
? ? ? ? ? ? ? ? ? ? return a + b + 100
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? # 3 使用混入
? ? ? ? ? ? ? ? Vue.mixin({
? ? ? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'lqz'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? ? ? showName(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(this.name)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ?# 4 定义指令 ?v-for 内置指令，指令是可以自定义的 ? v-lqz
? ? ? ? ? ? ? ?# 5 定义全局组件---elementui做的--<el-button></el-button>
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? -2 使用插件--main.js中
? ? ?? ?import plugin from '@/plugins'
?? ??? ?Vue.use(plugin)
? ? ? ??
? ? ? ??
? ? ? ??
# 5 看一下第三方插件的使用
?? ?-vue-router：
? ? ?? ?-Vue.use(VueRouter)
? ? ? ? -以后在组件中this.$router 就拿到的是VueRouter 对象
? ? ? ? -以后在组件中 能拿到 this.$route ?
? ? ? ? -全局组件： ?<router-view/>
? ? ? ??
? ? -elementui：
? ? ?? ?-Vue.use(Elementui)
? ? ? ? -全局组件： <el-button></el-button>
?? ??? ?-全局变量：this.$message()

插槽使用

# 匿名插槽
-子组件中：
? ? <template>
? ? ? <div class="hello">
? ? ? ? <button @click="handleClick">组件--点我看控制台</button>
? ? ? ? <div>
? ? ? ? ? ?<slot></slot>
? ? ? ? ?</div>
? ? </template>
? ??
-父组件中：?? ?
? ? <HelloWorld>
? ? ? ?<img src="../assets/img/1.png" alt="" width="200px" height="300px">
? ? </HelloWorld>
? ? # 或者写成
? ? <HelloWorld>
? ? ?<template>
? ? ? ?<img src="../assets/img/1.png" alt="" width="200px" height="300px">
? ? ?</template>
? ? </HelloWorld>

# 具名插槽
-子组件中：
? ? <template>
? ? ? <div class="hello">
? ? ? ? <button @click="handleClick">组件--点我看控制台</button>
? ? ? ? <div>
? ? ? ? ? ?<slot name='lqz'></slot>
? ? ? ? ?</div>
? ? </template>
? ??
-父组件中：?? ?
? ? <HelloWorld>
? ? ? ?<img src="../assets/img/1.png" alt="" width="200px" height="300px" slot='lqz'>
? ? </HelloWorld>
? ? # 或者写成
? ? <HelloWorld>
? ? ?<template v-slot:lqz>
? ? ? ?<img src="../assets/img/1.png" alt="" width="200px" height="300px">
? ? ?</template>
? ? </HelloWorld>

localStorage和sessionStorage

# 浏览器可以存数据
?? ?存在cookie中：过期时间，过期了，就清理掉了
? ? localStorage：永久有效，即便浏览器重启也有效，只能手动或代码删除
? ? sessionStorage：当次有效，关闭浏览器，就没了
? ??
# vue-cookies的使用
cnpm install vue-cookies -S
cookie.set('xx', 'yy', '7d')
console.log(cookie.get('xx'))
cookie.remove('xx')

# 具体使用
? methods: {
? ? saveLocalStorage() {
? ? ? // localStorage.setItem('name', 'xxx')
? ? ? // sessionStorage.setItem('name', '彭于')
? ? ? cookie.set('xx', 'yy', '7d')

? ? },
? ? getLocalStorage() {
? ? ? // console.log(localStorage.getItem('name'))
? ? ? // console.log(sessionStorage.getItem('name'))
? ? ? console.log(cookie.get('xx'))

? ? },
? ? deleteLocalStorage() {
? ? ? // localStorage.clear()
? ? ? // localStorage.removeItem('name')
? ? ? // sessionStorage.clear()
? ? ? // sessionStorage.removeItem('name')

? ? ? cookie.remove('xx')

? ? },
? }