![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
RDSunday
计算机科学与技术专业
展开
-
数据接口
别人写好的数据接口,可以直接调用,自用学习测试接口地址天气接口http://wthrcdn.etouch.cn/weather mini?city=城市名称音乐接口搜索htp://igapi.ig.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲标题音乐信息接口htp:/igap.ig.baidu.com/v1/restserver/ting?method=baidu.ting.so.原创 2020-10-30 11:24:55 · 240 阅读 · 0 评论 -
vue使用icon
文章目录第一步第二步第三步 inde.html引入场景描述我想给浏览器上加个icon图标样,例如下图第一步首先准备一张图片然后去比特虫网站制作icon图标第二步static导入图片第三步 inde.html引入<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel原创 2020-08-20 16:10:17 · 244 阅读 · 0 评论 -
vue移动端项目在手机端查看效果方法
文章目录第一第二第三第四场景描述有个移动端项目,我需要在自己手机上查看效果,怎么办、第一手机与电脑在同一wifi下第二找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目第三输入ip和端口号打开项目第四将地址复制,使用二维码转换工具(草料二维码)生成二维码后,使用手机扫描,就可以查看了也可以直接用微信发给同事直接点击查看...原创 2020-08-20 14:49:02 · 1078 阅读 · 0 评论 -
vue根据后台返回的字段值进行加减操作
文章目录vue拼字符串的2种写法**第一种**.\`字符串${xx}`第二种解决场景需求场景描述后台返回的字段标示没有我想要的,需要通过加或者减来改变某个字段来满足需求vue拼字符串的2种写法第一种.`字符串${xx}`:title="`字符串${xx}`"第二种:title="'字符串' + xx"解决场景需求<img :src="`./static/iconLeft/product-top-logo${item.orderNum-1}.png`" alt="">原创 2020-08-14 16:22:36 · 1786 阅读 · 0 评论 -
vue 动态加载图片src的解决办法
场景描述我需要根据后台返回的某个字段标示渲染某个图片,也就是src的路径是动态的不是写死的放在assets目录一般常见的错误就是直接把图片放在assets目录下,直接写 :src="'./static/iconLeft/product-top-logo'+item.orderNum+'.png'"报错,不是不可以放在assets目录下,放在着目录下代码写法有所不同<img :src="require('../assets/images/'+imgsrc+'.png')"/>原创 2020-08-14 16:11:15 · 584 阅读 · 0 评论 -
Vant UI中使用iconfont实现自定义图标
Vant UI中使用iconfont实现自定义图标原创 2020-08-10 18:40:10 · 1295 阅读 · 0 评论 -
vue使用mint-UI的几种方式
手把手教 Vue–Mint UI 使用原创 2020-08-10 15:44:47 · 154 阅读 · 0 评论 -
vue插槽和父子组件传值的应用场景
文章目录例如:移动端的顶部部分,是个公共部分,只是中间的文字不同,或者左边的返回按钮或者右边的搜索按钮如图怎么实现呢可以用插槽和父子组件之间传值来解决父子组件传值来解决中间的文字不同部分插槽显示左右两边不同的部分父组件子组件...原创 2020-08-08 16:42:50 · 551 阅读 · 0 评论 -
eslint — js书写规范
总结如下:1.首行不留空白,尾部只能留一行,不能多也不能少,每个单词之间的间距为2个空格;(用vs code编写时一个tab默认4个空格,需要改为2个);2.方法的()前后要空格;3.单词与{}要空 一个;4.在js中只能用单引号;5.使用注释时在写注释内容时,要先空一格;符号与单词之间空一格;如:// 这是注释一行内容/* 这是注释多行内容 */6.() 和{}前后要空一格;如if ( ) { } else { };7.一行结束时,不能有符号(除了必须的逗号,最后结尾不写符号,冒号后要空原创 2020-08-06 16:07:01 · 626 阅读 · 0 评论 -
vue的生命周期钩子函数
文章目录DOM操作数据修改beforeCreatecreatedbeforeMountmountedbeforeUpdateupdated钩子函数的应用vue的生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。DOM操作 mounted数据修改 beforeMount created mountedbeforeCreate原创 2020-08-06 11:29:27 · 412 阅读 · 0 评论 -
vue-admin-template登录功能梳理
文章目录运行流程前端验证流程运行流程login页面进行表单验证,(login/index.vue)然后验证成功点击按钮,将数据发送到vuex,有actions的方法(store/modules/user.js)发送请求login,发送请求时会进行一个请求拦截,会在请求头header里加入X-Token,(utils/request.js)返回res以及其他数据如权限等并存储在vuex和cookie,login会返回一个Promise对象,方便login页面调用then或catch操原创 2020-08-05 17:30:06 · 5638 阅读 · 0 评论 -
vue专用图片保存
原创 2020-08-04 16:10:19 · 190 阅读 · 0 评论 -
vue-router中的params和query传参的使用和区别
Vue Router 的params和query传参的使用和区别(详尽)原创 2020-08-04 15:09:35 · 88 阅读 · 0 评论 -
vue-router钩子函数
文章目录vue-router钩子函数1.全局钩子router.beforeEachrouter.afterEach2.单个路由里面的钩子beforeEnter3.组件路由里面的钩子beforeRouteEnterbeforeRouteUpdatebeforeRouteLeavevue-router钩子函数1.全局钩子每次路由跳转,都会执行beforeEach和afterEachbeforeEach和afterEach是vue-router实例对象的属性router.beforeEach有三个原创 2020-08-04 14:10:26 · 740 阅读 · 0 评论 -
vue中的 ref 和 $refs
文章目录vue中的 ref 和 $refs原创 2020-08-04 10:05:17 · 103 阅读 · 0 评论 -
vuex中的modules
文章目录vuex深入理解 modules原创 2020-08-04 09:53:40 · 104 阅读 · 0 评论 -
vue中的.lazy .number .trim
表单输入修饰符.lazy 修饰符修改 input 触发为 change 触发.number 修饰符可以将返回结果自动转化为 Number 类型,否则就是 String 类型trim 过滤首尾空格符 <h4>修饰符lazy</h4> <!-- .lazy修饰符修改input触发为change触发 --> <input type="text" v-model.lazy="msg_lazy">原创 2020-08-04 09:31:01 · 200 阅读 · 1 评论 -
this.$store.dispatch() 与 this.$store.commit()
传值给vuex的mutation改变statecommit: 同步操作存储this.$store.commit('changeValue',name)取值this.$store.state.changeValuedispatch: 异步操作存储this.$store.dispatch('getlists',name)取值this.$store.getters.getlists原创 2020-08-04 09:27:08 · 161 阅读 · 0 评论 -
vue-admin-template默认英文改成中文
文章目录问题描述:把侧边栏默认英文改成中文如下图搜到好多都是import locale from 'element-ui/lib/locale/lang/zh-CN'en换成zh-CN这个只是改组件里的把英文换成中文要想把侧边栏也换了只能改路由里的router/index.js把title里的英文换成英文...原创 2020-08-03 20:27:53 · 2277 阅读 · 1 评论 -
vue常用插件安装及引用
文章目录js-cookie安装使用normalize.css在vue中使用Vue使用NProgressPath-to-RegExp模块vue-axios 安装和应用js-cookie安装使用安装npm install js-cookie --save引用import Cookies from 'js-cookie'使用方法normalize.css在vue中使用作用Normalize.css只是一个很小的css文件,但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于原创 2020-08-03 17:11:06 · 855 阅读 · 0 评论 -
import echarts from ‘echarts‘标红报错
当vue-cli+TypeScript 中使用Echarts时main.ts一直报错之前一直按照npm install echarts --save然后在main.ts中引用一直标红查了好多方法原来是少了一句安装语句npm install @types/echarts加上这句就好了完整的实例安装npm install echarts --savenpm install @types/echarts组件中引用<script lang="ts">export d原创 2020-08-03 14:50:10 · 5092 阅读 · 0 评论 -
为每一个 v-for循环出来的添加点击事件思路
文章目录思路首先在data中写入对象数组,并且写个可以if判断的标志如下图upFlag是个标志,action也是个标志当action: 0是一个状态,action:1是另一个状态当状态改变时发生什么事件,例如改变背景色,切换显示不同的div,切换背景图片,改变背景颜色是:class不同的样式,显示不同的div是用v-if判断是true还是false来进行展示,换背景图片与切换显示一样无非就是切换显示不同的img,切换不同的背景颜色一般用到的是3元表达式,当标志为1或者为0时绑定不同原创 2020-07-30 10:33:44 · 1966 阅读 · 0 评论 -
$router 和 $route的区别
文章目录先说用法$router想要导航到不同url,则使用router.push方法// this.$router.push()// this.$router.replace()// this.$router.go()$route获取name、path、query、params等用$route参考$router 和 $route原创 2020-07-30 08:40:33 · 114 阅读 · 0 评论 -
视图内容显示不全,没有出现滚动条
错误描述如下图内容没有显示完全,没有出现滚动条解决方法加个div高度拉开整体的高度,出现滚动条<div style="height: 73px;"></div>原创 2020-07-30 08:32:46 · 421 阅读 · 0 评论 -
给v-for中每个item添加点击事件报错没效果
文章目录搜索到@click失效的搜索到忘加s就是methods写错了最终的解决方法是场景给v-for中的每个item添加点击事件错误描述每个item渲染出来了,但是只有刷新后点击其中一个有效果且只能点击一次,其他都没有效果其中一个报错Invalid handler for event “click”: got undefined (found in )另一个Error in nextTick: "TypeError: Cannot read property '_wrapper'原创 2020-07-29 20:46:47 · 1116 阅读 · 0 评论 -
vue之router路由最优美写法,懒加载、打包代码分离。
https://blog.csdn.net/qq_42690547/article/details/88316897原创 2020-07-29 09:51:57 · 193 阅读 · 0 评论 -
vue--常用插件安装
文章目录安装vue-cookies安装axios安装Vant安装vue-cookiesnpm install vue-cookies --savemain.js中引用// requirevar Vue = require('vue')Vue.use(require('vue-cookies'))// es2015 moduleimport Vue from 'Vue'import VueCookies from 'vue-cookies'Vue.use(VueCookies)安装原创 2020-07-29 09:50:39 · 183 阅读 · 0 评论 -
vue-elementUI后台管理容器的写法实例--2
文章目录模版中引用<!-- 这是后台管理容器 --> <el-container style="height: 100%"> <el-aside width="auto"> <common-aside></common-aside> </el-aside> <el-container> <el-header> <common-heade原创 2020-07-28 10:23:15 · 122 阅读 · 0 评论 -
vue-elementUi后台管理侧边栏的写法实例--1
文章目录vue-elementUi后台管理侧边栏的写法实例vue-elementUi后台管理侧边栏的写法实例循环遍历没有二级菜单的<el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)"> <i :class="'el-icon-' + item.icon"></i> <span slot="原创 2020-07-28 10:21:31 · 1036 阅读 · 0 评论 -
vuex--action的使用
文章目录方法1方法2导入法场景用action,一般是异步调用,延迟调用一个方法方法1使用方法在调用的组件中使用例如methods : {handle() {this.$store.dispatch('addNAsync',5)}}在store.js中的actions中写actions: {addNAsync{context,step) {setTimeout({}=> {context.commit('addN', step)},1000)}方法2导入法在要原创 2020-07-27 20:41:19 · 162 阅读 · 0 评论 -
vuex--state的使用
文章目录方法1直接调用方法2导入法方法1直接调用在store.js中state中写例如state:{count: 0}在组件中调用用{{}}方法调用例如{{$store.state.count}}方法2导入法在store.js中state中写例如state:{count: 0}在调用的组件中使用首先导入import { mapState } from 'vuex'然后再computed: {...mapState(['count'])}...原创 2020-07-27 20:25:13 · 98 阅读 · 0 评论 -
vuex--mutation的两种调用方式
文章目录方法1方法2方法1在store.js的mutations中写函数例如mutations: { addN(state,step) {state.count += step}}在用到vuex的组件中调用在methods中写例如methods: {handle2() {this.$store.commit('addN',3)}}方法2在store.js的mutations中写函数例如mutations: { addN(state,step) {原创 2020-07-27 20:15:58 · 2413 阅读 · 0 评论 -
vue--博客收藏
文章目录Vue + Element-ui实现后台管理系统(2)—项目搭建 + ⾸⻚布局实现前端随笔https://www.cnblogs.com/qdhxhz/category/1589959.html原创 2020-07-27 20:04:21 · 75 阅读 · 0 评论 -
vue-elementUI侧边栏点击显示不同内容
文章目录步骤1.在侧边栏开启路由模式`:router = "true"`,设置子选项的`name`步骤2.新建组件和设置路由场景当我点击后台管理页面的侧边栏有关选项时,右边的main显示不同的内容算是一个总结吧,之前一直迷糊不知道怎么写步骤1.在侧边栏开启路由模式:router = "true",设置子选项的name<el-submenu index="1"> <template slot="title"><i class="el-icon-me原创 2020-07-27 14:35:03 · 3443 阅读 · 1 评论 -
vue--设置导航守卫
场景如果用户知道后台url地址但是没有登录,想通过url访问管理页面,直接跳转到登录界面,限制他的权限设置全局前置守卫下面代码实现的功能,当是到/login的页面或者是来自/login的页面不进行拦截放行,其它种情况都进行拦截提示并跳转到登录界面。可以直接复制使用,这样想通过url访问后台管理不登陆就会进行拦截router.beforeEach((to, from, next) => { //from是来的页面,to是去的页面,next是权限控制 console.log(fr原创 2020-07-24 08:56:17 · 166 阅读 · 0 评论 -
vue-简化登录请求代码async&await
async handleLogin() {const res = await this.$http.post('login',this.formdata)const {data,meta: {msg,status }} = res.dataif (status === 200 {} else {}原创 2020-07-23 11:33:41 · 916 阅读 · 0 评论 -
vue+elementUI格式化日期显示---1
场景vue通过api接口获得日期格式的数据在elementUI表格中渲染数据(日期格式显示)如图安装npm i moment导入import moment from 'moment'在main.js中写入全局过滤器(使用)4.原创 2020-07-15 09:20:34 · 2165 阅读 · 0 评论 -
98% after emitting CopyPlugin
错误描述98% after emitting CopyPlugin 一直卡住出不来界面解决思路找router/index.js文件一个一个路由注释看那个能运行原创 2020-07-14 10:59:18 · 2253 阅读 · 0 评论 -
elementUI表单验证rules失效
问题描述: 在进行密码框规则验证时,即使输入密码了也显示请输入密码解决方法<el-form-item>中prop=“password”的值一定要跟对应的v-model=“password”一致,即两个“password”得一样,否则会导致rules失效看代码密码输入框<el-input prefix-icon="iconfont icon-mima" v-mod...原创 2020-04-19 09:22:31 · 3787 阅读 · 2 评论 -
element-ui使用iconfont字体图标
element-ui自带图标种类少,可以使用阿里巴巴的字体图标库版本vue-cli3.xiconfont 官网先看一下目录在阿里巴巴图标库找到你想要的图标然后下载到本地把文件夹复制到src/assets目录在main.js入口文件进行全局引用import Vue from 'vue'import App from './App.vue'import router from...原创 2020-04-18 10:50:50 · 1204 阅读 · 0 评论