ONLYSRY的博客

组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。const url = new URL('静态路径', import.meta.url).href。是一个 ESM 的原生功能，会暴露当前模块的 URL。使用vue2+webpack的时候是用require引入图片。vite找不到对应的图片路径，需要使用下面的方式进行处理。第一个参数即图片的路径，这里就是对应require中的值。第二个参数是vite的一个全局变量，可以理解成直接写死了。

如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。

这样的话就可以让odoo前后端分离，实现前端程序员用vue或者react直接写即可、写表单功能逻辑、然后odoo后端依旧写逻辑层、然后调接口即可、实现自己的ERP做到取其精华去其糟粕的阶段、完全定制（当然权限问题能解决的话、我感觉如果auth=‘user’的话肯定就拿不到数据、要不然也太不安全了）。昨天看到了一个视频：前端单独写web层、后端用odoo也是可行的，通过controller层就可以拿到前端数据，进行数据库的增删改查、还挺有趣。我们来看看请求响应：都是200请求成功，响应数据也渲染到了页面上。

代码如下：有很多不需要的css与js 用的时候可以删一下。如图所示： 可展开双击关闭等。

比如现在有一个json对象为jsonObj，需要给这个对象添加新的属性newParam，同时给newParam赋值为new。现在需要在以上json对象上新增一个新的属性 count，写法为【 this.optitem.count = e.value 】需要传递的json结构如下：this.optitem。添加新属性：newParam ='new。

一、Vue3中的生命周期1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method2、onBeforeMount() : 组件挂载到节点上之前执行的函数；3、onMounted() : 组件挂载完成后执行的函数；4、onBeforeUpdate(): 组件更新之前执行的函数；5、onUpdated(): 组件更新完成之后执行的函数；6、onBeforeUnmount(): 组件卸载之前执行的函数；

定义组件使用defineProps语法糖，在 中可直接使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 中是直接可用的，无需引入。因为vue3中没有了data(){ },那么就没办法劫持数据做到响应式数据，所以使用ref。定义数据需要在数据前面加ref，ref在vue3中是将数据转换成响应式数据结构的一种,在js中使用ref的值必须通过value获取。

它采用参数“callback”函数，该函数检查提供的条件满足的typedArray的每个元素。如果元素满足函数提供的条件，则返回数组中的索引；否则，返回-1。

备忘录：使用node.js打开cmd控制台使用npm命令安装：成功标识： 创建项目：CD到要创建项目的目录下： 选择版本完成创建：启动项目 浏览器访问8080端口与，项目启动。

在input框里输入搜索关键字，借助github给的api，能够搜索到真实用户与头像。 代码部分：在main.js里引入axios，一会发请求要用到。终端里也要：在 vue的配置文件vue.config.js里边 关闭语法检查App.vue与components中的两个组件：【与】App.vueList.vueSearch.vue.........

在app.vue里使用组件Category 添加一个img 如果不使用插槽的方式在Category中定义，虽然vue会解析这个img，但是它并不知道要往哪里放这个东西。还是不会展示： 往Category里加入标签就能把图片放到想要的位置 如果不传递时将会展示标签内部写的东西。完整Demo如图所示： App.vue代码：Category.vue代码：main.js代码：......

写一个count组件：app.vue里引用这个组件:知识点：这里有一个小细节，通过select 选择过后里边的number数字就会变成字符型，导致出现点击2+1变成21而不是3，直接会拼接字符串。这里可以采用 两种方式来解决：............

Demo还是这个。但是本次使用vuex的方式来写： run一下代码大概就能清楚执行的流程顺序了。store文件夹一般单独来写，在main中引入时 ./store 会自动寻找到/index目录，如果有index。Count.vue: index.js代码：App.vue代码：main.js代码：原理图：通过store中有三个内置方法 Actions，Mutations，State。使用时一般会通过 $store.dispatch ——> Actions(用来响应动作) ——> 然后再

getters方法的使用：四个map方法的使用：承接上一篇的Count.vue，更改插值语法中的{{$store.state.sum}}下边用计算属性来做更改。

代码示例： Person组件：Count组件：vuex中：使用生成唯一id的这个nanoid包时要npm一下import { nanoid } from "nanoid"; 这里使用mapstate使用数组的方式，相当于手写personlist方法然后return 这一长串的东西。在Count组件中：调试一下就能理解，记录个博客更能加深印象。......

