day07

内容概要

props其他
混入mixin
插件
elementui使用
vuex
vue Router
localStoratage系列
了解，自定义指令

porps其他

porps使用

方式一

porps:[]

方式二

porps:{name: String} 限制类型

方式三

porps: {

name:{

type: String, // 类型

required: true, // 必要性

default: '老王', // 默认值

}

混入mixin

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

写一个公共的对象，只要导入，没有的都去这个公共的对象里面拿

使用步骤

定义混入对象，新建mixin包，下新建index.js（局部使用）

<template>
  <div class="home">
    {{name}}
    {{showData()}}
  </div>
</template>

<script>
import {lqz} from "@/lqz"

export default {
  name: 'HomeView',
  mixins: [lqz,]
}
</script>

index.js

export const lqz = {
    data() {
        return {name: "彭于晏"}
    },
    methods: {
        showData() {
            console.log(this.name)
        }
    }
}

全局使用(所有的组件中使用)

在main.js中写

插件

功能:用于增强Vue

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

使用步骤

新建包，plugins，建一个index文件

import Vue from "vue"

export default {
    install(vue){
        console.log("执行了插件")
    }
}

在 main.js里写

在插件里定义全局属性

import Vue from "vue"

export default {
    install(vue) {
        // console.log("执行了插件")
        // 可以做的事情
        // 1. 自定义指令
        // 2. 往全局变量里面写东西 在变量名写一个 $
        // 是为了 防止 被 data里面的数据污染
        Vue.prototype.$name = "lqz"
        Vue.prototype.$add = (a, b) => a + b

    }
}

在插件中定义全局混入

import Vue from "vue"
import lqz from "@/lqz"  // 导入对象

export default {
    install(vue) {

        // 3.全局混入
        Vue.mixin(lqz)


    }
}

组件里面直接用就可以

elementui使用

在vue上，css样式，用的最多的是element,但是还有其他的

-elementui 做网页端样式用的多 vue2

-elementui-plus 第三方团队继续基于vue3写的

-vant 做app的样式

-iview pc端用 <www.iviewui.com>

elementui的使用

安装

cnpm i element-ui-S

-S 会自动配置到当前的项目里
配置完整引入在 main.js中写入一下内容

import ElementUI from "element-ui"

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

以后在咱们的组件中直接使用elementui提供的全局组件即可
在组件中使用

-去官网看到好的，复制贴到你的项目中

Vuex

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

vuex1

Vuex **

使用步骤

安装，新建store/index.js
在index.js中写

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 0
    },
    // getters: {
    // },
    mutations: {
        add(state, value) {
            state.num += value
        }
    },
    actions: {
        add(context, value) {
            console.log(context)
            console.log(value)
            context.commit('add', value)
        }
    },
    // modules: {
    // }
})

在组件中

<template>
  <div class="home">
        {{ $store.state.num }}
    <button @click="myClick">点我加一</button>
  </div>
</template>
<script>

export default {
  name: 'HomeView',
  methods: {
    myClick() {
      this.$store.dispatch('add', 1)
    }
  }
}
</script>

在组件中

-显示state的变量

html中:

{{$store.state.变量名}}

js中:

this.$store.state.变量名

改state中的值

推荐按正常的步骤

this.$store.dispath('actions中的方法',参数)--->actions中的方法调用 context.commit("mutations的方法"，参数)---->在mutations中直接改state的值

可以跨过任何异步

this.$store.commit()

this.$store.state.变量名

vue Router

第三方插件，用来实现SPA 的vue插件，

单页面应用----》实现一个index.html中有页面跳转效果插件

-路由控制

<router-link> 跳转用

<router-view> 替换页面组件用

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

点击跳转路由的两种方式

-js控制 this.$router.push("/login")

<template>
  <div class="home">
    <button @click="myLogin">点我跳转登录页面</button>
  </div>
</template>

<script>


export default {
  name: 'HomeView',

  methods: {

    myLogin() {
      this.$router.push("/login")
    }
  }
}
</script>

标签控制

    <router-link to="/home">
      <button>点我也跳转</button>
    </router-link>

路由跳转,携带数据的两种方式

1. /course/?pk=1&age=19   带在路径中使用？携带
2. /course/1/          路径中分隔的

第一种方式 /course/?pk=1&age=19

console.log(this.$route)
console.log(this.$route.query.pk)
console.log(this.$route.query.age)

在 query里面取

第二种方式 /course/1/ 这种方式得再定义路由的里面加参数取去接收这个值

getClick(){
  console.log(this.$route)
  console.log(this.$route.params.id)
}

{
    path: '/login/:id',
    name: 'login',
    component: Login
},

路由加了id来接收，可以加任何变量，但是一定要加冒号

区分this.$route 与 this.$router

$route 是当前路由可以用来获取当前路由携带的参数

$router是 new VueRouter对象，用来跳转

两种跳转方式，使用对象方式

this.$router.push({
  name: 'login',
  query: {pk: 1, age: 18},
  params: {id: 199}
})

<router-link :to="{name:'login',
                   query: {pk:1, age:18},
                   params: {id: 100}

}">点我也跳转</router-link>

路由守卫

全局守卫

前置路由守卫：在进路由前，执行代码

后置路由守卫：路由跳转走，执行代码

如何用: router/index.js加入

全局前置路由守卫---》任意路由跳转都会触发它的执行

export default router
//             里面写函数
router.beforeEach((to, from, next) => {
    // to 是去哪
    // from  是从哪里来
    // next 是 执行跳转 如果什么都不加就是 跳转到 to的路由
    // console.log(to.query.pk)
    // console.log( typeof  to.query.pk)

    // next()
    if (to.name !== "login") {
        if (to.query.pk == "1") {
            console.log(11)
            next()
        } else {
            // console.log(11)
            next({name: 'login'})
        }
    }else {
        next()
    }
})

localStorage系列

都是在浏览器存储数据的--》存数据有什么有?

-登录成功 token存在本地

-不登录加入购物车功能，迪卡侬

localString

组件间通信---》跨组件

localStringage

永久存储，除非清空缓存，手动删除，代码删除

# 都是在浏览器存储数据的--》存数据有什么用？
	-登录成功 token存在本地
    -不登录加入购物车功能，迪卡侬存在了localStorage中
    -组件间通信----》 跨组件
    
# 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')

	-有过期时间，到过期时间自动清理
    -借助于第三方 vue-cookies
    -cookies.set('userinfo', JSON.stringify(this.userInfo))
    -cookies.get('userinfo')
    -cookies.delete('userinfo')

posted @ 2023-02-21 22:44 可否阅读(50) 评论(0) 收藏举报

可否

day07

内容概要

porps其他

混入mixin

插件

elementui使用

Vuex

vue Router

localStorage系列

公告