Vue - 08 Vue 高级

目录

Vue - 08

别人发送的项目需要安装依赖，如何使用

①删除node_modules文件夹，后复制项目，然后安装依赖

②安装依赖

在项目路径下安装依赖

npm install

组件间通信的方式（5种）：

① 父子间 - 父传子：使用【自定义属性】

② 父子间 - 子传父：使用【自定义事件】

③ ref属性

④ localStorage、sessionStorage、cookies

⑤ Vuex - 状态管理器

1 props配置项

通过让组件接收外部传过来的数据，可以通过自定义属性，在子组件中接收传入的数据

1.1 props的三种使用方式

①数组

props:[name]

②对象：单个校验-限定类型

  props: {
    name:Number
  }

③对象：多个校验-默认值和必填

  • 有默认值后没有传值的情况下使用默认值
  props: {
    film: {
      type: String,
      required: false,
      default: '流浪地球' // 
    }

2 混入mixin

【抽取代码】，可以将多个组件共用的配置提取成一个混入对象【合并同类项】

2.1 使用方式

① 定义混入对象

  • 新建mixin包，在index.js中新建混入对象

  • 可以定义 变量、方法、生命周期钩子函数等等

  • 其中可以使用this，this代指的是Vue实例

// 在mixin包下的index.js文件中新建混入类
export const mixComponent = {
    data() {
        return {
            name:'流浪地球'
        }
    },
    methods: {
        showName(){
            alert(this.film)
        },
    },
    mounted() {
        console.log('混入对象挂载了！！')
    }
}

② 在局部组件中导入混入对象【局部使用】

使用配置项mixins导入混入对象，这样可以在局部组件中使用

 mixins: [mixComponent]

③ 在main.js中导入混入对象【全局使用】

这样可以在全局组件中使用

// 导入混入类
import {mixComponent} from "@/mixin";
// 全局配置混入对象
Vue.mixin(mixComponent)

3 插件

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

3.1 步骤

① 定义插件:插件的使用方式

新建plugins包，在index.js中新建插件对象，

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

（1）自定义指令（了解）

通过Vue.directive来自定义指令

import Vue from "vue";
 
export default {
    install(a) {
        console.log('执行了插件', a)
        // 定义指令
        //定义全局指令：跟v-bind一样，获取焦点
        Vue.directive("fbind", {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        });
（2）定义全局变量

定义全局变量，借助于Vue.prototype在原型上放变量、方法，以后在任何组件中都可以使用

  • 需要在变量前加$符号，防止数据污染
 Vue.prototype.$name = 'duoduo'
 
// 原型上放方法，所有vc和vm都可以用hello
 Vue.prototype.$hello = () => {
     alert("你好啊");
 };
（3）使用全局混入
//定义混入，所有vc和vm上都有name和lqz
 Vue.mixin({
     data() {
         return {
             name: '彭于晏',
             age: 19,
         };
     },
 });
（4）自定义全局组件

elemenui就是将组件做成了插件

② 在main.js中配置

导入插件组件，并通过use方法使用

// 导入组件
import plugins from '@/plugins'
// vue实例use方法在全局中配置插件
Vue.use(plugins)

③ 使用自定义插件

  • 自定义的变量前要加$防止数据污染
  • 自定义指令也是通过 v-自定义指令名来使用

4.elementui(重点)

由饿了么团队开发的，在Vue中使用elementui来增强css样式的样式库

了解：

  • elementui：做网页样式，基于vue2开发（vue3用elementui plus）
  • vant：做app的样式【也可以用iview】

4.1 elementui的使用

① 下载elementui

npm i element-ui -S

② 在main.js中配置完整引入

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

③ 使用:去官网中找然后【复制】

https://element.eleme.cn/

注意：

  • 复制的时候不要忘记复制 【js代码】和style中的【css的代码】

image-20230221195846582

5.存储器Local Storage、session Storage、cookie

①Local Storage【计算机的本地存储器/局部存储器】

特点：过期时间-永久存储，除非清空缓存，手动删除，代码删除

作用：使浏览者可以在明确脱机、低带宽或连接时断时续的情况下高效地工作,同时可提高系统的响应速度,减少用户的等待时间。

②session Storage【对话期存储】

特点：过期时间-当前会话有效，关闭浏览器，自动清理

③cookie【信息记录程序】

特点：过期时间-有过期时间，可以设置

作用：Cookie通常是由浏览器存储的文本文件，当用户重新访问同一网站时，浏览器将发送该cookie以帮助网站"记住"用户的过去行为。

都是浏览器存储数据的，存储数据的用处，比如迪卡侬官网不登录加购物车的功能，

5.1 Local Storage 局部存储器

  • 登录成功存储token

  • 用不同的浏览器会留下不同的数据

  • 组件间通信

①写入数据

需要传入的值：value，必须是一个字符串，如果是对象或者数组，需要转换成json格式

   // 设置local storage
    setLocalStorage() {
    // 需要传入的值：value，必须是一个字符串，如果是对象或者数组，需要转换成json格式
      localStorage.setItem('UserInfo',JSON.stringify(this.UserInfo))
    },

②获取

取出local storage的时候为JSON格式字符串，需要转换成前端的对象更好显示

    // 打印local storage
    getLocalStorage(){
      // 取出local storage的时候为JSON格式字符串，需要转换成前端的对象更好显示
      let ls = localStorage.getItem('UserInfo')
      console.log(typeof ls)
      console.log(ls)
      let res = JSON.parse(ls)
      console.log(typeof res)
      console.log(res)
    },

image-20230221204838687

③删除

  • 方法1：clear 清空全部
  • 方法2：removeItem 指定清除1个
delLocalStorage(){
  // 方法1：clear 清空全部
  // localStorage.clear()
  // 方法2：remove 指定清除1个
  localStorage.removeItem('UserInfo')
}

5.2 sessionStorage 对话期存储

①写入数据

    // 设置SessionStorage
    insertSessionStorage() {
      // 需要传入的值：value，必须是一个字符串，如果是对象或者数组，需要转换成json格式
      sessionStorage.setItem('UserInfo',JSON.stringify(this.UserInfo))
    }
image-20230221205633109

②获取

    // 打印SessionStorage
    getSessionStorage(){
      // 取出local storage的时候为JSON格式字符串，需要转换成前端的对象更好显示
      let ls = sessionStorage.getItem('UserInfo')
      console.log(typeof ls)
      console.log(ls)
      let res = JSON.parse(ls)
      console.log(typeof res)
      console.log(res)
    },
image-20230221205502509

③删除

  • 方法1：clear 清空全部
  • 方法2：removeItem 指定清除1个
delSessionStorage(){
  // 方法1：clear 清空全部
  sessionStorage.clear()
  // 方法2：remove 指定清除1个
  // sessionStorage.removeItem('UserInfo')
},

5.3 cookies

通过vue来操作cookies需要借助第三方工具vue-cookies

  • 下载

    		npm i vue-cookies -S

  • 导入

    		import cookies from 'vue-cookies'

①写入数据

写入cookies的时候是加密形式保存在前端浏览器中

// 设置Cookies
insertCookies() {
  // 需要传入的值：value，必须是一个字符串，如果是对象或者数组，需要转换成json格式
  cookies.set('UserInfo',JSON.stringify(this.UserInfo))
},

image-20230221210801335

②获取

通过vue-cookies来操作cookies，取出的时候就是对象，不用再转换了，并且已经解密了

    getCookies(){
      // 取出cookies的时候直接就是对象形式
      let ls = cookies.get('UserInfo')
      console.log(typeof ls)
      console.log(ls)
    },
image-20230221210703734

③删除

  • remove()方法删除cookies
delCookies(){
  cookies.remove('UserInfo')
},

6.router

Vue Router是一个官方的路由管理器。它可以将Vue.js应用程序与URL相关联，使得用户在应用中导航时能够在浏览器中显示与当前视图对应的URL。Vue Router可以实现多页面应用（MPA）或单页面应用（SPA）的路由功能，使得应用的视图可以随着URL的改变而改变。

  • 作用：

①路由控制：使得应用的视图可以随着URL的改变而改变

②路由跳转：<router-link> 跳转用

③页面替换：<router-view/>

6.1 使用方法

①安装

  • 创建项目时，选择安装 Router，创建项目后直接用
  • 如果之前没装直接下载，然后在项目中创建router包，写个index.js,代码copy过来，main.js配置router对象

②根据路由配置视图组件

编写视图组件HomeView

③给页面配置路由的跳转

在router目录下的index.js文件中，配置跳转页面组件，只需要再routes数组中写对象即可

// 导入Vue对象
import Vue from 'vue'
// 导入router对象
import VueRouter from 'vue-router'
// 导入单页面组件，配置路由
import HomeView from '../views/HomeView.vue'
 
// 使用router
Vue.use(VueRouter)
 
const routes = [
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ]

6.2 跳转功能

①js控制:$router.push方法

runHome(){
   this.$router.push('/home')
 }

通过 to属性来控制跳转的地址

<router-link :to="/home">
		<button>点我跳转到home页面</button>
</router-link>

6.3 路由跳转携带数据

① 方式1：带在路径中使用?携带

/course/?pk=1

获取数据：

this.$route.query.pk

② 方式2：路径中分割的

携带参数在路径中分割的时候，需要在router文件夹下的index.js中注册路由的时候，通过:来绑定属性，这样在this.$route.params才能点出来

/course/1
// router/index.js中注册的时候需要通过:绑定属性
  {
     path: '/login/:id',
     name: 'login',
     component: Login
 },

获取数据：

this.$route.params.id

6.4 区分 this.$route与this.$router

区分

  • this.$route 是当前路由对象，内部有传入的参数

  • this.$router 是Vue的实例中的VueRouter的对象，实例可以实现路由的跳转

image-20230222000650939

6.5 编程式路由导航

①方式1：通过$router.push方法实现

runLogin() {
      // this.$router.push('/login/3')
      this.$router.push({
        // 路由注册的时候的name
        name: 'login',
        params: {
          id: 88
        },
        query:{
          pk:99,
          name:'duoduo'
        },
      })
    }

②方式2：传对象形式，标签形式跳转

    <router-link :to="{name: 'login', query: {name: 'duoduo'}, params: {id: 55}}">
      <button>点我跳转到home页面</button>
    </router-link>

也可以通过 this.$route.back 跳回上一页

6.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('您没有登录')
            // 跳转到login--->没有解决---》你们搜一下如何解决
            // console.log(this)
            // router.push('/login')
        }
    }
})

