悦涵仙子的技术笔记本

如果是生产环境（如通过 nginx 或 Node.js 部署），端口由部署的服务器配置决定，需修改对应的服务器配置文件（如 nginx.conf 或 server.js）。找到 projects -> [project-name] -> architect -> serve -> options。绑定 IP 允许局域网访问 ng serve --host 0.0.0.0 --port 4300。终止占用端口的进程（如 kill -9 $(lsof -t -i:4300)）。

如果需要 高性能虚拟滚动，建议考虑其他方案（如 cdk-virtual-scroll + 自定义树组件）。如果你有更具体的需求（例如 动态加载扁平数据），可以提供更多细节，我可以帮你优化实现！nz-tree 的数据结构是 嵌套的（nzData），而不是扁平的。使用 *ngFor + 缩进样式 模拟树形结构（适用于简单场景）。换用 Angular Material 的 （如果项目允许）。推荐使用原生嵌套结构（nzData），避免复杂转换。再转换为嵌套结构（nz-tree 需要的格式）。

在 NG-ZORRO（Ant Design for Angular） 的 Tree 组件 中，getCheckedNodeList 方法用于获取当前选中的节点列表（包括半选状态节点）。nzCheckedKeys 是双向绑定的选中 key 数组，而 getCheckedNodeList 返回的是完整的节点对象（包含 title、children 等属性）。如果节点是异步加载的，调用 getCheckedNodeList 前需确保数据已渲染（可在 setTimeout 或数据加载完成的回调中调用）。

