Vue
vue
igxia
这个作者很懒,什么都没留下…
展开
-
若依框架(2)使用若依框架进行二次开发
细心的同学应该发现我这里并没有复制Controller文件,因为Controller文件并不在这个模块里面,而是在ruoyi-admin模块里面,重复刚才的动作,将Controller文件复制到ruoyi-admin的web/system下。因为就想我们普通的vue项目,你没有在路由里面设置对应的路径,你也访问不了那个组件。我这里还真报错了,后端改了各个报错的地方完成启动,但是前端我忘了又有需要改import路径的地方,在我们复制进views文件夹里面两个文件夹的index.view里面,我们找到其。原创 2023-06-13 13:45:39 · 41280 阅读 · 2 评论 -
若依-分页查询失效
list是进行了分页操作的,如果我本函数的返回值就是getDataTable(list),那么我的分页查询出错不了一点。在使用若依框架开发管理后台的时候,由于业务逻辑的需要,自己定义了一个DTO类,将与数据库对应的entity类进行封装。在进行二次封装之后发现返回的数据没有进行分页,并且总数也只为10(数据库总共90多条数据,每页数据数量为10),也就是只有一页的数据。我的代码是带有startPage的,也就是startPage开启了我下面这行代码的分页。自己重新封装之后调用,前端可以正常分页。原创 2023-06-08 13:05:30 · 2850 阅读 · 0 评论 -
若依框架(一)使用若依框架从0到1快速搭建springboot + vue 项目
在项目启动之前,我们现需要对配置文件进行修改,并打开特定应用,这里我们先打开ruoyi-admin模块下的application-druid.yml,将数据库链接地址和用户名密码更改为我们自己的。(我这里是已经进行二次开发的页面),未进行二次开发的登录账号和密码应该是admin和admin123,并且表单最上面展示的是若依管理系统。点击之后进入到gitee,点击 “克隆/下载”,选择下载方式,可以实用git命令进行git克隆,也可以直接选择下载zip,这里推荐新手就下载zip就可以了。原创 2023-06-02 16:52:15 · 9376 阅读 · 6 评论 -
elemenui中的el-table表中使用图片el-img
与错误示例的主要区别是给需要用到属性的元素的父元素指定 slot-scope = “scope”,并在 :src 的路径指定通过 scope.row.XX的形式指定。el-table-clumn中使用v-bind元素,是不能获取el-table正在进行展示的数据的所以上述代码并不能在单元格内展示图片。elementUI显然考虑到了这一点,为我们提供了内置属性slot-scope,通过访问其内置的row属性可以访问到表格每一列的变量名。原创 2023-06-02 14:04:00 · 873 阅读 · 0 评论 -
uniapp的两个跳转方式
uniapp内置多种跳转方式,我这里介绍两个最常用的跳转,uni.navigateTo和uni.switchTab,前者为跳转到非TabBar页面,后者为跳转到TabBar页面,所谓TabBar就是底部导航栏配置的页面,例如下方的index.vue。配置成导航栏的页面无法通过navigateTo方法跳转,只能通过switchTab方法。原创 2022-12-25 14:07:53 · 5555 阅读 · 2 评论 -
vue+springboot前后端分离项目跨域问题一行代码解决
例如:前端设置端口为8001,后端设置端口为8002,这时想要在前端向后端发送ajax等请求则会报错。在controller类上加一个@CrossOrigin注解该问题即可解决。原创 2022-11-19 13:04:45 · 222 阅读 · 0 评论 -
使用宝塔Linux面板上传前端 Vue项目至云服务器
本篇文章是以前端vue框架演示。原创 2022-10-26 14:41:32 · 973 阅读 · 1 评论 -
uniapp相对于vue的变化
cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件。除了内置组件,还有很多开源的扩展组件,把常用操作都进行封装,DCloud建立了插件市场收录这些扩展组件,详见插件市场。因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如。uni-app在不同的端,支持条件编译,无限制的使用各端独有的api,原创 2022-10-24 10:48:49 · 288 阅读 · 0 评论 -
vue常用的UI组件库
1、移动端常用的UI组件库1. Vant https://youzan.github.io/vant2. Cube UI https://didi.github.io/cube-ui3. Mint UI http://mint-ui.github.io 4. Nut UI nutui.jd.com#### 2、PC端常用的UI组件库1. Element UI https://element.eleme.cn2. IView UI https://www.i原创 2022-10-23 16:19:12 · 380 阅读 · 1 评论 -
vue路由器的两种工作模式
2若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。1.对于一个url来说,什么是hash值?——#及其后面的内容就是hash值。2.hash值不会包含在HTTP请求中,即: hash值不会带给服务器。 1.地址中永远带着#号,不美观。原创 2022-10-23 16:14:15 · 89 阅读 · 0 评论 -
vue路由守卫
2.分类:全局守卫、独享守卫、组件内守卫。1.作用:对路由进行权限控制。原创 2022-10-23 16:12:49 · 119 阅读 · 0 评论 -
缓存路由组件,让组件来回切换时数据不会“消失“
例:在当前组件的输入框输入数据时切换到另一个组件在重新切换到输入框组件,之前所在输入框输入的数据会消失。这是因为从一个组件切换到另一个组件的时候,原来的组件连同组件中已有的数据会一起销毁掉,再次切换回来时需要重新创建该组件,但是vue可不记得我们之前输入的数据。这种情况就需要缓存路由组件。1.作用:让不展示的路由组件课持挂载,不被销毁。原创 2022-10-23 16:09:25 · 1526 阅读 · 1 评论 -
不借助router-link实现路由跳转的编程式路由导航
1.作用:不借助 实现路由跳转,让路由跳转更加灵活。原创 2022-10-23 16:03:28 · 211 阅读 · 1 评论 -
vue路由router-link的replace属性
⒉.浏览器的历史记录有两种写入方式:分别为push和replace ,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push。3.如何开启replace模式:原创 2022-10-23 16:02:21 · 189 阅读 · 1 评论 -
vue路由的params参数和props配置
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!(1).配置路由,声明接收params参数。作用:让路由组件更方便的收到参数。2、路由的props配置。1、params参数。原创 2022-10-23 16:01:08 · 1864 阅读 · 0 评论 -
vue命名路由组件
vue命名路由组件原创 2022-10-23 15:59:07 · 304 阅读 · 0 评论 -
vue路由的query参数
query参数的作用为在组件之间传递参数。原创 2022-10-23 15:58:01 · 2739 阅读 · 0 评论 -
vue路由 vue-router
到现在 vue项目同平常前端项目的最大区别就是:正常前端项目的跳转是不同.html文件之间的跳转,由标签实现,但vue的正式项目一般都会只有一个.html文件,所有的展示都在这一个文件之中。工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。2.通过切换,“隐藏"了的路由组件,默认是被销毁掉的,需要的时候再去挂载。4.整个应用只有一个router,可以通过组件的$router属性获取到。3.每个组件都有自己的$route属性,里面存储着自己的路由信息。原创 2022-10-23 15:53:05 · 223 阅读 · 0 评论 -
vuex的使用
概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。4.mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xoxx)的函数。mapActions方法:用于帮助我们生成与actions对话的方法,即:包含 $store.dispatch(xxx)的函数。//靠mapMutations生成:3IA、JIAN(对象形式)原创 2022-10-20 12:57:28 · 101 阅读 · 0 评论 -
vue插槽使用
html结构11.作用:让父组件可以向子组件指定位置插入htm结构,也是一种组件间通信的方式,适用于父组件===>子组件。插槽默认内容...插槽默认内容...插槽默认内容...htm1结构1html结构2原创 2022-10-20 12:56:41 · 101 阅读 · 0 评论 -
vue脚手架配置代理
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求就会转发给服务器(优先匹配前端资源)changeOrigin: true //用于控制请求头中的host值。changeOrigin: true //用于控制请求头中的host值。说明: 1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理。ws: true, //用于支持websocket。ws: true, //用于支持websocket。缺点:不能配置多个代理,不能灵活的控制请求是否走代理。//代理服务器(方式二)原创 2022-10-20 12:56:07 · 264 阅读 · 0 评论 -
vue的ref属性和props配置项
打标识:.....或备注:props是只读的,Vue底层会检测你对props的修改,如果进行了修改,就会发出警告。2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)required: true //必要性。default: '老王' //默认值。type: String //类型。第三种方式(限制类型、限制必要性,指定默认值)8.4、props配置项。第二种方式(限制类型)原创 2022-10-20 12:54:39 · 347 阅读 · 0 评论 -
使用Vue脚手架
注:以下的npm .... 指令是nodejs的功能,如未下载先自行前往nodejs官网下载安装如果在cmd控制台运行npm install 等指令不成功,可以以管理员身份运行cmd试试8.1、说明8.2、具体步骤第一步(仅第一次执行):全局安装@vue/clinpm install -g @vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目vue create xxxx第三步:启动项目npm run serve原创 2022-10-20 12:52:29 · 175 阅读 · 0 评论 -
vue组件
组件用于实现应用中局部功能代码和资源的集合7.1、模块理解:向外提供特定功能的js程序,一般就是一个js文件为什么:js文件很多很复杂作用:复用js,简化js的编写,提高js运行效率7.2、组件理解:来实现局部(特定)功能效果的代码集合(html/css/js/image/……)为什么:一个界面的功能复杂作用:复用编码,简化项目编码,提高运行效率7.3、模块化当应用js中的js都已模块来编写,那这种应用就是一个模块化的应用7.4、组件化当应用中的功能都是多组件原创 2022-10-20 12:48:49 · 82 阅读 · 0 评论 -
vue生命周期和钩子
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。1.又名:生命周期回调函数、生制周期函数、生命周期钩子。1.销毁后借助Vue开发者工具看不到任何信息。转载 2022-10-20 12:46:57 · 52 阅读 · 0 评论 -
v-bind、v-model、v-for、v-on、v-if、v-else-if、v-show等内置指令的使用
1、指令与袁术绑定成功时(一上来),2、指令所在模板被重新解析时。Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!与插值语法的区别:v-text会全部替换标签中的内容,{{xx}}不会。(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。(2).inserted:指令所在元素被插入页面时调用。(3).update:指令所在模板结构被重新解析时调用。原创 2022-10-20 12:45:58 · 677 阅读 · 0 评论 -
Vue数据监视
Vue.set(target.propertyName/index,value)或vm.$set(target.propertyName/index,value)1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()特别注意:Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性!(1).对象中后追加的属性,Vue默认不做响应式处理。2.Vue.set()或vm.$set()如何监测数组中的数据?原创 2022-10-20 12:44:07 · 132 阅读 · 0 评论 -
使用v-for时,:key有什么用
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。2.如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。(key的内部原理)1.若虚拟DOM中内容没变,直接使用之前的真实DOM!2.若虚拟DOM中内容没变,直接使用之前的真实DOM!(2).旧虚拟DOM中未找到与新虚拟DOM相同的key。原创 2022-10-20 12:42:04 · 80 阅读 · 0 评论 -
vue条件渲染和列表渲染
注意: v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.语法: v-for="(item, index) in xxx" : key="yyy"3.备注:T使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。4.template标签只能和v-if配合使用,不能和v-show配合。(3).v-else="表达式”适用于:切换频率较低的场景。(2).v-else-if="表达式”写法: v-show="表达式"(1).v-if="表达式"原创 2022-10-19 21:04:35 · 130 阅读 · 0 评论 -
vue绑定样式
绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用。绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定。绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定。绑定style样式--对象写法。绑定style样式--数组写法。3.1、绑定class。3.2、绑定style。原创 2022-10-19 21:03:03 · 75 阅读 · 0 评论 -
常用的事件处理
/ console.log('isHot被修改了', newValue, oldValue);// console.log('isHot被修改了', newValue, oldValue);console.log('ioHot被修改了', newValue, oldValue);console.log('isHot被修改了', newValue, oldValue);console.log('isHot被修改了', newValue, oldValue)原创 2022-10-19 21:01:42 · 119 阅读 · 0 评论 -
Vue入门知识
注:编写任何关于vue的代码时,都需先引入vue.js文件https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js可以写成也可以进入src的链接里面 ctrl + a 全选复制,然后粘贴到自己创建的空的vue.js文件中再引入即可原创 2022-10-19 21:00:20 · 88 阅读 · 0 评论