零心

解释器模式简绍解释器模式（Interpreter Pattern）是一种软件设计模式，属于行为型模式之一。这种模式的主要目的是定义语言的语法表示，并且提供了一个解释器来处理这种表示。解释器模式可以用于解析语言或表达式等场合，特别是在编译器、解释器和自然语言处理中应用较多。 解释器模式的结构解释器模式包含以下几个主要角色： Abstract Expression（抽象表达式）： 这是所有表达式的公共接口或抽象类，它定义了所有非终端表达式和终端表达式所需要的方法，通常是interpret()方法。 Terminal Expression（终端表达式）： 实现了抽象表达式接口，负责处理文法中的文字符号，例如单词或数字等。 Non-Terminal Expression（非终端表达式）： 同样实现了抽象表达式接口，但它除了包含对文法符号的处理外，还包含对多个表达式的组合处理逻辑。 Context（环境）： 包含解释器之外的一些全局数据或者局部数据，供解释器解释过程中使用。 Client（客户端）： 构造一个完整的文法树，然后给定一个具体的上下文环境，最后调用解释方法。 ...

组合模式简绍组合模式（Composite Pattern）是一种结构型设计模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以用一致的方式处理单个对象和组合对象。这样，可以在不知道对象具体类型的条件下操作对象集合。 组合模式主要包含三种角色： Component（组件）：声明一个接口，在适当情况下，此接口被叶节点和容器节点共享。 Leaf（叶节点）：定义终端对象。 Composite（容器节点）：定义具有子部件的那些部件的行为。存储子部件。 组合模式的应用场景 组合模式的优缺点组合模式的优点 一致性：客户端可以一致地处理单个对象和组合对象。 灵活性：可以很容易地添加新的叶子节点或组合节点。 透明性：客户端不需要知道对象的具体类型就可以操作对象。 组合模式的缺点 复杂性：对于简单操作，组合模式可能会引入不必要的复杂性。 额外开销：组合模式可能会导致额外的内存和 CPU 开销，尤其是在处理大量对象时 UML图 定义一个公共接口或抽象类，它声明了所有叶子节点和容器节点共有的操作。 12345678910111213package CompositeP ...

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。Day.js 可以运行在浏览器和 Node.js 中。 先用 cmd 在vue 项目中添加 dayjs 1npm install dayjs 123456//在 main.js 中挂载import dayjs from 'dayjs'// 全局方法挂载Vue.prototype.$dayjs = dayjs;// 使用方法this.$dayjs(new Date).format("YYYYMMDDHHmmss") 具体方法 参考 dayjs 中文网站： https://dayjs.fenxianglu.cn/

网关简绍就是网络的关口，负责请求的路由、转发、身份校验。 引入网关依赖1234567891011121314 <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</artifactId> </dependency> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artif ...

props 父组件使用 import xxx from "../xxx.vue" 引入子组件 12345678910111213141516171819202122<template> <div class="box"> <h1>props:我是父组件曹操</h1> <hr /> <Child info="我是曹操" :money="money"></Child> </div></template><script setup lang="ts">//props:可以实现父子组件通信,props数据还是只读的！！！import Child from "./Child.vue"import { ref } from "vue";let money = ref(10000);</script>< ...

在子组件中，v-model会将modelValue prop和update:modelValue event绑定在一起，当子组件的input事件触发时会emit一个update:modelValue event，从而更新父组件的message。而在父组件中，v-model会将message与modelValue prop和update:modelValue event绑定在一起，当父组件更新message时，会通过modelValue prop将message传递给子组件，在子组件中输入内容时，会通过update:modelValue event将新的内容传递给父组件更新message。这样就实现了父子组件之间的数据同步。父组件 12345678910111213141516171819202122232425262728293031323334353637383940414243<template> <div> <h1>v-model:钱数{{ money }}{{pageNo&# ...

当父组件想直接调用父组件的属性或者方法时，子组件可以使用defineExpose暴露自身的属性或者方法，父组件中使用ref调用子组件暴露的属性或方法。同样 子组件 可以通过 parent 获取父组件信息 123456789101112131415161718192021222324252627282930313233343536373839404142<template> <div class="box"> <h1>我是父亲曹操:{{money}}</h1> <button @click="handler">找我的儿子曹植借10元</button> <hr> <Son ref="son"></Son> <hr> <Dau></Dau> </div></template><scr ...

在Vue3中，useAttrs是一个用于提供组件属性的自定义hook函数。它的主要作用是为了可以访问到父组件传递给子组件的所有属性。需要注意如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。 12345678910import { defineComponent, useAttrs } from 'vue';export default defineComponent({ setup(props, context) { const attrs = useAttrs(); return { attrs } }}) 我们通过useAttrs()将父组件传递给子组件的所有属性挂载到了attrs变量上，从而方便地访问这些属性。 需要注意的是，如果你的组件有某个属性值是动态变化的，则需要通过watch去监听该属性，并在回调函数中手动更新组件状态。因为useAttrs返回的仅仅是父组件传递过来的静态属性值，它 ...

自定义事件什么是自定义事件在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。 什么是自定义事件通过 $emit 声明自定义事件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849$emit('事件名','参数1','参数2'，'参数...');自定义父组件事件方法 调用 子组件原生dom 事件实现消息回传Event2.vue<template> <div class="child"> <p>我是子组件2</p> <button @click="handler">点击我触发自定义事件xxx</button> <button @click="$emit('click',' ...

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处 https://pinia.web3doc.top/