混入mixin/插件/router路由/cookie的使用

props用法 父传子

父组件给子组件传递数据 自定义属性方式

 # 父组件调用子组件 注册，并使用
 <hello :name="name"></hello>
 # 给子组件绑定自定义属性
import hello from "@/components/hello";
export default {
  name: "home",
  components: {
    hello,
  },

  data(){
    return {age:18}
  },
}


# 子组件接收自定义属性的数据，并规定数据格式，是否必填，默认值
export default {
  name: "hello",
  props:{
    name:{
      # 接收的自定义属性名
    type:String,
      # 数据类型
    required:true,
      # 是否比传
    default:'张无忌'
      # 默认值
    }
  }}

混入mixin

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

例如一个方法和函数需要多次使用，可以制作成混入

1.在src文件夹创建 mixin文件，在其中使用命名导出编写一个个方法，或数据
 也可以写多个

export const moon={
    data(){
        return {
            age:18
        }
    },
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('你好，我执行了')
    }
  
  
2.在视图组件中引入该方法，个别视图文件引入
  
import {moon} from '@/mixin'
# 引入后需要在属性中注册
  
export default {
  name: "home",
  data(){
      return { name:'吴彦祖'}
  },
  mixins:[moon]
} 

3.注册完成后 就可以直接使用引入文件的所有变量 和方法，showName方法 age:18属性等
  
  
 

全局默认插入方法，
在mian.js文件中引入 
  
import {moon} from '@/mixin'

Vue.mixin(moon)
# 然后注册到全局的vue中
  
这样全局默认就多了这些方法和属性
 
 

vue插件的使用

在src中创建文件夹 plugins，新建index.js文件
1.index.js文件编写插件代码
export default {
        install(vue) {
      vue.prototype.$ajax = axios)
          
     # 直接将axios插件 放入vue中设置属性，以后vue.$ajax就可以了
          
2 在main.js 中配置
# 使用自定义插件 配置到vue中
    import plugin from '@/plugins'
    Vue.use(plugin)

elementui使用 组件库使用

按照地址 命令行：npm i element-ui -S

在main.js文件中 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

# 这样才算按照成功 可以使用相关标签

需要什么直接去官网查看 粘贴代码即可

VUE router 路由配置

可以帮助我们实现在一个index.html中有页面跳转效果

在创建vue项目的时候直接可以加入 选择带这个配置即可

如何配置页面路由

在router文件夹下面 index.js文件中

import HomeView from "@/views/HomeView";
import LoginView from "@/views/LoginView";
# 导入视图函数

const routes = [
  {
    path: '/',
    # 默认根路由
    name: 'home',
    component: HomeView
  },
      {
    path: '/login',
    # 路由地址
    name: 'login',
    # 路由别名
    component: LoginView
    # 路由对应展示的视图函数
  },
]


直接添加路由即可 

主动跳转路由/携带数据

<template>
  <div>
    <button @click="goLogin">跳转登录</button>
    # 绑定点击函数，在函数内进行跳转

    <router-link to="/login">
      <button>跳转登录方式2</button>
    </router-link>
    # 直接使用<router-link to="/login">标签，点击该标签内容跳转到指定页面
  </div>
</template>



  methods: {
    goLogin() {
      this.$router.push('/login')
      // 绑定路由跳转,跳转到指定路由    
    }
  }
  
 # 函数内跳转方法

路由携带数据：

1.参数带在路径中 /cars/?pk=2

<button @click="goLogin">跳转登录</button>
# 给按钮绑定跳转事件

export default {
  name: "home",
  components: {},

  data() {
    return {name: '吴彦祖',pk:''}
  },
  methods: {
    goLogin() {
      this.$router.push('/login/?pk='+this.pk)
     #  绑定路由跳转,跳转到指定路由 并携带参数
    }}}



# login页面
export default {
  name: "LoginView",
  data() {
    return {
      pk: ''
    }
  },
  mounted() {
    this.pk = this.$route.query.pk
    # 通过该方法拿到路由携带的参数 该方法适用于？后携带参数
  }
}

2.参数在路径中 拼接 /cars/2/

拼接路径需要更改路由配置
      {
    path: '/login/:pk',
    name: 'login',
    component: LoginView
  },
 # 绑定pk属性拼接时候  传的是什么变量名 接收的时候也用什么


方式一：    <router-link :to="/login/+pk">
        	<button>跳转登录方式2</button>
    			</router-link>
          # 点击会就会直接跳转，把to属性设置为绑定属性，加上携带参数pk
    
     
    
方式二：	 

<button @click="goLogin">跳转登录</button>
goLogin() {
      this.$router.push('/login/'+this.pk)
      // 绑定路由跳转,跳转到指定路由
    }
# 绑定单击事件触发函数，拼接路径跳转页面


$route.params
# 适用于拼接路径获取参数，拼接时候传的是什么变量名 接收的时候也用什么
  mounted() {
    this.pk = this.$route.params.pk
    console.log(this.pk)
  }

localStorage/sessionStorage/cookie的使用

可以让数据储存在前端

localStorage --永久存储，除非手动清除缓存 或主动删除

     1.  localStorage.setItem('userinfo',JSON.stringify(this.userinfo))
      // 何如在浏览器存储信息 需要json格式 将数据储存
    
    2.  localStorage.clear()
         // 如何清除本地浏览器存储的所有信息
      
     3. 如何取出存储的数据
     this.$router.push('/login/'+this.pk)
      var userinfo = localStorage.getItem('userinfo')
      // 获取浏览器存储的信息 userinfo
      this.userinfo = JSON.parse(userinfo)
        // 并转回字典类型 

sessionStorage -- 关闭浏览器 自动清除

    1.  sessionStorage.setItem('userinfo',JSON.stringify(this.userinfo))
      // 何如在浏览器存储信息 需要json格式 将数据储存
    
    2.  sessionStorage.clear()
         // 如何清除本地浏览器存储的所有信息
      
     3. 如何取出存储的数据
     this.$router.push('/login/'+this.pk)
      var userinfo = sessionStorage.getItem('userinfo')
      // 获取浏览器存储的信息 userinfo
      this.userinfo = JSON.parse(userinfo)
        // 并转回字典类型 

cookie -- 根据设置的过期时间自动删除 （常用）

1. 需要安装 vue-cookie
   npm install vue-cookie

2.import cookie from 'vue-cookie'
  导入并使用

goLogin() {
       cookie.set('userinfo',JSON.stringify(this.userinfo),1)
        #  设置一个cookie 储存的内容，还有过期时间，1 = 1天
        cookie.delete('userinfo')
        #  清除cookie指令
        var userinfo = cookie.get('userinfo')
        # 拿到cookie内的数据是json格式
        this.userinfo = JSON.parse(userinfo)
        # 转为对象 并赋予组件
    },

VUEX的使用

组件通信的一种方式，适用于任意组件通信

 1.一般在创建vue项目配置时就可以直接创建好 
  src/store/index.js
  
  //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })