秋秋小事

创建Vuex Strore在state中声明要存储的数据对象。在自定义组件ComA中使用car.js中存储的car数据对象。将car.js引入到全局store中的modules中。通过getter获取state中对象属性的值。下面是一个拆分出的store，car.js。读取state中对象的值。

使用混合器，scss中的条件语句，通过v-for实现一组button的不同背景色的配置，在scss中混合器与if-else条件语句一起使用，可以实现一些更复杂的页面样式。在日常的开发中，我们可能有些一能够复用的style，我们不希望重复写这些样式，此时我们可以使用Scss的混合器。，使用scss的混合器配置button样式。

最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码，发现这两个框架的style样式都是用的scss，今天进行了scss系统性的研究学习。

在日常的开发中，我们常常遇到这样的需求：点击一个button改变页面中某个元素的样式，在这样的场景中，我们可以使用v-bind绑定css中的var变量，来动态的切换元素的样式。在setup语法糖环境下，点击一个button动态切换另一个元素的背景色。

在Typscript中，我们可以使用PropType进行类型的推断与验证。在日常的开发中我们常常会遇到下面这样的场景：我们通过request请求从服务端获取了一条数据，数据是个Array的格式，Array中的每个元素又是一个对象，像下面这样的数据title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},title: "标题三",description: "描述三",},

在vue中重用代码的方式有：组件、组合式函数。组件是主要的构建模块，而组合式函数更偏重于有状态的逻辑。指令系统给我们提供了例如：v-model、v-bind，vue系统允许我们自定义指令，自定义指令也是一种重用代码的方式。自定义指令常用于封装一些普通元素的Dom底层访问逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。// 在绑定元素的 attribute 前// 或事件监听器应用前调用// 下面会介绍各个参数的细节},

三段代码分别为，组件文件、main函数文件、使用全局组件的vue文件。组件的注册有两种方式：全局组件注册、局部组件注册。import以后可以在template中直接使用。

组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。我们可以把一些可以复用的逻辑封装成组合式函数放到js文件中，在vue文件中通过import来使用这些逻辑，使vue文件更瘦，逻辑更清晰。一个小栗子，// x、y为ref响应式的number类型return num;

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能。以上四段代码分别对应了四个文件，需要异步加载的子组件、子组件加载错误时的页面，子组件加载中的loading页面，以及使用异步组件的父组件。以上三个文件，以此为需要加载的全局异步组件、main函数、使用全局异步组件的vue文件。单文件中加载全局异步组件。，单文件中异步加载组件。

默认插槽、具名插槽只能访问使用者的作用域，插槽的内容无法访问子组件的数据。某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。在这个例子中子组件中使用了ref，可以看到子组件中的值发生变化时，在父组件中显示的值也有更新。在子组件中声明x、y两个点，通过按钮增加它们的值，并在使用者的作用域中展示x、y最新的值。有时我们在同一个组件中希望使用多个插槽，此时可以使用具名插槽。如果需要访问子组件中的作用域，则使用作用域插槽。，同一个子组件中同时使用具名插槽和默认插槽，代码如下。

我们在使用模版语法时有时会使用三位运算符去处理一些简单的逻辑，当一个变量的值依赖了其它变量，并进行了一些逻辑上的处理时，我们可以使用computed计算属性去处理。一个小栗子,计算属性的值与其它属性有计算关系时，使用计算属性可以把独立的计算逻辑代码块包装到函数里一个小栗子，计算属性的值在它依赖的属性值改变时随之改变，当它依赖的属性值不变时，计算属性的值会被存在缓存中，下一次读取这个值时，会直接在缓存中读取。

inputvalue最新的值为 = {{ inputString }}</div></div>

关于provide与inject下面是vue官网上的一些介绍通常情况下，当我们需要从父组件向子组件传递数据时，会使用props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：注意，虽然这里的组件可能根本不关心这些 props，但为了使能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。

watch在默认情况下是懒加载的，仅在数据源发生变化时才会触发。但在某些场景下，我们希望在创建watch时立即执行一次回调。传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。当点击button时，会在回调事件中改变person的属性，从而触发侦听器watch。侦听响应式ref常量，当常量的ref的value值发生改变时会出发watch。系统默认是深层监听，当响应式对象的属性发生改变时，会触发watch。在使用时，主要是在代码中加入：{deep: true}

vue2 配置less

nvm安装多个node版本

注意：在元素中无法直接使用titles，在外边我们声明同名的变量titles，并使用ref，通过props.titles设置ref的值，从父组件传过来值后，页面中元素的值会实时更新。子组件TableForm中的代码如下，使用defineProps声明props，并设置type和default默认值。父组件中代码如下,使用:titles(子组件props设置的变量),取出父组件中声明的变量titles数组。5 子组件中元素的点击事件点击后，调用父组件中的一个方法。子组件中的代码如下，是小程序的例子。

【代码】vue3 v-for的一个错误。

关闭ESLint

关于vue3环境的配置

新建了一个vue项目，当使用如下代码时报错了<style scoped less="lang">报错的信息如下：大致意思是有依赖包没有找到，此时我在代码中去掉了scoped less="lang",只留下一个空的style，再次运行时正常显示了，然后我重新加回他们，在chrome中发现了报错信息，看到了找不到less-loader，然后我使用npm安装less-loader报了以下错误：大致意思是，less-loader8.1.1需要webpack5.0.0的环境，le

一 工程的目录结构1 结构中各文件夹的功能build：用于存放webpack相关配置与脚本。开发中偶尔使用此文件夹下的webpack.base.conf.js文件，用于配制less、sass等css预编译库，或者配置UI库config：存放配置文件。此文件夹下config.js配置开发环境的端口号、是否开启热加载等功能dist：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。node_modules:存放npm命令下载的开发环境和生产环境的依赖包。..

一 创建工程1 在系统中预先创建一个文件夹，预备将创建的vue工程存放在文件夹中。打开终端，使用cd命令到预留的文件夹下 这里的Vue_Study是创建的预留文件夹，demo1是创建的工程文件夹lscd Vue_Studyvue init webpack demo1这时系统会给一些提示：Project name: 工程名字Project description: 工程描述Author:作者Install vue-router:是否安装router，可以安，也...