![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 59
小菜鸟学代码··
很帅很帅的机车博主
展开
-
vue插槽的使用
vue的3种插槽原创 2023-04-23 14:47:19 · 235 阅读 · 0 评论 -
vue 快速使用轮播
vue轮播原创 2022-11-23 09:53:12 · 516 阅读 · 0 评论 -
vue中使用swiper的时候第二轮事件不会触发
vue使用swiper第二轮事件不会触发原创 2022-08-29 10:40:00 · 988 阅读 · 0 评论 -
vue(vite)项目架构
vue(vite)项目架构assets :放些静态文件资源(图片,css,js)components : 放些封装的组件可以根据自己公司的要求去封装组件config : 主要存放一些封装好的api,比如网络请求,路由拦截,加密方法等等router : 路由存放器,处理些页面路由的问题views : 页面注意:文件名并不是固定,我们可以根据自己搭建的框架去写router(index.js)简单的路由配置,可以根据公司要求进行适当修改import { createRouter,原创 2022-05-31 09:55:56 · 1366 阅读 · 0 评论 -
vue的每个版本全局使用scss(vite)
vue的每个版本全局使用scss我们在使用vue创建项目的时候 第一步肯定就是把css预处理器先解决 ,这里我用的是sass,但是我在最初的时候引用sass报了很多错 ,在scdn上也找了很多方式,大部分都不行,我估计很多人都没测试过,直接把别人的结果copy一份发在自己的上面,导致大部分结论都一样,这样的人最可耻,本人保证本人一切博客皆以实战为基础,解决问题才写的,话不多说vue@2使用sass这个是要在vue.config.js里面填写配置项,这里就不过多讲述了直接在创建项目的时候就选择预处原创 2022-05-27 10:12:26 · 887 阅读 · 0 评论 -
vue获取div中的数据
<div class="goodslist" @click="btn_user($event)">22</div> btn_user(e) { console.log('点击的是' + e.target.innerHTML) },原创 2021-03-11 19:12:25 · 5229 阅读 · 0 评论 -
vue创建项目架构
vue创建项目架构我们在创建一个新项目的时候肯定要搭建一个架构1.我们先创建运行环境production生产环境 development开发环境 test测试环境然后可以在里面写些不同环境的变量问题.env.test文件夹下面NODE_ENV='test' //这个是自带内置原有的变量名,自定义的变量名都需要加上VUE_APP_变量名VUE_APP_MODE='test' //这个变量名可以在启动项目的时候使用--mode进行不同环境项目启动命令VUE_APP_URL='www.bai原创 2022-02-25 17:12:34 · 1092 阅读 · 1 评论 -
vue3.0组件传值常用
vue3.0组件传值常用跟vue2.0差不多只是有一点写法上的区别setup有两个参数1.props这个参数主要接收从父组件传过来的数据2.context上下文对象– attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs– slots: 收到的插槽内容, 相当于this.$slots。– emit: 分发自定义事件的函数, 相当于 this.$emit。 (这里讲句在使用emit的时最好不要起个跟原生事件一样的名字)em原创 2021-12-17 19:31:33 · 2819 阅读 · 1 评论 -
vue如何自定义指令
vue如何自定义指令vue自定义指令借助 directives局部注册指令 directives: { color(el) { el.style.color = "red"; console.log("自定义函数"); }, },全局main下面注册指令这种写法可以让指令绑定在某个生命周期执行时间段中app.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… beforeMount(el) {原创 2021-12-13 09:12:27 · 1011 阅读 · 0 评论 -
vue4.x常用刷新方式
vue4.x常用刷新方式vue前两种刷新方式很常用也很简单 location.reload() $router.go(0)以上两种刷新有个缺点 那就是屏幕会突然闪现一下下面利用v-if来实现首先利用provide在全局定义一个方法app.vue<router-view v-if="isReload" />import {provide,reactive,toRefs,nextTick} from 'vuesetup(){ const data=react原创 2021-12-02 19:32:47 · 184 阅读 · 0 评论 -
vue3的小使用技巧
vue3的小使用技巧最重要的一般我们定义数据的时候要末使用ref, 要末使用reactive,直接定义的只有方法,因为数据需要实时渲染,定义方法常用const ,数据用let 防止报错Uncaught TypeError: Assignment to constant variable. 报错原因就是因为const 定义数据是定量后期不能修改 ,这个错犯的频率有点高就记录一下1.1传送门teleport<div> <button @click="modelOpen = t原创 2021-11-05 19:32:09 · 873 阅读 · 0 评论 -
vue3不同环境的打包区分
vue3不同环境的打包区分首先在vue.config.js中写入const path = require('path') //导入路径插件let isProduction = process.env.NODE_ENV == 'production', //判断当前的环境“pro”生产环境 dev开发环境 url; //定义urlif (isProduction) { // 生产环境 url = 'http://10.0.0.222:8003/bizv5a5wdsu/'原创 2021-11-01 18:46:05 · 860 阅读 · 0 评论 -
vue3初步使用
vue3初步使用创建npm init vite-app demo安装依赖npm i启动项目npm run dev1.1setup这是一个函数有返回值跟原来的data差不多,但是在data之前,在原有的所有生命周期之前,也就是在setup里面的数据,原有的生命周期都可以拿到,另外setup里面也有生命周期,后面会写到setup() { let num =0 function changeCount() { num++; } return原创 2021-10-20 20:00:10 · 1602 阅读 · 0 评论 -
vue使用sass
vue使用sassnode 安装版本 12.16.3sass版本如果安装sass启动项目报错 就安装这个版本npm i node-sass@4.14.1 sass-loader@5.0.0 -S原创 2021-09-30 16:09:17 · 166 阅读 · 0 评论 -
vue-provide/inject
vue-provide/inject的用法可以优化vue的项目在传入数据的地方<script>export default { provide() { return { testExampeleData: [ "test" ] } },};</script>接受数据的地方<script>export default { inject: ['testExampeleData'],};原创 2021-05-26 16:42:45 · 64 阅读 · 0 评论 -
vuex的详细使用流程
vuex的详细使用流程1.vuex的创建如果使用vue3.0,在选择选项得时候选择vuex ,他就会自动帮你创建好![在这里插入图片描述](https://img-blog.csdnimg.cn/20210422170336768.png如果是vue其他版本就去下载vuex,然后在入口文件导入store这个文件,也就是放置vuex状态管理得地方导入vuex,创建使用实例对象,放在vue得实例对象里1.1Store数据源这里只存数据不改怎么在其他页面获取这里面得状态呢我提供了几种写法原创 2021-04-23 10:43:27 · 4808 阅读 · 0 评论 -
vue路由传值params,query之踩坑系列
vue路由传值params,query之踩坑系列vue路由传值this.$router.push({name:xx,params:{id:xx}}),或者另外一种写法<router-link :to='{name:"home",params:{id:2}}' tag="li">首页</router-link>这两种在某种意义上是一样的效果适合get之外的请求,也就是不在地址栏带参数在这里一定要注意,to前面一定要加冒号:,不然跳过去的就是空白的页面上显示不了,name原创 2021-04-22 14:07:52 · 584 阅读 · 0 评论 -
router-link细节
router-link细节首先router-link在转换得时候会转换成一个a标签<ul class="tabbar-ul"> <router-link to='/' tag="li">网站首页</router-link> <router-link to='/Popular' tag="li" >热门动态</router-link> <router-link to='/Performan'原创 2021-04-21 14:14:55 · 453 阅读 · 0 评论 -
解决vue3打包过后空白页面
解决vue3打包过后空白页面在项目根目录下,新建一个vue.config.js文件module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } }}如果还是不可以,那么需要找到如下页面:...原创 2021-04-08 16:38:59 · 3994 阅读 · 0 评论 -
vue项目报错core-js/modules/es.symbol
今天做项目遇到一个神奇的bug在项目启动的时候报错core-js/modules/es.symbol,为什么回报这种错,是因为我在启动时,用了es6的for…of遍历语法解决办法升级到core 3.6.4版本npm install core-js@3.6.4原创 2021-04-07 19:35:47 · 1225 阅读 · 0 评论 -
vue判定flag动态绑定要借助require
<label for="agress"><img :src="cbox?require('@/assets/image/index/check.png'):require('@/assets/image/index/uncheck.png')" alt=""></label> data() { return { cbox:true, }; }, 这样写有效 <label for="agress"&...原创 2021-04-07 16:39:52 · 230 阅读 · 0 评论 -
vue注册组件跟注册局部组件
vue注册组件跟注册局部组件由于以前都是用脚手架写的项目,因此常常忽略了这一点,由于最近入驻的公司是关于直播广告活动的,因此都是基于vue.js写出的项目,废话不多说直接开写吧下面注册组件都是基于vue.js的全局注册组件第一种方法var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>'}); //创建组件实例Vue.component("myCom",com1); //定义vue组件简化版的写法Vue.c原创 2021-03-15 20:00:21 · 247 阅读 · 0 评论 -
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd,按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd输入vue ui会自己在浏览器打开点击创建项目项目文件夹名 ele_spa包管理器 yarn或者npm(本人习惯yarn)初始化git仓库新手建议关闭下一步模板,手动choose vue version 打开babel 选中typescript原创 2020-10-15 20:46:01 · 702 阅读 · 0 评论 -
vue获取token 实现token登录
vue实现token用户登录使用token做登录验证的思路大致如下:1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。3、前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中。(本次项目用的是vue框架,使用了vuex全局状态管理)4、前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面。5、分装一原创 2020-12-04 09:43:09 · 31816 阅读 · 13 评论 -
axios防抖请求
axios防抖请求什么叫做防抖相信很多人都不陌生把在这里还是稍作解释,防抖不是所谓的防抖动而是重复,就是在你网络很卡的时候点击一个按钮重复发送请求,之前某宝就有这种现象明明只支付一次却付了两次钱,就是因为网络卡,重复发送请求,然后在输入指纹的时候,一次就把两次请求都做了,下面进入正文1.PC端 - 用户双击搜索按钮,可能会触发两次搜索请求2.移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方原创 2020-11-24 10:39:45 · 3077 阅读 · 0 评论 -
axios请求方法
axios中各种方法调用接口get方法1.不带参数axios.get("/user")2.带参数axios.get("/user",{ params:{ id:id, age:10 }}注意这里是以对象的形式传参post方法axios.post("/user/", params:{ id:id })注意这里以键值对的方式提交params就是键名delete方法1.参数为普通的字符axios.delete("/user",{ params:{原创 2020-11-24 09:43:26 · 6746 阅读 · 2 评论 -
前端鉴权浅用
前端鉴权前端权限的控制从本质上来说,就是控制前端视图层的展示和前端所发送的请求 ,但是只有前端权限控制没有后端权限控制是万万不可的,前端权限只是达到一个锦上添花的效果前端权限的意义1.降低非法操作的可能性比如页面上的一个按钮,通过控制台改变按钮的属性,如果前端没有权限控制虽然点击了,但是不会有效果,如果有权限设置的话,没有权限的用户我们可以让其按钮隐藏2.尽可能排除不必要请求,减轻服务器压力不具备权限的请求,就应该压根不需要发送3.提高用户体验前端权限的控制思路首先我们准备一个404界面原创 2020-11-14 21:29:48 · 668 阅读 · 0 评论 -
vue之导航守卫,vuex
vue之导航守卫首先在这里说明一下导航守卫是个什么东西其实就好比一个门卫你带有工作证我就让你进去,没有的话就不让你进去,常用于登录购物车之类需要用户信息的页面直接上代码如果Vue是在生产环境下面,则不提示相关的代码信息Vue.config.productionTip = false//在main.js下面添加router.beforeEach({to,from,next}=>{ //to去向,from来源,next下一步 //此处写逻辑代码 if(){ next() }else原创 2020-11-11 17:28:39 · 773 阅读 · 0 评论 -
Vue初始(2)过滤器,修饰符
Vue初始(2)过滤器,修饰符Vue修饰符Vue的修饰符主要针对的是Vue的数据绑定,Vue的事件以及Vue的按键等1.lazy修饰符,这个修饰符是数据绑定的修饰符,它一般配合v-model来使用<input type="text" v-model.lazy="msg"><hr><h2>{{msg}}</h2>v-model本身是在input事件触发的,只要输入就立即触发改变,但是加了lazy修饰符以后,则会在change事件上面触发2.原创 2020-10-11 16:05:20 · 146 阅读 · 0 评论 -
Vue组件相关引用
Vue组件可以理解为将多个小的东西封装成一个大的东西,然后可以直接对大的东西来进行操作,组件的核心是VirtualDOM(虚拟DOM)组件在注册也分为全局组件与局部组件,无论是全局组件还是局部组件,变像来说它们也是一个Vue对象,所以它们内部具备与Vue一样的东西全局组件<body> <div id="app"> <m-card></m-card> <hr> <m-card>原创 2020-10-11 16:13:09 · 447 阅读 · 0 评论 -
Vue点餐系统流程
Vue点餐系统流程App.vue组件<template><div class="app-box"> <router-view/></div></template><script>//导入需要keep-alive 也就是不需要重新的组件的一级路由数组import keepAliveRoutes from "./router/keepAliveRoutes"export default { name:"App",原创 2020-10-15 21:01:53 · 1807 阅读 · 0 评论 -
Vue基础补充
Vue补充补充内容refDOM的操作生命周期Vue动画及动画组件<transition>ref操作DOM在之前的时候讲过,Vue不推荐我们直接对DOM进行操作,但是有些操作必须借助于DOM去完成,所以我们Vue内部也提供了两种获取DOM元素的方式通过事件来获取DOM(因为事件里面有“事件的绑定”与“事件的触发者”)通过ref属性来获取,在获取当中使用this.$refs.值完成今天主要就是对ref做补充<body> <div id="ap原创 2020-10-23 16:21:52 · 138 阅读 · 0 评论 -
vue配置项常用配置
vue配置项常用配置const config={ publicPath:"./", //默认是“/”改成“./”代表从当前目录开始 devServer:{ port:9999 }, //configureWebpack获取脚手架webpack的配置对象config然后根据这个可以重新配置 configureWebpack:config=>{ let htmlWebpackPlugin=config.plugins.find(i原创 2020-11-11 11:06:05 · 1262 阅读 · 0 评论 -
vue组件之间传值的几种方式
vue组件传值父子组件之间传值。几种常见方式第一种方式(父传子)父组件<m-child v-bind:msg="'from parent msg'"></m-child>//在父组件上面绑定一个msg注意:数据绑定的时候记得加 : 如果后面的数据是字符串则不用加 双引号 如果实在要加 : 的时候写法 :msg="‘i am item’" ,因为 :msg 默认把后面的识别变量,所以后面记得在字符串里面单引号,直接msg默认是字符串,后面不用加子组件(mCh原创 2020-11-11 13:19:58 · 11752 阅读 · 0 评论 -
vue-router前端路由语法
vue-router前端路由vue-router是一个前端路由,他可以根据路由地址来动态的显示某些组件首先使用vue-router.jsrouter:{//初始化路由 routes:new VueRouter([ { path:"/路径" //此处路径要加‘/’, component:组件名, name:路径名 },{ path:"/" redirect:{ name:"路由名" //此处输入/自动跳转某个路由 }原创 2020-10-14 18:42:46 · 952 阅读 · 0 评论