vuex的index.js【模块化写法】把该放的东西放到固定位置：并加上命名空间：【namespaced: true】其次我们引入了 两个管理配置名：countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions，Mutations，State。必须加入一层关系，vue执行时就会疑惑，你到底要找countAbout下的配置项还是personAbout下的，所以前边的写法也得改。Count.vue组件：这里需要关注的重点为：1.前边

模块化+命名空间1. 目的：让代码更好维护，让多种数据分类更加明确。2. 修改```store.js``` 3. 开启命名空间后，组件中读取state数据： 4. 开启命名空间后，组件中读取getters数据：5. 开启命名空间后，组件中调用dispatch 6. 开启命名空间后，组件中调用commit......

vue使用vscode自动生成template模板

首先要在终端中 vue2的话用bootstrap3版本 vue3的话用4版本然后再main.js里引入即可

单网页呈现，点击About或Home时进行切换，但不会刷新网页，整个过程由前端实现，并未产生任何请求的发送。使用单页面时只刷新局部需要展示的地方，比多页面效果好。使用VueRouter时需要npm vue-routervue-router为一个插件，所以使用时还是导入再调用Vue.use(VueRouter)路由使用时和vuex相似，也是有要创建一个单独的包。router下的index为默认路径。导入并创建一个路由器，并暴露里边的路由。上方为导入需要使用的两个组件About与Home。这部分有两

路由1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2. 前端路由：key是路径，value是组件。基本使用1. 安装vue-router，命令：2. 应用插件：Vue.use(VueRouter)3. 编写router配置项: 4. 实现切换（active-class可配置高亮样式）【xxx.vue文件】 5. 指定展示位置【xxx.vue文件】 几个注意点1. 路由组件通常存放在```pages```文件夹，

这里把组件细分化，手写的组件称为一般组件，而路由自动生成的放入到pages里边，称为路由组件，pages放的都是不完整的页面。结构如下图所示，进行细分。Banner组件：这个组件也仅此是把最上边的头文件给单独细分了一个组件，仅此而已。Home组件：这个组件里嵌套了两个子组件，如浏览器图片展示就能看到。所以这里路由的写法也应该有所改变，这里的to="/home/news" 要从父组件开始寻找，并找到下一级中的子组件，同样使用 来确定展现位置。 Router/index.j.........

正常携带传递参数：把to的query写成对象的方式：接收参数：

给路由命名：简化跳转：

``````的replace属性1. 作用：控制路由跳转时操作浏览器历史记录的模式2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3. 如何开启```replace```模式：```News```............

1. 作用：不借助 实现路由跳转，让路由跳转更加灵活2. 具体编码：

1. 作用：让不展示的路由组件保持挂载，不被销毁。

$nextTick路由组件中所独有的两个钩子，用于捕获路由组件的激活状态。

- 作用: 定义一个响应式的数据- 语法: ```const xxx = ref(initValue)``` - 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 - JS中操作数据： ```xxx.value``` - 模板中读取数据: 不需要.value，直接：```{{xxx}}```- 备注： - 接收的数据可以是：基本类型、也可以是对象类型。 - 基本类型的数据.........

- setup执行的时机 - 在beforeCreate之前执行一次，this是undefined。- setup的参数 - props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 - context：上下文对象 - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 ```this.$attrs```。 - slots: 收到的插槽内容, 相当于 ```this.$slots```。 - emit: 分发自定义事件的函数

- 与Vue2.x中computed配置功能一致，写法如下：

- 与Vue2.x中watch配置功能一致- 两个小“坑”： - 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 - 监视reactive定义的响应式数据中某个属性时：deep配置有效。 //情况一：监视ref定义的响应式数据 //情况二：监视多个ref定义的响应式数据 /* 情况三：监视reactive定义的响应式数据 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！

- watch的套路是：既要指明监视的属性，也要指明监视的回调。- watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 - watchEffect有点像computed： - 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。 - 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。......

toRaw：作用：将一个由生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的，例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。......

升级vue至最新版本【vue3.2非常香，反正以后都要用新的，何不直接学新的，setup语法糖了解一下】vue-V或者vue--version。脚手架版本命令，这个大家倒是都知道。