python之路74 vue框架 props其他、混入mixin、插件、elementui使用、vuex、vue Router、localStorage系列

props

安装依赖
   cnpm install
做成纯净的vue项目
   在router的index.js中删除about的路由
   删除所有小组件和about页面组件
   App.vue  只留
   <template>
      <div id="app">
        <router-view/>
      </div>
    </template>

自定义属性，在子组件中接收传入的数据

方式一：使用数组
props：['name']
方式二：使用对象
props：{name:Number}
方式三：使用对象，默认值和必填
如果组件不传这个值 就用默认(会显示，但是会后台会报错)
props：{
    name:{
     type:String,  // 类型
     required：true,  // 必要性
     default：'老王'  //默认值
   }
}

混入mixin

可以把多个组件公用的配置提取成一个混入对象

使用步骤：
   1.定义混入对象，新建mixin包，下新建index.js 写
      export const lqz = {
            data(){
                return {
                    age:1000
                }
            },
            methods: {
                showName() {
                    alert(this.name);   // 没有this.name
                },
            },
            mounted() {
                console.log("你好啊！,页面挂在执行");
            },

 }
   2.在index.js中写 代码(组件中会用到的，data，methods。。配置项)父组件写
   <template>
  <div class="home">

  <h1>混入使用的</h1>
  <button @click="showName"> 点我看名字</button>
    <h2>{{age}}</h2>
  </div>
</template>

<script>
//导入混入
import {lqz} from '@/mixin'

export default {
  name: 'HomeView',
  data(){
    return {
      name:'彭于晏'
    }
  },
  mixins:[lqz],
}
</script>

能把age显示出来  实现混入

3.局部使用（只在当前组件中使用  以上配置）
4.全局使用(所有组件都可以用) main.js中
import {lqz} from '@/mixin'
    Vue.mixin(lqz)
    // Vue.mixin(lqz2)
    // Vue.mixin(lqz3)
如果有多个 需要写多个 排着往下写就行了 

5.在组件中，直接使用即可

插件

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

使用步骤
   1新建包plugins 新建index.js
    import Vue from "vue";
    import axios from "axios";
    export default {
        install(vue) {
            console.log('执行了插件', vue)
            # 可以做的事
            #  1 了解，自定义指令(不了解没关系)
            #  2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax  就是axios对象
            #  3 使用全局混入
            #  4 自定义全局组件
        }
    }

    2 在main.js 中配置
   # 使用自定义插件
    import plugin from '@/plugins'
    Vue.use(plugin)

写的不全 可以看老刘博客
https://www.cnblogs.com/liuqingzheng/articles/16840373.html

elementui使用(重点)

在vue上，css样式，用的最多的是elementui，但是还有其他的
   elementui       做网页端 样式用的多 vue2的饿了么团队开发的
   elementui-plus  第三方团队继续基于vue3写的 
   vant            做app的样式
   iview           pc端用www.iviewui.com
   

elenentui的使用
    1  安装
        cnpm i element-ui -S
    2  配置完整引入   在main.js 中写入一下内容
       import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI)  // 以后在咱们组件中直接使用elementui 提供的全局组件即可
     3  在组件中使用
        官网看到样式好的，复制粘贴到项目中和bootstrap用法相似

vuex

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

使用步骤
    1 安装，新建store/index.js

    2 在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.变量名

vue Router

第三方插件 用来实现SPA的vue插件，
   单页面应用------》实现在一个index.html中有页面跳转效果的插件
     路由控制
     <router-link>   跳转用
     <router-view/>  替换页面组件用

1 基本使用
    1 创建vue项目时加入了，直接用即可
        如果之前没装：先下载，在项目中创建router包，写个index.js,代码copy过来，main.js 写一下
    2 配置路由的跳转(跳转页面组件)，只需要在routes数组中写对象即可
       const routes = [
            {
                path: '/',
                name: 'index',
                component: Index
            },
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ]
     3 一定要写个视图组件 Home


2 点击跳转路由两种方式
   js控制
        this.$router.push('路径')
   标签控制
        <router-link to="/home">
          <button>点我跳转到home页面</button>
        </router-link>
    
3 路由跳转，携带数据的两种方式
     1 /course/?pk=1  带在路径中使用 ? 携带  
     2 /course/1/     路径中分割的
    
     1 第一种方式：/course/?pk=1
         this.$route.query.pk
     2 第二种方式：/course/1/ 
         router/index中路径得改
             {
                path: '/login/:id',
                name: 'login',
                component: Login
            },
         this.$route.params.id
4 区分this.$route  this.$router
     this.$router #   new VueRouter对象，实例，可以实现路由的跳转
     this.$route  #   是当前路由对象，内部有传入的参数
    

5 两种跳转方式，使用对象方式
    this.$router.push({
        name: 'login',
        // query: {
        //   name: 'lqz',
        //   age: 19
        // },
        params: {
          id: 88
        }
      }) # 这里可以写个对象
    
     标签形式跳转，传对象形式
    <router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
      <button>点我跳转到home页面</button>
    </router-link>
    

 # 6 路由守卫--->
   全局守卫
         前置路由守卫：在进路由前，执行代码
         后置路由守卫：路由跳转走，执行代码
        
    如何用：router/index.js 加入
    // 全局前置路由守卫--->任意路由跳转都会触发它的执行
router.beforeEach((to, from, next) => {
    // to 是去哪，哪个路由对象
    // from 是来自哪，是哪个路由对象  比如从  /--->/login
    // next 是函数，如果加括号执行，就会真正的过去
    console.log('前置路由守卫', to, from, next)
    // next() // 真正跳转到 要去的路径

    if (to.name == 'login') {
        console.log('走了')
        next()
    } else {
        var res = localStorage.getItem('userinfo')
        if (res) {
            next()
        } else {
            alert('您没有登录')
            router.push({name:'login',params:{id:999}})  // 进行页面跳转
            // router.push('/login/44')
            // next({name:'login',params:{id:22}})
            // console.log(this)
            // router.push('/login')
        }
    }
})

localStorage系列

都是在浏览器存储数据的--》存数据有什么用？
     1.登录成功 token存在本地
     2.不登录加入购物车功能，迪卡侬存在了localStorage中
     3.组件间通信----》 跨组件 存修改信息进行替换

localStorage
    永久存储，除非清空缓存，手动删除，代码删除
     localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
     localStorage.getItem('userinfo')
     localStorage.clear()  // 清空全部
     localStorage.removeItem('userinfo') 
sessionStorage
     关闭浏览器，自动清理
     sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
     sessionStorage.getItem('userinfo')
     sessionStorage.clear()  // 清空全部
     sessionStorage.removeItem('userinfo') 
cookie
     有过期时间，到过期时间自动清理
     借助于第三方 vue-cookies
     cookies.set('userinfo', JSON.stringify(this.userInfo))
     cookies.get('userinfo')
     cookies.delete('userinfo')