mez_Blog的博客

插槽是vue中的一个非常强大且灵活的功能，在写组件时，可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽，可以极大提高组件的客服用和灵活性。插槽大体可以分为三类：默认插槽，具名插槽和作用域插槽。下面将一一介绍。

然后我们可能会有疑问，既然爷爷可以向孙组件传递数据，那么孙可不可以修改爷爷的数据呢，其实，原理和当时的props是一样的，这种方式虽然不能直接修改爷爷的值，但是可以让爷爷再传递一个方法给孙组件，然后孙组件调用这个方法，完成对爷爷的修改。这样我们就可以看到对应的x和y也被传递过来了，然后我们的关注重点是祖孙传值，而不是父子传值，所以这个brother组件就是一个桥梁，其作用就是不使用父组件的值，直接将父组件传递的值使用$attrs直接传递给孙组件。来到界面，我们点击按钮，就可以修改爷爷的数据。

还有就是那个update:aaa中的update，这里使用update是vue框架官方的写法，如果想要叫其他值，就还需要父组件传递对应的事件@custom-update:myValue="someData = $event"，过程也比较繁琐，这里只是说明为什么那里要叫update。在实际的开发中还是使用这种固定命名的比较便于开发。其中，有几个需要注意的地方，就是使用defineProps()时，注意区分v-model的值和父子传值的属性。这样就完成了自定以组件的双向绑定。注意和之前的父组件内容进行对比。

在开发项目时，需要使用@符号来代替书写./和../等麻烦的路径书写，所以就遇到了下面的问题。

c:/Users/10834/Desktop/0716_project/vite_Ts_Project/src/views/screen/index.vue”隐式拥有 "any" 类型。服气，就是这样的一个小问题，一开始自己的解决访问直接使用的@ts-ignore这样直接忽略了ts类型检查。这个路由信息是一个ts文件，而引入的vue文件没有设置lang="ts"，这就解释了为什么有的模块不报错，就个别引入模块报错。看看，回答的模糊其词，我的tsconfig.json文件几乎为空，没有进行配置。

因为npm库上的包都会实时更新，比如以前的包名都有可能出现改变，比如以前叫particles-vue3，而目前叫做npm i @tsparticles/vue3,使用该命令进行安装，并且还出现了其他包的依赖，否则不能正常显示粒子效果，一个是import { loadFull } from 'tsparticles'，另一个是import {loadSlim} from 'tsparticles-slim'，这两个选择一个即可，对应着不同的粒子效果。问题4：在使用npm的粒子库时，没有出现预期的效果。

在Vue.js项目中，Vuex通常被用作状态管理库，尤其是在大型或复杂的应用中，它提供了一种集中管理所有组件共享状态的方式。对于兄弟组件之间的通信，Vuex可以作为一个很好的解决方案，因为它允许状态被全局访问和修改。

写一个按钮，当我们点击按钮的时候，就可以看到arrTest2返回的值，我们可以看到多了一个true，因为在执行every后，this.testEvery=true，对应页面的testEvery值也会进行显示。然后解释一下，这里首先使用filter方法将满足选中状态的商品进行过滤，返回的是一个数组，然后再将返回的数组使用累加方法reduce进行金额的计算。解释一下，第一个参数就是传递过来的值，是加1，还是加-1，第二个值就是对应的索引，因为要对对应的商品进行数量加减操作，所以需要对应商品的索引。

所以，简而言之，在实际的开发中，上面的数组列表一般是后端返回出来的数据，我们需要使用v-for将这些数据进行渲染，但是在使用v-for的时候也必须要加key，并且key的取值要有唯一性，一般都是数据的ID，比如学生列表的学生ID，或商品列表中的商品ID。3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；4.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，实际项目中如果没有id，推荐使用index）

computed：是计算属性，依赖其他属性值，并且computed的值有缓存，当依赖的属性值发生改变时，才会重新计算computed的值，默认是只读的（相当于getter函数），它也可以设置getter和setter函数来完成读和写。（1）、造成数据混乱：如：一个父级组件的数据传递给多个子组件，某个子组件如果通过Props修改父组件的数据，父级组件再修改其他子组件，其他子组件就会莫名其妙的被修改，造成数据混乱。watch：属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数。

在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）简单理解：导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等细小的过程，在每一个过程中都有一个函数，这个函数能让你操作一些其他的事的时机，比如跳转前是否验证登录，这就是导航守卫。常用于发送网络请求。

Plugin就是插件，基于事件流框架Tapable，插件可以扩展Webpack的功能，在Webpack运行的声明周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。在以上过程中，Webpack会特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。③如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；

调整pages.json即可，默认的层级关系是index为最上的，比如说我们想展示的是home页面，我们需要将home页面的配置代码放到index代码信息上面。如果我们发布的界面没有显示，只显示了默认的uni-app的默认界面，说明我们的页面层级关系需要调增一下。在一开始安装小程序开发工具时是关闭的，我们在这里单击即可，就可以打开服务端口。我想将我的Vue代码发布到小程序中，看一下我的代码在小程序运行的状况。右上角的预览，也就是运行你的Vue项目的界面效果，下面就是展示界面。首先，打开小程序开发工具。

