yrldjsbk的博客

里面写了2个组件，分别对应，导航组件，新闻列表组件，右侧热点新闻 组件。三个组件，给它起了一个别名：映射。axios里面，关于服务器基础地址baseURL.我之前学习时犯了错，这个必须严格按照官方要求写好，大小写字母不允许自己乱改，只能是这个样子的。如图，我们查看了package.json内容，里面告诉我们，该前端项目，调用了哪些插件。在header头部组件内，有我们想要的导航栏信息，使用了是elementUI的标签。到此为止，我们就已经完成了前端页面请求后端接口，渲染前端页面分类导航栏信息的目的了。

接下来，在需要展示客服对话框的地方（比如点击按钮后），引入并注册"CustomerServiceDialog"组件。然后根据业务需求控制其显示与否。首先，我们需要定义一个名为"CustomerServiceDialog"的组件，该组件将作为客服对话框显示在页面上。这个是vue组件内的代码情况。使用的编写格式是，vue2的写法。（选项式编码风格）。Vue可以通过使用组件来创建一个客服对话框。最后，在模板中添加相应的元素或事件处理程序来调用。方法，从而控制对话框的显示与隐藏。

下面通过一些简单的案例，来了解一下，vuex当中的getters到底是什么意思，有哪些实际的操作案例。vuex前端开发,getters是什么？它可以对state进行一些处理，然后返回一个新的值，供组件使用。store中的state进行计算或过滤。Vuex的getters主要用于对。，类似于Vue组件中的。

默认vscode开发环境，会自动选择到vue3.、你可以使用键盘的上下箭头，控制，我选择了vue2版本。下面展示一下，如何在本机操作，使用yarn这款脚手架，创建一个vue项目。第一步，你需要先创建好，即将存档项目的文件夹。之后，它还会再次提示你，让你选择，使用哪个脚手架。当你看见，下面出现2行蓝色的内容，就说明安装初始化完毕了。如图，启动项目打开了本地浏览器，看见这个页面。说明你的本地vue项目，启动成功了。如图，你可以使用命令“vue -V”来查看一下，当前你使用的cli的版本情况。

查看yarn的版本号。使用指令“yarn -v”。如图，打印出来了。版本号是1.22.21.如此，你就可以使用yarn来进行脚手架的项目初始化搭建了。

vue前端开发自学,祖孙多层级组件嵌套关系数据传输！官方提供了一个解决方案，就是，在根组件内使用provide,哪个子孙组件想调用这个数据，就可以inject接收就行了。虽然是方便了，但是这个有点要求，就是只能自上而下的传递。不能反过来（不能子孙给根节点！如图，根组件内，我们使用了函数的样式，调用函数样式的好处！是可以让我们访问到当前页面的动态数据。如图，可以看见，无论是父节点，还是子孙节点，都是可以拿到根节点定义的数据的。parent.VUE组件内的代码展示。child.vue组件内代码展示。

现实项目开发时，组件的数量非常庞大，如果都是一口气加载完，对手机用户来说，体验度会很差。因此，非常有必要使用异步加载。如图，这个就是测试代码所有内容。我们针对组件ComB.vue做了一些小的修正。使用了一个官方提供的函数。那就是，用到了哪个组件，再去加载它就行了。用不到的时候，不加载它。这段代码，很明显是被包围起来 了，使用官方提供的这个函数，就可以实现异步加载的效果。如图，当我们切换组件显示。改成显示ComB.vue时，才触发了该网络请求。下面给大家展示一下，在控制台里观测到的网络请求情况。

里面有一个切换数据的按钮。可以控制当前组件里面的p标签的内容。目的是为了显示给大家看看，组件切换的时候，默认是会被卸载的。再次切回来，就会重新走一遍组件的生命流程。这个代码是来自App.vue入口组件的内容。里面我们使用了keepAlive标签，把之前那个组件显示的标签，包围起来。就可以确保，切换组件不会再触发卸载了。如果不想让组件在切换的时候，被默认操作（卸载掉了）。如图，我们再次切换，改成了之前的组件A的显示了。说明，刚刚切换组件时，并未发生卸载。如图，切换组件显示，我们现在看见的切换后的组件B。

vue前端开发自学基础,动态切换组件的显示！这个是需要借助于，一个官方提供的标签，名字叫【Component】-[代码demo:]。以上是在app.vue里面写的，一个按钮，绑定点击事件，切换组件A，和组件B的显示。里面很明显，是调用了一个官方提供的标签啊。它有一个属性叫【is】。这个可以绑定一个动态值。然后用函数就可以随意的更改这个动态值。默认情况下，我们给他赋值了。如图，点击切换组件显示按钮后，从组件A，变成了组件B。

vue前端开发自学,组件的生命周期函数介绍001！今天介绍一下，组件自身的生命周期函数。可以借助于这些钩子函数，实现很多我们预想的效果。比如，在组件渲染 之前，就做一些特殊的操作等等。如图所示，默认情况，在数据尚未发生变化时，只有四个钩子函数显示了。当点击更新按钮后，内容更新了，触发了钩子函数。下面看一下，点击按钮，触发了更新事件之后，页面的发生了哪些变化。大家可以自己下载源码在本地测试一下。

如图，这个就是子组件的内容了。里面绑定了自定义属性。第二个插槽里叫job。这2个自定义属性，会被传递到父组件里面对应的各自的Props里面去。它是一个对象，直接使用点操作，就能点出来。如图，这是父组件里面，我们定义了2个具名的插槽内容。准备将来让它们都在子组件里渲染出来。我们加入了自定义属性。这个东西，就是接收数据用的。它可以接收到来自子组件传递过来的数据信息。如果想在slot插槽出口里面，同时渲染出来，来自父组件的数据，和子组件自身的数据呢。vue官方给的解决办法是。需要借助于，父组件的自定义属性。

vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性，来自定义一个名字，这样，就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候，很简答，只需要在slot标签里面加上name=“mz”；如图所示，里面定义了2个插槽，而且都分别对应各自的name。这个内容是app.vue入口文件的内容源码。下面看看，SlotTwo.vue里面的代码情况。如图所示，这个v-slot就是用来自定义插槽的名字的。

vue前端开发自学,插槽练习基础内容001！今天开始学习插槽的使用。借助于插槽，可以让整段完整的html内容，直接传递到目标位置。如图，以上内容就是SlotBase.vue里面的源码了。就放了一个slot标签，作为插槽内容的出口标记即可。以上内容的是入口文件App.vue的内容。里面我们导入了一个自定义的组件叫做：“SlotBase.vue”；

这是子组件内容，AttrComponent.vue的代码内容。可以看出来，它里面是有且仅有一个根元素，H3标签，如果多一个就不行了。透传属性就会失效了。必须是有且仅有一个根元素才行。vue前端开发自学,透传属性的练习demo！以上代码是，父组件的情况。也是App.vue的入口文件内容。我们还特意做了继承的设定，目前是true。所以可以看见，的确是透传属性class成功了。如果改成false.不允许继承的话，就无法透传那个class属性了。

里面我们定义了一个事件，名字叫做：“onEvent”，给这个事件呢，绑定了一个函数。将来就是让子组件，接收到这个事件绑定的函数，完成父子之间的数据传递效果。之前我们说过，Props这个是用在父传子的情况下，今天为大家介绍的代码，就是在父组件里，自定义事件，绑定一个函数，让子组件可以接受到这个自定义事件绑定的函数，从而“委婉”的传递数据给父组件。如图，不需要借助其他的方法和事件， 直接调用这个自定义事件绑定的函数，就行了。数据已经给父组件传递过去了。如图，以上代码就是子组件ComB.vue的代码了。