这个示例展示了如何使用 Vue Router 的 router-link 的 custom 属性和 v-slot 来实现高度自定义的路由导航组件。通过 v-slot，我们可以访问到 navigate 函数来控制导航，并可以根据路由的活动状态来动态改变按钮的样式。插槽：我们通过插槽传入了按钮的文本内容，例如 “Go to Home”、“Go to About” 等，允许每个链接自定义显示的文本。custom 属性：启用了 router-link 的自定义插槽，允许我们替换默认的。

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers proptitle?: string,: {: {: {: {emit('update:modelValue' , false) emit('update:title' , '我要改变') }()emit('update:title', '我要改变')

在 Vue 3 中，有两种声明组件的方式。

实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。在 Vue 3 中，兄弟组件之间传参无法直接进行，需要通过共同的父组件或全局状态管理工具来实现。3.使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有。兄弟A组件更改从父组件provide过来的值，导致兄弟B组件inject的值也发生改变。兄弟组件可以通过父组件传递数据，利用事件 (emit) 和 props 实现通信。// 用于存储兄弟组件之间传递的数据。A组件派发（emit）

在 Vue 3 中，provide 和 inject 是一对用于依赖注入的 API，可以在组件树中共享数据或功能，而无需通过 props 明确传递或使用事件进行通信。这对于管理共享状态、配置或服务特别有用。

defineProps 提供了一种简洁的方式来声明和处理组件的 props，尤其是在 Vue 3 的 Composition API 中。在 Vue 3 中，defineProps 是 Composition API 中的一个函数，用于在子组件中声明接收的 props。在这个例子中，defineProps 会返回一个 props 对象，你可以在组件中通过解构或直接引用来访问传递进来的 props。语法糖，在常规的 Vue 3 Composition API 中，你还是需要使用 props 选项。

这样赋值页面是不会变化的因为会脱离响应式。

【代码】toRef，toRefs，toRaw。

env.stage.env.prod.env.local.env.dev.gitignore。

NODE_ENV=…可以在命令中设置，也可以在 .env 文件中设置。在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。npx rimraf node_modules 这个命令是在使用 Node.js 开发时，用于删除项目中的 node_modules 文件夹的命令。使用 Node.js 运行 Vite 的构建命令，并手动设置 Node.js 的老生代内存限制为 8 GB，以确保在构建大型项目时有足够的内存可用。

随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换，这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined。二、另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。

它由如下 3 部分组成：① yudao-spring-boot-starter-biz-pay (opens new window)组件：对接微信、支付宝等支付，提供统一的 PayClient 支付客户端 (opens new window)。② yudao-module-pay (opens new window)后端模块：实现支付中心的后端功能，包括支付、退款等能力。基于 PayClient 支付客户端，对接微信、支付宝等支付渠道。

vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件，利用defineEmits方法返回函数触发自定义事件，defineEmits方法不需要引入直接使用。

在package.json里加入：“dev:live”: “nodemon ./src/app.ts”2.安装跨域和表单中间件。3.编写index.js。2.安装修改自动更新。

env文件是一个用于存储环境变量的文件。在开发和部署应用程序时，经常需要在不同的环境中配置不同的变量，例如 API 地址、数据库连接信息、密钥等。在许多应用程序中，.env 文件通常包含一个或多个键值对，用于存储环境变量。Vite 中的 .env 文件还可以用于配置构建时的变量需要注意的是，Vite 中的环境变量必须以 VITE_ 前缀开头才能被识别。例如，如果您在 .env 文件中定义了一个名为 API_URL 的变量，它将不会被 Vite 识别。您应该将其命名为 VITE_API_URL。

异步组件以前是通过将它们包含在方法中来声明的。Vue3 中需要使用 defineAsyncComponent 来声明异步组件。每个框架都有学习曲线，Vue3 相对 Vue2 更加陡峭，在框架切换之间也会有一定的学习成本。但 Vue3 组合式 API 相对 Vue2 选项式 API 确实更加简洁易用。如果您在使用过程中有什么疑问，也欢迎留言交流。

vue3项目创建

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router使用插件通过全局方法 Vue.use() 使用插件。它

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>局部过滤器你可以在一个组件的选项中定义

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。例子：// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件var Comp.

Bus，通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。注意：记得销毁自定义事件，否则容易造成内存泄露。基本使用具体实现方式：var Bus = new Vue();Bus.$emit("add-todo", { text: this.newTodoText });Bus.$on("add-todo", this.addTodo);Bus.$off("add-todo", this.addTodo);

你已经知道了 $emit 的用法，它可以被 v-on 侦听，但是 Vue 实例同时在其事件接口中提供了其它的方法。你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件时，它们是派得上用场的。通过 $ on(eventName, eventHandler) ：监听当前实例上的自定义事件。事件可以由 vm.$ emit 触发。回调函数会接收所有传入事件触发函数的额外参数。通过 $once(eventName,eventHandler) ：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会

为何称其为简单粗暴方式呢？因为根据官方文档指示：在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。访问根实例在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function ().

我们推荐你始终使用 kebab-case 的事件名，即my-event形式。自定义组件的 v-model一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change'

子组件通过this.$emit()的方式将值传递给父组件，注意：这里的func是父组件中绑定的函数名子组件代码：<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { data () {

一、父组件向子组件传值父组件向子组件传值，子组件只要使用props接收即可。<style scope> .hide{ display:none; }</style>/*父组件*/<template><div class="parent"> <span v-for="(item,index) in message" @click="clickHandle(index)">{{item.value}}

prop 的大小写 (camelCase vs kebab-case)当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<

学习vue第一步肯定是安装vue-cli，那么肯定想去搜下如何安装vue-cli呢？网上搜到的结果大都是：npm i vue-cli -g输入vue -v发现：为何vue版本还不是最新的3.x版本原因是你刚开始安装时就输入了安装2.x版本的指令，新版本的指令是 @vue/cli 而非 vue-cli正解：安装最新版的：卸载2.x版本的vue-cli ：npm uninstall -g vue-cli 或 yarn global remove vue-cli安装3.x版本的@vue/cl

不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。 大部分的情况中，是开发者使用了错误的写法，例如：这样写肯定是不对的，正确的写法应该使用v-bind:不过，有时候即使使用了正确的语法，依旧无法显示图片，因为你的imgUrl使用了本地图片的路径。 例如

前言 在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。 于是我开始先去搜索，发现vue2.0的生命周期没啥文

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'his

vue1.0中 vm.dispatch和vm.dispatch 和 vm.broadcast 被弃用，改用emit,emit,onvm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。

1.基本用法vue2.0提供了一个keep-alive组件 用来缓存组件,避免多次加载相应的组件,减少性能消耗<keep-alive> <component> <!-- 组件将被缓存 --> </component></keep-alive> 有时候可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的在使用keep-alive的情况下<keep

1.npm安装npm install babel-polyfillnpm install es6-promisepackage.json中会出现"babel-polyfill": "^6.26.0","es6-promise": "^4.1.1",2.main.js引入import 'babel-polyfill'import Vue from 'vue'import Es6Promise

http://www.linqing07.com/resume.htmlhttp://www.flqin.com/#page2http://cv.heeroluo.net/

对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;//使用官方vue-cli脚手架书写　　//观察数据为字符串或数组　　 　　 　　/当单观察数据examples2为对象时，如果键值发生