此原因也有解释：eslint根据eslint配置文件的parserOption，知道了要使用babel对代码进行解析，但是解析babel需要使用babel配置文件，由于找不到配置文件（babel配置文件默认需要放在根目录下），所以会报错。因此，添加requireConfigFile: false，本质上是告诉eslint，不用查找这个配置文件了，虽然表面上可以解决这个报错，但是在babel配置文件里写的东西也就失效了。就是找到.eslintrc.js这个文件，保存后，就不会再次报错了。

混入（mixins）定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin对象的钩子将在组件自身钩子之前调用。比如，数据对象在内部会进行浅合并（一层属性深度），在和组件的数据发生冲突时以组件数据优先。以下实例中，Vue实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配置了，则为/a/b。设置replace属性的话，当点击时，会调用router.replace()而不是router.push()，导航后不会留下history记录。当被点击后，内部会立刻把to的值传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。to属性为目标地址，即要显示的内容。以下实例中我们将Vue-router加进来，然后配置组件和路由映射，再告诉vue-router在哪里渲染他们。

例如在v-my-directive.foo.bar中，修饰对象为{foo:true,bar:true}。例如在v-my-directive：foo中，arg为“foo”。除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。value：传递给指令的值。beforeUNmount：当指令与在绑定元素父组件卸载之前时，只调用一次。updated：在包含组件的VNode及其子组件的VNode更新后调用。unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

但是有时我们可能向把值绑定到当前活动实例的一个动态属性上，这时可以用v-bind实现，此外，使用v-bind可以将输入值绑定到非字符串。v-model会忽略所有表单的value、checked、selected属性的初始值，使用的是data选项中声明的初始值。我们可以用v-model指令在表单、及等元素上创建双向数据绑定。这通常很有用，因为在type=“number”时HTML中输入的值也总是返回字符串类型。记得在多选时按住Ctrl键，要不然还是单选。

Vue.js为v-on提供了事件修饰符来处理DOM事件细节，如:event.preventDefault()或event.stopPropagation()。我们可以使用v-on指令来监听DOM事件，从而执行JavaScript代码。v-on可以接收一个定义的方法来调用。.self--只监听触发该元素的事件。.prevent--阻止默认事件。.middle--中间滚轮事件。.capture--阻止捕获。.once--只触发一次。.right--右键事件。.stop--阻止冒泡。.left--左键事件。

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。如果你的组件有多个根元素，你需要定义哪部分将接收这个类。我们可以在v-bind:style直接设置样式，可以简写:style。也可以直接绑定到一个样式对象。

同时使用多个类，并存在多个相同属性时，不管是class，还是：class，都会显示最后那个重复属性的定义。class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。v-bind在处理class和style时，表达式除了可以使用字符串外，还可以是对象或数组。这和前面写css的顺序有关，如果同时设置为TRUE，后写的css会遮盖先写的css属性。此外，:class指令也可以与普通的class属性共存。当同时设置为TRUE的时候，后面的红色也会遮盖前面的颜色。

异步数据的加载Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。我们可以通过watch来响应数据的变化。以下实例我们使用axios库。异步加载中使用watch。

我们可以用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。vm.reversedMessage依赖于vm.message，在vm.message发生改变时，vm.reversedMessage也会更新。可以说使用computed性能会更好，但是如果不希望缓存，我们可以使用methods属性。计算属性在处理一些复杂逻辑时是很有用的。这样就能正常显示了。

比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。上面的示例中我们的组件都是通过component全局祖册的。

不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密结合。v-for指令需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名。我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。下面的script里面的内容相当于声明，在上面的HTML中可以不用，并不影响代码执行。这里的命名并不是固定的，但是比较规范的写法是左边为键key,右边为值value。v-for/v-if联合使用。

例子都不再换的，中间又添加了v-else-if项而已，这里只是seen不满足的情况，也就是不会有seen2,seen3.那我们来把对应的seen2或seen3设置为TRUE，那么其他的都是false喽。注意：当我们使用v-else时，都是放在最后一项用的，不要弄错v-else和v-else-if的顺序。编程这玩意就是要试着举一反三，同样的例子，我们再来看v-else-if,感觉和js或大部分的编程语言类似，只是前面多了v-而已。条件判断使用v-if指令，指令的表达式返回true时才会显示.

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。v-model指令用来在input、select、textarea、CheckBox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素值。在该实例中，v-if指令将根据表达式seen的值（TRUE或false）来决定是否插入p元素。在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。参数在指令后以冒号指明。按钮的时间我们可以使用v-on监听事件，并对用户的输入进行响应。

{{}}标签的内容将会被替代为对应组件实例中message属性的值，如果message属性的值发生了改变，{{}} 标签内容也会更新。如果不想改变标签的内容，可以通过使用v-once指令执行一次性地插值，当数据改变是，插值的内容不会更新。以上代码中如果isButtonDisabled的值是null或undefined，则disabled 属性甚至不会被包含在渲染出来的元素中。Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

因为我们是用空白项目测试的，但是实际中还是要修改一下index.html中引入的css和JavaScript路径，因为是绝对路径，所以我们要改成相对路径。一个应用需要被挂载到一个dom元素中，以上代码使用mount('#hello-vue')将Vue应用HelloVueApp挂载到中。-p, --present《presentName》：忽略提示符并使用已保存的或远程的预设选项。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。