子组件代码，很简单，就是定义个输入框，让模拟用户的搜索业务。当用户输入内容时，可以实时的传递数据信息给父组件！以上是父组件的代码内容，里面调用了一个子组件的标签。已经被引入了，并且声明好了。可以当做一个标签来使用的。下面的案例代码是结合之前学的一些知识点，实现了简单的，父子组件之间动态传递数据的demo。vue前端开发自学,组件事件配合v-model实现的动态传递数据！如图，可以正常实现，父子组件之间动态传递数据的情况。下面看看代码内容和执行效果。

可以看见，里面我们有一个按钮绑定了一个点击事件，这个点击事件，会触发一个，this.$emit()，这个东西，就是给父组件传递，数据使用的！在子组件的标签里面，定义了一个事件，名字有点奇怪，这个就是vue2老版本里面的称谓：“自定义事件”，其实在这里vue3简称了而已。父子组件之间互相传递数据的情况非常常见，下面为大家介绍的是，来自子组件，给父组件传递数据的情况。如图，点击按钮，就可以看见，在父组件里，确实是接受到了来自子组件传递过来的信息了。可以看出来，里面的特殊点，在于，有个子组件的引用和标签的调用。

如图，以上是CompontA.vue的源码内容，里面有一个动态数据，title,如果父组件传递给了子组件，那么，就可以在子组件内正常显示出来这个信息了。实际上，vue开发框架的时候，充分考虑到了前端开发人员可能会遇到的各种各样的情况，比如大家经常遇到的，数据类型的校验，再比如，默认值的设定等等。下面介绍一下，其他的类型默认值的定义情况，比如，数组，对象都需要借助于函数的形式来定义默认值。如图，这是成功拿到了父组件传递的信息 ，下面是父组件不穿值的情况下，显示了子组件自己定义的一个默认值的情况。

vue前端开发自学demo,父子组件之间传递数据demo2!实际上，组件之间传递数据的，数据类型，是可以多种多样的，下面为大家展示几个常见的数据类型，比如数字类型，数组类型，对象类型。如图所示，以上代码就是，三种类型的，第一个年龄age,是数字类型。第二个名字的数组，第三个是一个用户信息的，对象类型。下一期内容给大家分享的是，Props传递数据的时候需要做校验，针对类型校验的内容。如图，都可以正常获取到，在子组件里，可以正常获取到父组件传递过来的数据内容。

下面为大家展示的是，vue开发中常见的，父子级别关系的，数据 传递案例。先给大家看一下，源码，然后讲解一下里面的注意事项。如图，是执行后，在浏览器内看见的执行效果。子组件确实拿到了父组件传递过来的数据。而且是使用了动态的方式。当然了，你可以使用静态绑定的数据，一样也可以传递过来的。注意事项：vue这个传递数据的方向，是父传给 子。以上是使用了静态数据的方式，一样可以在子组件拿到数据的，下面是执行效果！如图，以上代码是Child.vue的源码内容。如图，拿到了父组件绑定的静态数据内容。

介绍说明，这个可以看出来，我们采用的都是局部引用的方式，vue其实还有一个叫全局注册（全局引用）的方式，那个不利于项目打包，还有也不利于逻辑关系的分辨，所以官方不推荐使用全局引用！一般来说，都是局部引用较为常见的。有些公司，开发项目的时候，前端页面的组件，喜欢放在Views（名字不同而已），其实就是存放的前端组件。今天开始分享的，前端开发经常用到的，组件的嵌套关系案例代码。这个是App.vue，入口文件的源码，如图所示。这个是Article.vue的源码，如上所示。这个是Item.vue的源码，如上所示。

之前我也是不太了解，为什么业内人士，喜欢把ref这个东西叫做“钩子”，看完今天的案例demo，就能深刻的体会到，这个名字的来历了。众所周知，vue框架，其实是把前端开发人员，之前经常苦闷的一些javascript操作dom的事情，给做了大量的封装！虽然如此，有些功能需求，可能您真的是，迫不得已，需要去操作dom了。那么，ref就来了。如图，成功执行了方法的内容，并且，再次点击获取dom元素内容，可以看见，已经获取到了修改之后的新内容了。代码非常简单，一个p标签，2个button按钮，绑定了各自的点击事件。

