vue
越来越好。
不实心不成事,不虚心不知事。 不自是者博闻,不自满者受益。
展开
-
vue3 setup语法糖,调用动态渲染的子组件中的函数
vue3 setup语法糖,调用动态渲染的子组件中的函数原创 2022-04-09 13:45:43 · 2325 阅读 · 1 评论 -
vue3 + vite2 打包部署后 404 解决方案
vue3 + vite2 打包部署后 404 解决方案404现象解析如果在开发环境没问题,但是部署后(部署到服务器的非根目录的情况时)出现很多相关的js,css文件报404,那么可以看一下index.html中的资源引用,如果都是/assets开头,那么这个时候就需要修改配置文件,重新打包了。解决办法在vue2中我们在config/index.js文件中配置了 assetsPublicPath:’./’,同理,vue3中也需要配置这个属性,vue3中vite生成的项目,没有config文件夹,原创 2022-03-24 23:39:06 · 14595 阅读 · 2 评论 -
vue2和vue3共存
新建空文件夹npm install @vue/cli进入目录 node_modules/.bin 找到vue,vue.cmd 将他们名称改为vue3,vue3.cmd。命令 vue3 create fistr-vue3-app 就可以了原创 2022-02-15 13:09:40 · 876 阅读 · 0 评论 -
Vue列表页返回时不刷新,进入详情页时在顶部
Vue列表页返回时不刷新,进入详情页时在顶部 场景 列表页时下拉加载,导致页面滚动条出现,此时如果点击某个列表进入详情页面后,详情页会固定在当前高度(scrolltop不为0)。这时通常的解决办法是在路由跳转时调用window.scrollTo(0,0); //路由跳转后返回顶部router.afterEach((to,from,next) => { window.scrollTo(0,0);}); 但是此种方法是改变了window对象的scrolltop,这就导致了...原创 2021-03-25 13:34:45 · 625 阅读 · 0 评论 -
Vue中 动态添加class写法 动态静态clas混合
Vue中 动态添加class写法 动态静态clas混合示例//fx,cont-block为静态class ob为动态class<div :class="[ 'fx','cont-block',{ob : index == '0'}]" v-for="(item,index) in objData" @click="changeStatus"> <div class="blocktitle">{{item.name}} .原创 2020-08-31 11:19:13 · 8882 阅读 · 2 评论 -
vue this.$createElement 理解
vue this.$createElement 理解转载https://www.jianshu.com/p/109c8e0077c0转载 2020-08-28 18:49:34 · 5140 阅读 · 0 评论 -
vue动态添加元素,为动态元素绑定点击事件(根据个人业务记录)
vue动态添加元素,为动态元素绑定点击事件。(根据个人业务记录)需求:返回一个list,首先显示list中某一个的一部分,然后可以点击一个图标,显示对应剩下的一部分。思路:手下想到的是用v-html标签对数据进行拼接,然后再绑定到dom中去。但是这样就涉及到动态添加属性,添加事件了,搜索看了一下觉得不太合适,就没用了。 vue离不开数据驱动,决定从数据入手。实现: 处理数据,将数组数据,转变为数据对象,在每一个对象中都添加一个show属性,通过true,false控制其展示...原创 2020-07-29 11:01:35 · 14050 阅读 · 0 评论 -
vue动态路由,前端请求路由。addRoutes。
vue动态路由,前端请求路由。addRoutes。需求:之前都是前端固定写好路由,然后跳来跳去,虽然做的有根据登录者类型去做左侧菜单筛选(隐藏,显示),也添加了路由守卫对路由进行拦截处理。但是并不安全,因为在初次加载时就默认已经加载了全部路由信息,而且登陆角色类型是存储在缓存中的,稍微修改就会导致菜单重新刷新获取,这样路由、权限也就乱了。具体做法请看静态路由,分角色进行权限控制。...原创 2020-03-17 19:12:18 · 1796 阅读 · 2 评论 -
vue 前端控制路由权限,分角色控制菜单。
vue 前端控制路由权限,分角色控制菜单。流程说明首先说明,这个路由控制权限全是在前端做的。 流程==》用户登录》存储用户角色和登陆标志》在加载左侧菜单时时根据用户角色类型去筛选。项目结构 //home文件为主框架代码展示router/index.js文件import Vue from 'vue'import Router from 'vue-router...原创 2020-03-05 10:06:23 · 5459 阅读 · 0 评论 -
vue行内样式绑定写法 :style
:style vue行内样式绑定写法 :style :style="{'visibility': isAppFlag?'hidden':'visible'}" //单个:style="{'visibility': isAppFlag?'hidden':'visible','color': isAppFlag?'red':'blue'}" //多个 :style="{'...原创 2020-02-17 22:04:17 · 6617 阅读 · 0 评论 -
element 多文件上传,一次请求完成。
前几天再用element上传功能时发现,element的上传如果一次选择多张图片,则会提交多次。查看API以及搜索得到解决办法主要是首先禁用掉自动伤上传:auto-upload="false" 然后设置自定义提交方法:http-request="uploadFile",这样的话我们通过this.$refs.id.submit(); 提交时就可以触发这个 uploadFil...原创 2019-11-23 11:30:08 · 3427 阅读 · 1 评论 -
vue父组件数据更新,子组件没有变化。
vue父组件数据更新,子组件没有变化。在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件中加入watch 进行数据监听示例父组件<div :parenData ="datas"></div><script>data(){...原创 2019-09-23 10:31:29 · 29168 阅读 · 2 评论 -
vue 父组件请求数据,props为undefined,子组件获取不到值。
vue 父组件请求数据,子组件获取不到值。props为undefined解决办法就是 在渲染的时候给组件标签上面加一个条件渲染,在父组件请求完成后,将数据赋值,然后将渲染表达式成立;示例子组件A<div> 我是子组件 {{msg}}<div><script> data(){ return{ m...原创 2019-09-23 10:20:54 · 7181 阅读 · 0 评论 -
覆盖elementui样式的几种办法
覆盖elementui样式的几种办法用作记录.用 /deep/ 标签 例如 /deep/ .class{ 要覆盖的样式} 。 可以在这个写scope的style标签下面再写一个style标签,专门写要覆盖的样式就好了 。 在index.html中引入一个外部样式,进行覆盖一般情况下第一种就可以了,不行的话试试后面的两个,都是比较硬的...原创 2019-05-21 10:20:43 · 9648 阅读 · 3 评论 -
elementui后台管理demo
elementui后台管理demo第一次尝试做后台管理的框架,做的时候也有想过用别的demo,后来想一想还是算了,虽然网上很多,但是还是自己写出来的有意义,虽然有很多不足,但是是自己写的,自己知根知底,自己好改进。截图1.PC端时,菜单默认展开,点击后不会缩小宽度。左上角菜单控制按钮隐藏2.手机端时左上角菜单控制按钮出现,点击菜单任意一个后,菜单自动隐藏 ...原创 2019-05-14 17:27:51 · 22488 阅读 · 3 评论 -
vue离开当前页面时给出提示,弹出框一闪而过
vue离开当前页面时给出提示,弹出框一闪而过路由守卫就不说了,在离开当前页面给出提示时,发现弹出框一闪而过,不能阻塞进程(window.confirm原声的是可以的),但是这个不好看,我也懒得改(其实不会改);这样解决加 延时执行!if (to.fullPath == "/questionInfo/questionListTest" || to.fullPath == "/addUs...原创 2019-03-28 10:59:09 · 7521 阅读 · 4 评论 -
vue实现todolist-02todolist
参见效果:http://www.todolist.cn/用vue实现这个功能下面上可运行的代码复制走可以运行:<!--body里面的内容--><div id="app" v-bind:class="{alldiv:imgflag}"><br><img v-bind:src="src" v-bind:class="{'img原创 2018-07-29 17:34:03 · 617 阅读 · 0 评论 -
vue中的封装函数
我个人觉得vue中的封装函数和jquery很像;首先创建一个脚本在里面声明自己写的函数(比如封装一个保存localstorage的get,set,remove方法)://封装操作localstorage本地存储的方法 模块化的文件var storage={ set(key,value){ localStorage.setItem(key,JSON.str...原创 2018-08-13 00:03:07 · 8011 阅读 · 2 评论 -
vue的组件创建,组件注册
vue的组件创建,组件注册效果图其中header是公用组件 步骤:1:创建compotents文件夹,里面放我们要用的各个组件模块 2:首先编写公共组件Header.vue这个组件,我们以他为范本<template> <!-- 挂载的组件 --> <div id="three"> <h...原创 2018-08-19 20:32:46 · 1155 阅读 · 0 评论 -
vue请求数据
vue中使用resource请求数据首先在main.js里面进行配置安装镜像文件 通过命令:npm install vue-resource --save 在main里面引入这个文件 : import VueResource from 'vue-resource' 通过use方法使用 : Vue.user(VueResource)这样下来就好了,配置好了之后就会看到packge....原创 2018-08-19 20:59:06 · 344 阅读 · 0 评论 -
vue中Axios请求数据
vue中get,post请求进入文件夹根目录运行命令npm install axios --save 在需要用的页面通过import Axios(自定义名字) from 'axios'进行引入 也可在设置公共请求地址 import axios from 'axios' axios.defaults.baseURL = '******'; //设置公用请求Vue...原创 2018-08-20 01:08:10 · 566 阅读 · 0 评论 -
Vue中父组件向子组件传值(一)
Vue中父组件向子组件传值:1:父组件<template> <div id="two"> <h2>{{msg}}</h2> <!--将这三个值NewTitle,runnew,news(父对象也可以传过去)传入子组件--> <v-header..原创 2018-08-30 23:11:24 · 655 阅读 · 0 评论 -
Vue中父子组件传值(二)
Vue中父子组件传值父组件<template> <div id="two"> <h2>{{msg}}</h2> <!--:后面的是我们自定义的名字后面的值是我们父组件里面的值,可以传函数,变量,自身...ref后面的值也是我们自定义的名字。代表子组件--> ...原创 2018-09-12 23:20:06 · 183 阅读 · 0 评论 -
vue中的路由 vue-router
vue中的路由及默认路由地址首先在项目根目录里面 通过 npm install vue-router --save 安装 在main.js里面引入 ...原创 2018-09-19 21:00:27 · 154 阅读 · 0 评论 -
做题目页面H5页面(Vue开发)
做题目页面H5页面(Vue开发)最近公司需要,要写一个可以做题目的H5小页面,需求是挺简单的(目前来说),就是可以上一题下一题的,另外不存在什么输入,全是选择题;我仔细想想觉得也不复杂,就打算用前些时候学的Vue的公司来写(之前万年的Jquery的...),这个简单的小功能,我周末写了一天多,,,汗颜,还是太菜了..现在总结一下吧1:题目展示和选项展示首先这个功能不复杂,页面没有什么逻...原创 2018-12-08 23:57:41 · 7633 阅读 · 5 评论 -
没有搭建脚手架时vue组件的使用
没有搭建脚手架时vue组件的使用全局组件 //全局组件 第一种声名方式var s = Vue.extend({template: "<h6>全局组件 第一种声名方式</h6>"})Vue.component("hello", s);//前台标签调用 <hello></hello>//全局组件 第二种声明方式Vue.compon.....原创 2018-12-15 15:29:32 · 5129 阅读 · 3 评论 -
vue this.$router.push传参
vue this.$router.push传参 1 通过query传参 this.$router.push({"path":"/answertest/simpleTestPage", query: { questionsArry: this.questionsArry, ...原创 2018-12-22 12:52:37 · 530 阅读 · 0 评论 -
vue动态请求数据后swiper不能滑动(失效)
vue动态请求数据后swiper不能滑动(失效)做个笔记:引入swiper后,起初是静态资源,我把初始化函数放在mounted里面是可以的。当、但时当用了请求获取资源后,这个初始化就不生效了,我的请求是放在created生命周期函数里面的,我在请求结束后调用也不行,后来把请求放在mounted生命周期函数也不行解决方案:是把请求还是放在created里面,这个初始化放在了updat...原创 2018-12-28 12:55:16 · 3619 阅读 · 2 评论 -
vuex数据更新了但是页面没变化(个人记录,他人可能无帮助)
vuex添加数据时一定要注意这几天练习vuex的时候写一个购物车,不复杂的逻辑出了很多不正常的错误,比如向vuex中添加数据后,进行更改时虽然数据变了但是页面并没有进行更新等等。。。冥思苦想找到了问题! data() { return { msg: "商品详情", product_id: "", product_info: ""...原创 2019-01-23 16:38:36 · 12791 阅读 · 5 评论 -
vue环境搭建以及创建项目
菜鸟刚刚入坑,打算学习框架,分享在此也为我记录... ..共勉搭建VUE开发环境1:首先我们要安装node.js(可以去node.js官网进行下载);2:开始搭建开发环境,就是脚手架工具,cmd运行下面命令 npm install --global vue-cli(这个如果不行的话换这个) cnpm install --global vue-cli 然后等运行完...原创 2018-07-29 15:57:01 · 432 阅读 · 2 评论