![](https://img-blog.csdnimg.cn/20210705193757866.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 79
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为
别团等shy哥发育
硕士在读,对分布式、中间件、容器、微服务、深度学习、机器学习与数据挖掘方面感兴趣,希望可以在这些方面和大家交流学习方法。
后续文章会搬到这里:www.codeleader.top
展开
-
Vuex页面刷新的数据丢失问题
在实际项目中,经常会遇到多个组件需要访问同一个数据的情况,且都需要根据数据的变化作出响应,而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下就需要一个全局的状态管理方案-Vuex。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原创 2023-03-02 03:15:00 · 283 阅读 · 0 评论 -
Vue子组件向父组件传值this.$emit()
Vue子组件向父组件传值this.$emit1、问题描述2、解决方案:`this.$emit()`方法1、问题描述 今天碰到了个问题,我有个属性分组的页面,该页面中引入两个子组件,一个是左侧的属性菜单子组件,另一个是新增按钮的对话框组件。右侧为一个表格,显示左边树形菜单中三级分类的所有商品。 但是通过新增按钮添加商品之后,右侧的表格并不会刷新显示最新的数据。 我们的目的是子组件中表单提交之后通知父组件刷新表格中的数据。2、解决方案:this.$emit()方法 子组件某些功能想要与父原创 2022-05-29 16:52:26 · 2967 阅读 · 3 评论 -
element树形结构表格与懒加载
树形表格与懒加载1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入el-table组件3.2 实现效果1、实现效果2、后端实现2.1 实体类@Data@ApiModel(description = "数据字典")@TableName("dict")public class Dict { private static final long serialVersionUID = 1原创 2022-01-01 16:11:11 · 2078 阅读 · 1 评论 -
element ui table组件的基本使用
文章目录1、需求2、后端2.1 后端接口2.2 mybatisplus分页配置3、前端3.1 绑定数据与分页条3.2 实现效果1、需求 前后端分离项目,将后端返回的JSON格式数据在前端用vue友好显示出来,这时候就需要用到饿了么的element ui框架了,这个框架简直是后端开发人员的福音。 这里主要用到的是element ui table组件 基本的依赖下载与环境配置这里不做介绍。2、后端 后端提供访问接口即可。(先配置跨域) 这里是条件查询带分页 查询所有医院的设置信息,原创 2021-12-31 21:22:51 · 1575 阅读 · 0 评论 -
gyp ERR stack Error: Command failed: D:\python\python.EXE -c import sys; print
文章目录1、问题描述2、解决方案1、问题描述网上clone的开源项目在执行npm install的时候报错如下:2、解决方案经过多方查证,后来发现是python的版本太高了,我重新配置了个python2.7的环境变量就好了。配好环境变量之后,在终端中执行:// 设置confignpm config set python D:\Python27上面python27是我环境变量中的路径。设置完成之后,再次执行npm install命令就可以成功下载依赖了。...原创 2021-12-30 17:37:05 · 10255 阅读 · 0 评论 -
vue实现下拉框二级联动效果
vue实现下拉菜单二级联动效果1、实现效果2、后端返回的数据格式3、vue页面中1、实现效果2、后端返回的数据格式"list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" },原创 2021-11-01 23:02:05 · 9816 阅读 · 13 评论 -
前后端分离博客小项目
1、前言一个前后端分离的博客小项目,为了适合后续的拓展和微服务化体系等,选择SpringBoot作为后端开发框架。然后数据层,我们常用的是Mybatis,易上手,方便维护。但是单表操作比较困难,特别是添加字段或减少字段的时候,比较繁琐,所以这里我推荐使用Mybatis Plus(mp.baomidou.com/),为简化开发而生,只… CRUD 操作,从而节省大量时间。作为一个项目骨架,权限也是我们不能忽略的,Shiro配置简单,使用也简单,所以使用Shiro作为我们的的权限。考虑到项目可能需要部署多原创 2021-08-11 11:33:19 · 256 阅读 · 0 评论 -
vue的 v-for指令报“custom elements in iteration require v-bind:key“错误
文章目录1、问题描述2、解决方案:1、问题描述今天再用v-for指令进行遍历的时候出现custom elements in iteration require v-bind:key错误。2、解决方案:为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为列表的每一项提供一个唯一key属性。key属性的类型只能是string或number。例如我修改之后的代码如下: <el-timeline-item :timestamp="blog.created" plac原创 2021-08-07 23:18:51 · 2450 阅读 · 1 评论 -
Vue的Eslint报错‘res‘ is defined but never used
一、问题描述在开发Vue项目时,出现警告:‘res’ is defined but never used二、解决方案:在对应需要忽略校验的行上面加上下面这句注释://eslint-disable-line no-unused-varsps:当然也可以通过修改全局配置文件的校验规则,但那个风险大,先不改那个了。...原创 2021-08-07 21:51:55 · 3092 阅读 · 1 评论 -
Vue状态管理——Vuex
文章目录1、序言2、安装Vuex3、基本用法1、序言前面我们已经介绍过父子组件之间的通信方式,父组件通过prop向子组件传递数据,子组件通过自定义事件向父组件传递数据。然而,在实际项目中,经常会遇到多个组件需要访问同一数据的情况,且都需要根据数据的变化做出响应,而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下,就需要一个全局的状态管理方案。在Vue开发中,官方推荐Vuex。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态,并以相应的原创 2021-07-27 10:44:30 · 421 阅读 · 0 评论 -
Vue动态路由
Vue动态路由1、添加路由2、在导航守卫中添加路由3、删除路由3.1 通过添加名称冲突的路由。3.2 通过调用router.addRoute()函数返回的回调。3.3 通过调用router.remoceRoute()函数按名称删除一个路由。4、添加嵌套路由5、查看现有路由 向路由器添加路由通常是通过routes选项完成的,但是在某些情况下,我们可能希望在应用程序已经运行时添加或删除路由,也就是以编程的方式添加或删除路由。1、添加路由 动态路由主要通过两个方法来实现:router.addRoute(转载 2021-07-24 18:20:18 · 1578 阅读 · 2 评论 -
Vue模块化开发使用路由
文章目录一、Vue模块化开发使用路由1、为项目安装vue-router,选择终端->新终端选项,在弹出的终端窗口中输入以下命令安装vue-router。2、在App.vue中设置导航链接和组件渲染的位置。修改其模板内容,并将应用HelloWorld组件的地方删除。修改后的代码如下所示。3、定义路由组件。在components目录下新建Home.vue、News.vue、Books.vue和Videos.vue四个文件。4、单独定义一个模块文件,配置路由信息。5、在程序入口main.js文件中,使用ro原创 2021-07-23 18:48:11 · 769 阅读 · 1 评论 -
Vue Router前端路由
感受前端路由1、简介2、HTML页面使用路由1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求,服务器处理请求后向浏览器推送页面。在单页应用程序中,不同视图(组件的模板)的内容都是在同一个页面中渲染,页面间的跳转都是在浏览器端完成,这就需要用到前端路由。在Vue.js中,可以使用官方的路由管理器Vue Router。Vue Router需要单独下载,可以使用CDN方式应用Vue Router<script src="https://unpkg.com/vue-router@nex原创 2021-07-23 18:13:46 · 195 阅读 · 3 评论 -
Vue CLI
Vue CLI1、简介2、安装3、创建项目3.1 vue create1、简介 在开发大型单页应用时,需要烤炉项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务无关的事情,对于项目中用到的构建工具、代码检查工具等还需要一遍一遍地重复配置。这很浪费时间,物品们会选择一些能够创建脚手架地工具,来帮助搭建一个项目地框架,并进行一些项目所依赖地初始配置。 在Vue.js环境中,这个脚手架工具就是Vue CLI,利用这个工具,可以自动生成一个基于Vue.js地单页应用地脚手架项目。2、原创 2021-07-22 17:52:05 · 190 阅读 · 0 评论 -
Vue递归组件
Vue递归组件1、递归组件2、实例1、递归组件 组件可以在自己的模板种递归调用自身,但这需要使用name选项为组件指定一个内部调用的名称。当调用Vue.createApp({}).component({})全局注册组件时,这个全局的ID会自动设置为该组件的name选项。 递归组件和程序语言中的递归函数调用一样,都需要有一个条件结束递归,否则就会导致无限循环。例如,可以通过v-if指令(表达式计算为假时)结束递归。2、实例 下面看一个分类树状显示的例子,代码如下:<!DOCTYPE h原创 2021-07-18 22:26:46 · 355 阅读 · 0 评论 -
Vue组件通信的其他方式
Vue组件通信的其他方式一、序言二、组件通信的其他实现方式2.1 访问根实例2.2 访问父组件实例2.3 访问子组件实例或子元素2.4 provide和inject一、序言总结一下前面介绍的组件通信的3种方式:父组件通过prop向子组件传递数据。子组件通过自定义事件向父组件发起通知或进行数据传递。子组件通过<slot>元素充当占位符,获取父组件分发的内容;也可以在子组件的<slot>元素上使用v-bind指令绑定一个插槽prop,向父组件提供数据。现在介绍组件通信的其他原创 2021-07-18 17:55:04 · 216 阅读 · 3 评论 -
Vue动态组件
Vue动态组件1、序言2、实例1、序言 在页面应用程序中,经常会遇到多标签页面,在Vue.js中,可以通过动态组件来实现。组件的动态切换是通过在<component>元素上使用is属性实现的。2、实例 实现效果如下: 上图中的3个标签是3个按钮,下面的内容部分由组件来实现,3个按钮对应3个组件,按钮响应click事件,单机不同按钮时切换至不同的组件,组件切换通过<component>元素和其上的is属性实现。 3个组件的实现代码如下:app.compone原创 2021-07-18 15:35:33 · 193 阅读 · 1 评论 -
Vue使用插槽分发内容
Vue使用插槽分发内容1、简介2、编译作用域3、默认内容4、命名插槽5、作用域插槽6、动态插槽名1、简介 组件是当作自定义元素使用的,元素可以有属性和内容,通过组件定义的prop接收属性值,可以解决属性问题,那么内容呢?这可以通过<slot>元素解决。此外,插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。Vue.component('greeting',{ template:'<div><slot></slot原创 2021-07-17 18:01:50 · 333 阅读 · 0 评论 -
Vue表单输入绑定
文章目录1、简介2、单行文本输入框3、多行文本输入框4、复选框5、单选按钮6、选择框7、值绑定7.1 复选框7.2 单选按钮7.3 选择框的选项8、实例:用户注册1、简介 表单控件的数据绑定就是用v-model指令实现的,它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型,如文本输入框、复选框、单选按钮、选择框等,v-model指令在不同的表单控件上应用时也会有所差异。2、单行文本输入框<!DOCTYPE html><html> <head>原创 2021-07-13 00:18:19 · 724 阅读 · 4 评论 -
Vue监听器
Vue监听器1、监听器简介2、使用监听器3、监听器的更多形式1、监听器简介 Vue中的监听器主要用于监测组件实例的数据变动,并依据该数据变动作出响应,如更新一个数据,或者发起异步请求从服务器端请求数据。与计算属性不同的是,监听器不需要返回新的数据,不能被当作数据属性使用,当需要在数据变化时执行异步或开销较大的操作时,使用监听器是最合适的。2、使用监听器 监听器在Vue实例的选项对象的watch选项中定义。<!DOCTYPE html><html> <head&原创 2021-07-12 22:32:38 · 608 阅读 · 3 评论 -
Vue计算属性
文章目录1、计算属性的定义2、计算属性的缓存3、v-for和v-if一起使用的替代方案4、实例:购物车的实现1、计算属性的定义 表达式的逻辑过于复杂的时候,应当考虑使用计算属性。计算属性是以函数形式,在选项对象的computed选项中定义。我们将字符串翻转的功能用计算属性实现,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-07-09 17:09:17 · 258 阅读 · 0 评论 -
Vue常用内置指令
Vue内置指令1、v-show2、v-if3、v-else-if/v-else4、v-for4.1 v-for遍历数据4.2 v-for遍历对象5、 v-bind6、v-model7、v-on8、v-text9、v-html10、v-once11、v-pre12、v-cloak13 v-slot1、v-show v-show指令根据表达式的真假,显示或隐藏HTML元素。 使用v-show指令,元素本身是要被渲染的,至于是否显示是通过设置CSS样式属性display来控制的,如果表达式的值为fals原创 2021-07-08 16:35:20 · 551 阅读 · 0 评论 -
初识vue.js模板语法
初识vue.js模板语法1、简介2、实例代码:3、解释1、简介 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将呈现的DOM绑定至底层组件实例的数据。所有的Vue.js模板都是有效的HTML,可以被符合规范的浏览器和HTML解析器解析。 在底层,Vue将模板编译为虚拟DOM呈现函数,结合响应式系统,当应用程序状态发生变化时,Vue可以智能地计算出需要重新渲染和应用最小数量DOM操作的组件。2、实例代码:<!DOCTYPE html><html lang="en原创 2021-07-05 19:33:42 · 154 阅读 · 0 评论