下面演示的代码是，vue3前端开发技术里面经常遇到的，阻止默认事件，例如，阻止a标签的href属性，跳转到一个别的地址去。这是传统的方式，阻止默认事件的发生。但是在vue3开发里面，为了节省程序员的开发时间，提升办事效率，植入了很多修饰符。同理，如果你想阻止冒泡事件，只需要写成【@click.stop】即可实现了。直接在事件后面使用.prevent即可实现，阻止默认事件的效果。如图片指向的位置，就是，vue3的事件修饰符，效果案例展示。Vue3前端开发自学demo,事件修饰符-阻止默认事件。

今天为大家 展示的内容是，前端开发常见的，form表单里面的，一些输入数据的元素，动态绑定数据的案例。vue提供的这种指令，很惬意，可以极大的提升前端开发人员的工作效率。如图，用户勾选了之后，点击注册按钮，打印在控制台的信息。如图所示，第一个部分内容，是input数据动态绑定的内容。这个截图，是用户没有勾选checkbox的时候，默认状态 是false，点击注册按钮，进入了else代码块内。第一张图是，如果用户勾选了，“我同意所有条款内容”切点击了注册按钮，触发了register的情况。

视频里老师讲解了一些基础的配置，但是，老师的视频里，传入的参数是错误的，老师视频内传入了参数是一个时间戳。实际上，应该传入的是：“2023-2-25 9:10:10”这种类型，才能正常解析执行。一个是导入刚刚自己创建的js文件，第二个是让vue组件的过滤器里，注册一下，给它取个名字，“format”。我测试了，注释掉后，依然可以正常执行的。如图，显示的是正常的，8小时前，1天前，52分钟前，说明自定义的时间函数执行了。如图，在脚本配置内，导入这个函数，在属性值后面就可以直接用format来过滤时间内容了。

自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。

vue开发，node.js启动报错'digital envelope routines！最近在学习vue，打算使用node.js启动一下自己的vue项目。毕竟，现在主流的都是这个本地服务器。肯定有它的好处。但是启动总是报错。各种错误，耐住性子，百度查询各种解决方案。下面分享给大家。1：检查本地电脑的环境变量是否添加正确。我的是存档在了D盘下面，你的这个nodejs安装在哪，就去哪里找，写自己的路径即可。后面不需要带反斜杠。2：检查自己的开发环境软件Hbuilder-x,运行环境配置是否 正确。3：如果还是报

比如，前端页面，经常会出现，一些数据变更后，无法及时渲染出来结果的尴尬情况。可以借助于computed属性，来自定义你想要掌控的区域，该区域内的属性值一旦发生变化，马上就可以看见一连串修正后的数据结果，被渲染在前端页面内了。在前端的页面内，借助于console命令修改了message2的值，可以看见马上也跟着变化了，对应的reverseMessage。如图，这个计算属性，是和data，methods,在一个层级上面的，平级关系。这是在前端有一个原始的字符串，如果客户修改了这个字符串的内容，那么，

图片，文字，视频，你想在页面内渲染什么内容，都是可以从后端经过业务处理后，包装成json格式，传递到前端来渲染的。这个指令，可以细颗粒，细粒度的修改html标签的一些属性，如图，sd，如果你给他赋值为href，那么，将来渲染出来的页面里，它就是href，后面跟着的值，我这里使用的写法是，借助于中括号，来自定义一个属性，名字自定义，真正达到了自由掌控的地步。使用vue的好处，就是，你可以借助于后端的程序，来随心所欲的修改前端页面的内容。比如下面的例子，可以修改a标签的href的值。就是href对应的值。