![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
yrldjsbk
探讨java,vue3,css3等网站,小程序和各种企业软件开发编程技术难题和热点内容。
展开
-
springboot+vue网站开发02-前端页面的渲染代码展示
里面写了2个组件,分别对应,导航组件,新闻列表组件,右侧热点新闻 组件。三个组件,给它起了一个别名:映射。axios里面,关于服务器基础地址baseURL.我之前学习时犯了错,这个必须严格按照官方要求写好,大小写字母不允许自己乱改,只能是这个样子的。如图,我们查看了package.json内容,里面告诉我们,该前端项目,调用了哪些插件。在header头部组件内,有我们想要的导航栏信息,使用了是elementUI的标签。到此为止,我们就已经完成了前端页面请求后端接口,渲染前端页面分类导航栏信息的目的了。原创 2024-02-23 16:44:23 · 503 阅读 · 0 评论 -
vue如何在页面创建一个客服对话框
接下来,在需要展示客服对话框的地方(比如点击按钮后),引入并注册"CustomerServiceDialog"组件。然后根据业务需求控制其显示与否。首先,我们需要定义一个名为"CustomerServiceDialog"的组件,该组件将作为客服对话框显示在页面上。这个是vue组件内的代码情况。使用的编写格式是,vue2的写法。(选项式编码风格)。Vue可以通过使用组件来创建一个客服对话框。最后,在模板中添加相应的元素或事件处理程序来调用。方法,从而控制对话框的显示与隐藏。原创 2024-02-04 14:21:26 · 1316 阅读 · 0 评论 -
vuex前端开发,getters是什么?怎么调用?简单的案例操作
下面通过一些简单的案例,来了解一下,vuex当中的getters到底是什么意思,有哪些实际的操作案例。vuex前端开发,getters是什么?它可以对state进行一些处理,然后返回一个新的值,供组件使用。store中的state进行计算或过滤。Vuex的getters主要用于对。,类似于Vue组件中的。原创 2024-01-16 10:44:40 · 1218 阅读 · 0 评论 -
vue前端开发自学,使用yarn脚手架创建vue项目
默认vscode开发环境,会自动选择到vue3.、你可以使用键盘的上下箭头,控制,我选择了vue2版本。下面展示一下,如何在本机操作,使用yarn这款脚手架,创建一个vue项目。第一步,你需要先创建好,即将存档项目的文件夹。之后,它还会再次提示你,让你选择,使用哪个脚手架。当你看见,下面出现2行蓝色的内容,就说明安装初始化完毕了。如图,启动项目打开了本地浏览器,看见这个页面。说明你的本地vue项目,启动成功了。如图,你可以使用命令“vue -V”来查看一下,当前你使用的cli的版本情况。原创 2024-01-15 11:15:22 · 1035 阅读 · 0 评论 -
vue前端开发,如何正确安装node.js的开发脚手架,yarn
查看yarn的版本号。使用指令“yarn -v”。如图,打印出来了。版本号是1.22.21.如此,你就可以使用yarn来进行脚手架的项目初始化搭建了。原创 2024-01-15 11:04:15 · 585 阅读 · 0 评论 -
vue前端开发自学,祖孙多层级组件嵌套关系数据传输
vue前端开发自学,祖孙多层级组件嵌套关系数据传输!官方提供了一个解决方案,就是,在根组件内使用provide,哪个子孙组件想调用这个数据,就可以inject接收就行了。虽然是方便了,但是这个有点要求,就是只能自上而下的传递。不能反过来(不能子孙给根节点!如图,根组件内,我们使用了函数的样式,调用函数样式的好处!是可以让我们访问到当前页面的动态数据。如图,可以看见,无论是父节点,还是子孙节点,都是可以拿到根节点定义的数据的。parent.VUE组件内的代码展示。child.vue组件内代码展示。原创 2024-01-13 16:50:51 · 506 阅读 · 0 评论 -
vue前端开发自学,异步加载组件,提升用户端的客户体验度
现实项目开发时,组件的数量非常庞大,如果都是一口气加载完,对手机用户来说,体验度会很差。因此,非常有必要使用异步加载。如图,这个就是测试代码所有内容。我们针对组件ComB.vue做了一些小的修正。使用了一个官方提供的函数。那就是,用到了哪个组件,再去加载它就行了。用不到的时候,不加载它。这段代码,很明显是被包围起来 了,使用官方提供的这个函数,就可以实现异步加载的效果。如图,当我们切换组件显示。改成显示ComB.vue时,才触发了该网络请求。下面给大家展示一下,在控制台里观测到的网络请求情况。原创 2024-01-13 15:48:26 · 470 阅读 · 0 评论 -
vue前端开发自学,借助KeepAlive标签保持组件的存活
里面有一个切换数据的按钮。可以控制当前组件里面的p标签的内容。目的是为了显示给大家看看,组件切换的时候,默认是会被卸载的。再次切回来,就会重新走一遍组件的生命流程。这个代码是来自App.vue入口组件的内容。里面我们使用了keepAlive标签,把之前那个组件显示的标签,包围起来。就可以确保,切换组件不会再触发卸载了。如果不想让组件在切换的时候,被默认操作(卸载掉了)。如图,我们再次切换,改成了之前的组件A的显示了。说明,刚刚切换组件时,并未发生卸载。如图,切换组件显示,我们现在看见的切换后的组件B。原创 2024-01-13 19:30:00 · 462 阅读 · 0 评论 -
vue前端开发自学基础,动态切换组件的显示
vue前端开发自学基础,动态切换组件的显示!这个是需要借助于,一个官方提供的标签,名字叫【Component】-[代码demo:]。以上是在app.vue里面写的,一个按钮,绑定点击事件,切换组件A,和组件B的显示。里面很明显,是调用了一个官方提供的标签啊。它有一个属性叫【is】。这个可以绑定一个动态值。然后用函数就可以随意的更改这个动态值。默认情况下,我们给他赋值了。如图,点击切换组件显示按钮后,从组件A,变成了组件B。原创 2024-01-13 14:58:40 · 468 阅读 · 0 评论 -
vue前端开发自学,组件的生命周期函数介绍001
vue前端开发自学,组件的生命周期函数介绍001!今天介绍一下,组件自身的生命周期函数。可以借助于这些钩子函数,实现很多我们预想的效果。比如,在组件渲染 之前,就做一些特殊的操作等等。如图所示,默认情况,在数据尚未发生变化时,只有四个钩子函数显示了。当点击更新按钮后,内容更新了,触发了钩子函数。下面看一下,点击按钮,触发了更新事件之后,页面的发生了哪些变化。大家可以自己下载源码在本地测试一下。原创 2024-01-12 17:37:05 · 465 阅读 · 0 评论 -
vue前端开发自学,插槽练习,同时渲染父子组件的数据信息
如图,这个就是子组件的内容了。里面绑定了自定义属性。第二个插槽里叫job。这2个自定义属性,会被传递到父组件里面对应的各自的Props里面去。它是一个对象,直接使用点操作,就能点出来。如图,这是父组件里面,我们定义了2个具名的插槽内容。准备将来让它们都在子组件里渲染出来。我们加入了自定义属性。这个东西,就是接收数据用的。它可以接收到来自子组件传递过来的数据信息。如果想在slot插槽出口里面,同时渲染出来,来自父组件的数据,和子组件自身的数据呢。vue官方给的解决办法是。需要借助于,父组件的自定义属性。原创 2024-01-12 17:04:28 · 429 阅读 · 0 评论 -
vue前端开发自学,插槽练习第二次,name属性的使用
vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性,来自定义一个名字,这样,就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候,很简答,只需要在slot标签里面加上name=“mz”;如图所示,里面定义了2个插槽,而且都分别对应各自的name。这个内容是app.vue入口文件的内容源码。下面看看,SlotTwo.vue里面的代码情况。如图所示,这个v-slot就是用来自定义插槽的名字的。原创 2024-01-12 15:56:55 · 461 阅读 · 0 评论 -
vue前端开发自学,插槽练习基础内容001
vue前端开发自学,插槽练习基础内容001!今天开始学习插槽的使用。借助于插槽,可以让整段完整的html内容,直接传递到目标位置。如图,以上内容就是SlotBase.vue里面的源码了。就放了一个slot标签,作为插槽内容的出口标记即可。以上内容的是入口文件App.vue的内容。里面我们导入了一个自定义的组件叫做:“SlotBase.vue”;原创 2024-01-12 15:27:40 · 329 阅读 · 0 评论 -
vue前端开发自学,透传属性的练习demo
这是子组件内容,AttrComponent.vue的代码内容。可以看出来,它里面是有且仅有一个根元素,H3标签,如果多一个就不行了。透传属性就会失效了。必须是有且仅有一个根元素才行。vue前端开发自学,透传属性的练习demo!以上代码是,父组件的情况。也是App.vue的入口文件内容。我们还特意做了继承的设定,目前是true。所以可以看见,的确是透传属性class成功了。如果改成false.不允许继承的话,就无法透传那个class属性了。原创 2024-01-12 14:34:57 · 461 阅读 · 0 评论 -
vue前端开发自学,父子组件传递数据,借助于Props实现子传父
里面我们定义了一个事件,名字叫做:“onEvent”,给这个事件呢,绑定了一个函数。将来就是让子组件,接收到这个事件绑定的函数,完成父子之间的数据传递效果。之前我们说过,Props这个是用在父传子的情况下,今天为大家介绍的代码,就是在父组件里,自定义事件,绑定一个函数,让子组件可以接受到这个自定义事件绑定的函数,从而“委婉”的传递数据给父组件。如图,不需要借助其他的方法和事件, 直接调用这个自定义事件绑定的函数,就行了。数据已经给父组件传递过去了。如图,以上代码就是子组件ComB.vue的代码了。原创 2024-01-11 17:44:11 · 575 阅读 · 0 评论 -
vue前端开发自学,组件事件配合v-model实现的动态传递数据
子组件代码,很简单,就是定义个输入框,让模拟用户的搜索业务。当用户输入内容时,可以实时的传递数据信息给父组件!以上是父组件的代码内容,里面调用了一个子组件的标签。已经被引入了,并且声明好了。可以当做一个标签来使用的。下面的案例代码是结合之前学的一些知识点,实现了简单的,父子组件之间动态传递数据的demo。vue前端开发自学,组件事件配合v-model实现的动态传递数据!如图,可以正常实现,父子组件之间动态传递数据的情况。下面看看代码内容和执行效果。原创 2024-01-11 17:19:51 · 817 阅读 · 0 评论 -
vue前端开发自学,子组件传递数据给父组件,使用$emit
可以看见,里面我们有一个按钮绑定了一个点击事件,这个点击事件,会触发一个,this.$emit(),这个东西,就是给父组件传递,数据使用的!在子组件的标签里面,定义了一个事件,名字有点奇怪,这个就是vue2老版本里面的称谓:“自定义事件”,其实在这里vue3简称了而已。父子组件之间互相传递数据的情况非常常见,下面为大家介绍的是,来自子组件,给父组件传递数据的情况。如图,点击按钮,就可以看见,在父组件里,确实是接受到了来自子组件传递过来的信息了。可以看出来,里面的特殊点,在于,有个子组件的引用和标签的调用。原创 2024-01-11 16:58:58 · 536 阅读 · 2 评论 -
vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!
如图,以上是CompontA.vue的源码内容,里面有一个动态数据,title,如果父组件传递给了子组件,那么,就可以在子组件内正常显示出来这个信息了。实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认值的设定等等。下面介绍一下,其他的类型默认值的定义情况,比如,数组,对象都需要借助于函数的形式来定义默认值。如图,这是成功拿到了父组件传递的信息 ,下面是父组件不穿值的情况下,显示了子组件自己定义的一个默认值的情况。原创 2024-01-11 16:20:40 · 718 阅读 · 0 评论 -
vue前端开发自学demo,父子组件之间传递数据demo2
vue前端开发自学demo,父子组件之间传递数据demo2!实际上,组件之间传递数据的,数据类型,是可以多种多样的,下面为大家展示几个常见的数据类型,比如数字类型,数组类型,对象类型。如图所示,以上代码就是,三种类型的,第一个年龄age,是数字类型。第二个名字的数组,第三个是一个用户信息的,对象类型。下一期内容给大家分享的是,Props传递数据的时候需要做校验,针对类型校验的内容。如图,都可以正常获取到,在子组件里,可以正常获取到父组件传递过来的数据内容。原创 2024-01-11 15:27:25 · 517 阅读 · 0 评论 -
vue前端开发自学,父子组件之间的数据传递demo
下面为大家展示的是,vue开发中常见的,父子级别关系的,数据 传递案例。先给大家看一下,源码,然后讲解一下里面的注意事项。如图,是执行后,在浏览器内看见的执行效果。子组件确实拿到了父组件传递过来的数据。而且是使用了动态的方式。当然了,你可以使用静态绑定的数据,一样也可以传递过来的。注意事项:vue这个传递数据的方向,是父传给 子。以上是使用了静态数据的方式,一样可以在子组件拿到数据的,下面是执行效果!如图,以上代码是Child.vue的源码内容。如图,拿到了父组件绑定的静态数据内容。原创 2024-01-11 15:10:38 · 557 阅读 · 0 评论 -
vue前端开发自学,组件的嵌套关系demo
介绍说明,这个可以看出来,我们采用的都是局部引用的方式,vue其实还有一个叫全局注册(全局引用)的方式,那个不利于项目打包,还有也不利于逻辑关系的分辨,所以官方不推荐使用全局引用!一般来说,都是局部引用较为常见的。有些公司,开发项目的时候,前端页面的组件,喜欢放在Views(名字不同而已),其实就是存放的前端组件。今天开始分享的,前端开发经常用到的,组件的嵌套关系案例代码。这个是App.vue,入口文件的源码,如图所示。这个是Article.vue的源码,如上所示。这个是Item.vue的源码,如上所示。原创 2024-01-11 11:54:58 · 439 阅读 · 0 评论 -
vue前端开发自学,ref为什么称作“钩子”,看完你就明白
之前我也是不太了解,为什么业内人士,喜欢把ref这个东西叫做“钩子”,看完今天的案例demo,就能深刻的体会到,这个名字的来历了。众所周知,vue框架,其实是把前端开发人员,之前经常苦闷的一些javascript操作dom的事情,给做了大量的封装!虽然如此,有些功能需求,可能您真的是,迫不得已,需要去操作dom了。那么,ref就来了。如图,成功执行了方法的内容,并且,再次点击获取dom元素内容,可以看见,已经获取到了修改之后的新内容了。代码非常简单,一个p标签,2个button按钮,绑定了各自的点击事件。原创 2024-01-10 17:33:37 · 572 阅读 · 0 评论 -
Vue3前端开发自学demo,事件修饰符-阻止默认事件和冒泡事件
下面演示的代码是,vue3前端开发技术里面经常遇到的,阻止默认事件,例如,阻止a标签的href属性,跳转到一个别的地址去。这是传统的方式,阻止默认事件的发生。但是在vue3开发里面,为了节省程序员的开发时间,提升办事效率,植入了很多修饰符。同理,如果你想阻止冒泡事件,只需要写成【@click.stop】即可实现了。直接在事件后面使用.prevent即可实现,阻止默认事件的效果。如图片指向的位置,就是,vue3的事件修饰符,效果案例展示。Vue3前端开发自学demo,事件修饰符-阻止默认事件。原创 2024-01-06 15:15:25 · 858 阅读 · 0 评论 -
vue前端开发自学demo-input标签数据双向绑定
今天为大家 展示的内容是,前端开发常见的,form表单里面的,一些输入数据的元素,动态绑定数据的案例。vue提供的这种指令,很惬意,可以极大的提升前端开发人员的工作效率。如图,用户勾选了之后,点击注册按钮,打印在控制台的信息。如图所示,第一个部分内容,是input数据动态绑定的内容。这个截图,是用户没有勾选checkbox的时候,默认状态 是false,点击注册按钮,进入了else代码块内。第一张图是,如果用户勾选了,“我同意所有条款内容”切点击了注册按钮,触发了register的情况。原创 2024-01-10 16:32:41 · 736 阅读 · 0 评论 -
vue自学,main.js文件配置引入时间日期格式化自定义函数
视频里老师讲解了一些基础的配置,但是,老师的视频里,传入的参数是错误的,老师视频内传入了参数是一个时间戳。实际上,应该传入的是:“2023-2-25 9:10:10”这种类型,才能正常解析执行。一个是导入刚刚自己创建的js文件,第二个是让vue组件的过滤器里,注册一下,给它取个名字,“format”。我测试了,注释掉后,依然可以正常执行的。如图,显示的是正常的,8小时前,1天前,52分钟前,说明自定义的时间函数执行了。如图,在脚本配置内,导入这个函数,在属性值后面就可以直接用format来过滤时间内容了。原创 2023-02-25 17:18:11 · 218 阅读 · 0 评论 -
vue自学,window.addEventListener不生效解决方案
自己的代码里写的时候,多了一个小括号,导致代码不生效。百度反复查询了各种解决方案,最终,在对比网友的解决方案时候,注意到了这个细节,发现网友的方法调用,也是不带小括号的。我去掉括号后,代码生效了。最近在网上跟着别人的教程视频自学vue,在给window对象添加监听事件后,发现起初,一直没有效果。找不到原因,比较困惑。如图,出现了 这个脚本的图标,点击,就会回到页面的顶部,大于400像素后会出现,小于400像素是不会出现的。如图,这是自定义一个判定,要不要显示该图标的代码。如图,这是老师视频里面的截图代码。原创 2023-02-25 14:58:42 · 7158 阅读 · 0 评论 -
vue开发,node.js启动报错‘digital envelope routines
vue开发,node.js启动报错'digital envelope routines!最近在学习vue,打算使用node.js启动一下自己的vue项目。毕竟,现在主流的都是这个本地服务器。肯定有它的好处。但是启动总是报错。各种错误,耐住性子,百度查询各种解决方案。下面分享给大家。1:检查本地电脑的环境变量是否添加正确。我的是存档在了D盘下面,你的这个nodejs安装在哪,就去哪里找,写自己的路径即可。后面不需要带反斜杠。2:检查自己的开发环境软件Hbuilder-x,运行环境配置是否 正确。3:如果还是报原创 2023-02-24 14:49:50 · 229 阅读 · 0 评论 -
vue自学练习,计算属性的使用案例demo
比如,前端页面,经常会出现,一些数据变更后,无法及时渲染出来结果的尴尬情况。可以借助于computed属性,来自定义你想要掌控的区域,该区域内的属性值一旦发生变化,马上就可以看见一连串修正后的数据结果,被渲染在前端页面内了。在前端的页面内,借助于console命令修改了message2的值,可以看见马上也跟着变化了,对应的reverseMessage。如图,这个计算属性,是和data,methods,在一个层级上面的,平级关系。这是在前端有一个原始的字符串,如果客户修改了这个字符串的内容,那么,原创 2023-02-23 16:20:44 · 80 阅读 · 0 评论 -
vue自学练习,v-bind:指令的使用
图片,文字,视频,你想在页面内渲染什么内容,都是可以从后端经过业务处理后,包装成json格式,传递到前端来渲染的。这个指令,可以细颗粒,细粒度的修改html标签的一些属性,如图,sd,如果你给他赋值为href,那么,将来渲染出来的页面里,它就是href,后面跟着的值,我这里使用的写法是,借助于中括号,来自定义一个属性,名字自定义,真正达到了自由掌控的地步。使用vue的好处,就是,你可以借助于后端的程序,来随心所欲的修改前端页面的内容。比如下面的例子,可以修改a标签的href的值。就是href对应的值。原创 2023-02-23 15:58:50 · 87 阅读 · 0 评论