7 Vuex

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

使用步骤

①安装

新建store/index.js

②在index.js 中写创建Store对象

export default new Vuex.Store({
       state: {
           # 放数据
       },
 
       mutations: {
           # 放方法，正常是让actions中来调用
           # 组件也可以直接调用
 
       },
       actions: {
           # 放方法，正常组件调用
           # ①逻辑判断
           # ②与后端交互
           # ③调用mutations中方法
       }
   })

③从组件到actions-->mutations来操作state中的数据

1.通过this.$store.dispatch来触发actions中的方法调用
 
this.$store.dispatch('actions中的方法',参数)
 
2.通过context.commit mutations调用中的方法
 
context.commit('mutations中的方法',参数)
 
3.在mutations中直接修改state的值

案例：

(1)组件中

html标签中

   <p>购物车商品数量{{$store.state.good_num}}</p>
    <button @click="addNum">点击增加商品数量+1</button>

methods方法中，使用this.$store.dispatch方法触发store下的index.js中的actions

methods: {
		...
    addNum(){
      this.$store.dispatch('actionsAddNum',1)
    }
  },

(2)store下的index.js中

actions中调用 context.commit 方法触发mutations

【但是，此时actions中可以给后端发送ajax请求】

actions: {
        // 放方法，正常组件调用
        actionsAddNum(context, value) {
            context.commit('mutationsAddNum', value)
        }
    },

mutations中操作state中的数据

   state: {
        // 放数据
        good_num: 10
    },
 
    mutations: {
        // 放方法，正常是让actions中来调用
        // 组件也可以直接调用
        mutationsAddNum(state, value) {
            state.good_num += value
        }
    },
posted @   Duosg  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
· Vue - 回顾与总结
· Vue - 7 Vue-cli项目
· Vue 07
· vue基础：props配置项、mixin（混入）、插件、elementui使用(重点)、localStorage和sessionStorage、vue Router、vuex
· vue---day07(props，混入mixin，插件plugins，elementui样式库，Router，vuex，localStorage系列，)
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示