前端之Vue day07 混入、插件、elementui、Router、Vuex

一、Props补充

1.父传子在子组件标签上起自定义属性

使用数组
就不演示了，太简单了

2.限制传入的数据类类型

使用对象
同样，展示过的

3.props补充

就是套对象，加以限制

props:{
    name:{
    type:String,
        required:true,
        default:'王也'
    }
}

二、mixin混入

​ 就是提取重复代码，提高效率，封好的代码做成混入对象，以后就可以随便使用了

1.局部使用

就是导一下，然后就mixins配置就可以用了，并且谁都可以这样导了后用

创一个包，自己再创一个js文件
export const wa={
    data(){
        return{
            name:'jack',
            age:18
        }
    },
    methods:{
        showName(){
            alert(this.name);
        }
    },
    mounted(){
        console.log('你好，组件挂载执行')
    }
}

_____________________________________
别的vue文件中
import {wa} from '@/mixin'

export default{
    mixins:[wa]  # 数组，可以使用多个混入
}

2.全局使用

​ 要在main.js中，先导一下，然后配置一下，配置完后，所有组件中都可以用混入文件的数据

import {wa} from '@/mixin'

Vue.mixin(wa)
# 注意，这个不是数组，如果要用多个混入，要另起行再写

三、Vue的插件

​ 用于增强vue，可以拓展出比如：自定义指令v-（自己写的）、定义全局变量

简单使用

新建一个plugins（插件的意思）包
再建立一个index.js

export default:{
    install(vue){
        console.log('(｡･∀･)ﾉﾞ嗨')
    }
}

——————————————————————————————————————
上面简单写了个插件，怎么用？
去src的main.js

import  wa from '@/plugins'
Vue.use(wa)

定义全局变量

​ 以后在任何组件中，都用的到，可以理解成面向对象中的属性能给对象用也能给类用，这样vue点能拿到，vue实例后的this点也能拿到，这样极大的方便了如果后期改动插件内的内容，其他组件使用的变量不用变动

补充：
Vue.prototype.$xxx= yyy 给vue的原型里塞数据
这样在任意组件中，this.$xxx都能拿到
$是怕变量名污染，反正带上就是了

新建一个plugins（插件的意思）包
再建立一个index.js
import Vue from 'vue'
export default:{
    install(vue){
        Vue.prototype.$name = '韩立'
        Vue.prototype.$add = (a, b) => {
            return a + b
        }
        Vue.prototype.$ajax=axios
    }
}

————————————————————————————————
依旧去src的main.js注册一下

import  wa from '@/plugins'
Vue.use(wa)
——————————————————————————————————
在任意组件中，就可以用this.$来调用，比如说调用axios甚至都可以不用单独去导入axios，之间调用自己定义的全局变量$ajax即可，做到了以假乱真

插件也可以套娃混入

​ 我们也可以把全局混入写在插件中，这样也能做到只要main.js注册了插件，就注册了全局混入

四、集成elementui

​ 饿了么ui是饿了么团队开发的第三方的样式库，类似以前我们用过的bootstrarp

vue样式组件库：
vant ,element ,mintui ,materia vue ui,ant ui,iconic,iconfont.cn火箭
    -elementui        做网页端 样式用的多  vue2的 饿了吗团队开发的
    -elementui-plus   第三方团队继续基于vue3写的
    -vant             做app的样式,适用于vue3
    -iview            pc端用www.iviewui.com

#  移动端用 vant,pc端用 elementui
elementui快速上手指南：https://blog.csdn.net/weixin_45525630/article/details/119383414

使用教程

1.先cnpm安装
cnpm i element-ui -S
2.去官网研究组件手册，其实这个插件基本上重写了div等之类的标签的名字，所以看不太懂，不过没关系，大致懂意思，复制拿就行

五、localStorage系列

​ 三者都是在前端浏览器中储存数据的，本地存数据

名词	解释
localStorage	浏览器中永久储存
sessionStorage	临时存储，关闭页面数据消失
cookies	可以设置时间，时间到了就消失

localStorage

​ localStorage.setItem()——————添加东西，一个是K，一个是V，V必须是字符串形式哦~

<template>
  <div id="app">

  <h1>localStorage</h1>
    <button @click="addLocal">点一下就写入</button>
    <button @click="getLocal">点一下就获取</button>
    <button @click="deleteLocal">点一下就删除</button>

  </div>
</template>

<script>

export default {
  name:'APPView',
  data(){
    return{userinfo:{name:'jack',age:18}}
  },
  methods:{
    addLocal(){
      localStorage.setItem('userinfo',JSON.stringify(this.userinfo))
    },
    getLocal(){
      let res = localStorage.getItem('userinfo')
      console.log(res)  // 目前是json字符串
      let res1 = JSON.parse(res)
      console.log(res1)    //还原了对象
    },
    deleteLocal(){
      localStorage.clear() //清空所有
      localStorage.removeItem() //清空指定的k
    }

  }
}

</script>

SessionStorage

<template>
  <div id="app">

<!--  <h1>localStorage</h1>-->
<!--    <button @click="addLocal">点一下就写入</button>-->
<!--    <button @click="getLocal">点一下就获取</button>-->
<!--    <button @click="deleteLocal">点一下就删除</button>-->

  <h1>SessionStorage</h1>
    <button @click="addSession">点一下就写入</button>
    <button @click="getSession">点一下就获取</button>
    <button @click="deleteSession">点一下就删除</button>

  </div>
</template>

<script>

export default {
  name:'APPView',
  data(){
    return{userinfo:{name:'jack',age:18}}
  },
  methods:{
    addSession(){
      sessionStorage.setItem('userinfo',JSON.stringify(this.userinfo))
    },
    getSession(){
      let res = sessionStorage.getItem('userinfo')
      console.log(res)  // 目前是json字符串
      let res1 = JSON.parse(res)
      console.log(res1)    //还原了对象
    },
    deleteSession(){
      sessionStorage.clear() //清空所有

    }

  }
}

</script>

Cookies

​ 要借助一个第三方模块

cnpm install vue-cookies

<template>
  <div id="app">
    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向cookie发数据</button>
    <button @click="getCookie">点我获取cookie数据</button>
    <button @click="removeCookie">点我删除cookie数据</button>
  </div>
</template>
<script>
import cookies from 'vue-cookies'

export default {

  data() {
    return {userinfo:{name:'jack',age:18}}
  },
  methods: {
    saveCookie() {
      cookies.set('userinfo',JSON.stringify(this.userinfo),'7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('userinfo'))
    },
    removeCookie() {

      cookies.remove('userinfo')
    }
  }
}
</script>
<style scoped>
h1 {
  background-color: aqua;
}
</style>

六、Router

1.了解

​ 官方提供的用来实现SPA 的vue 插件:有了它以后，我们可以写很多页面组件，通过地址栏不同的路径显示不同的页面组件

​ | https://router.vuejs.org/zh/index.html

2基本使用

​ 因为我们创建项目的时候选了router，所以不用再自己创，基于router的文件写就行

1 新建router/index.js  #
    const routes = [配置路由1,配置路由2]
2 main.js中使用：之前已经写好了
    import router from './router'
    new Vue({
        ...
          router,
        ...
        }).$mount('#app')

3 只需要写页面组件，配置路由即可
4 在App.vue中加入
    <router-view>  // 用来显示当前路由组件界面

    </router-view>
5 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

3.跳转

在html中使用  ————router-link包一下
   <router-link to='/login'>
      <button>点我跳转到login页面</button>
    </router-link>

在上一级的vue组件的js中使用
    this.$router.push('goods')  // goods是已经注册过的路由及vue组件

4.携带数据跳转

# 两种情况
    -带在请求地址中以 ?name=lqz&age=19
    -在地址中类似于django的分组  /goods/1/

 $route是匹配的路由的对象

# 情况1：请求地址中
    -<router-link to="/login/?name=lqz&age=19">去登录</router-link>
    -组件中取：
		可以写在create钩子函数中
		this.$route.query.取

# 情况2：地址中
    <router-link to="/login/xxx">去登录</router-link>
    -组件中接受：this.$route.params.取

5.对象的方式做跳转

 this.$router.push('goods')>>>
自己写个对象，自己携带
 this.$router.push({name:'goods',query:{name:xxx,age:xxx},
	params:{pk:1}
})

名字就是路由配置的那个name

-标签形式跳转，传对象形式
<router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
    <button>点我跳转到home页面</button>
</router-link>

七、Vuex

# 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

# 官方推荐我们使用这种,因为可以在Actions层搞事情，比如和后端交互

# 使用步骤
	1 安装，新建store/index.js，如果我们创建项目时选了vuex，就不用自己建

    2 在store/index.js 中写
        export default new Vuex.Store({
            state: {
                # 放数据
            },

            mutations: {
                # 放方法，正常是让actions中来调用
                # 组件也可以直接调用

            },
            actions: {
                # 放方法，正常组件调用
            }
        })

     3 在组件中
    	-显示state的变量
        html中：
          {{$store.state.变量名}}
        js中：
        	this.$store.state.变量名
        改state中的值

            -推荐按正常步骤---》this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
            -可以跨过任何一步
            	this.$store.commit()
                this.$store.state.变量名

今日注意

1.列表或者字典可以拿JSON.stringify()转字符串，可以JSON.parse()解析回来
2. vue-cookies那个cookies时间默认是秒，可以用字符串写d、m
	 vue-cookie 默认时间是天
3.this.$router #   new VueRouter对象，实例，可以实现路由的跳转
  this.$route  #   是当前路由对象，内部有传入的参数