业余前端的职业经历

注意URL里面不能是纯变量，那样就会报错了 详细的报错 你可以去试试看。更好的就是直接在模板中调用一个函数 然后传入图片的名字就可以显示出来。不管是本地开发 还是打包之后都会找到具体的图片引入显示到页面中。一般来说项目中我们集中存放图片，然后希望在页面中直接引入！再src目录下 static 下创建一个images文件。然后在/src/utils/mixin.js文件。我们就可以在所有的组件模板中直接使用了。事实上确实可以办到，我们用到了一个。关注我持续更新 前端知识。然后在main.js中。

其实很多小伙伴都是从vue2过来的 我们之前想要注册一个全局属性，让所有的子组件 都可以使用到也许会这样书写 就是。

我好像没有找到现成的，只好自己简单配置了下，有需要的童鞋直接拿去用。

vue图片播放器

上来先介绍下博主哈,之前写的是jq项目,后面直接就转react,现在业余vue开发者,作为一年react开发经验,一年jq项目, 菜鸟vue水平,在这里扯一扯 博主对vue插槽的看法哈如果我面试的vue初级开发,我会问你有没有自己封装过组件,你说有的话,我会继续问你 有没有用到插槽呢, 如果用到插槽的话,说下你对作用域插槽的理解呢, 如果你说的可以,我就会当场说 你明天来上班吧,工资好谈呢.包括你以后想进阶成为高级vue开发那么你必须要知道怎么用slot-scope去做一些数据和 ui 分离的封装什

不管react和vue其实都会有这个问题 在react中我们可以使用 context的方式进行传递但是今天的主角并不是 react. 博主最近使用vue进行开发。 相信初学的小伙伴 肯定会碰见多层嵌套传递的问题其实你也可以 根据 props 一层一层传递下去。但是不是贼麻烦vue中给我提供了。provide 和 inject的方式 进行深层组件传递。vue2中在上层组件中export default { provide: { foo :"hello world" }}// 当然有

主要是有的组件 我们可能很多页面都会用到 这个时候 为了避免每个页面组件都引入,a.vueimport header from "@/components/header.vue"b.vueimport header from "@/components/header.vue"c.vueimport header from "@/components/header.vue"这样就造成很大的代码重复了 是不是很难受因为现在vue3 也慢慢替换vue2 但v2可能还是主流 所以这里我写出

这个现象奇怪的很。我从vuex中。结构出来的 useStore 获取出来的 store 一直为空因为我的vuex中的方法 一直没有触发。最后发现 setup中的store一直为undefined有的网友说我并没有写在 setup 但是事实上我就是写在setup中其实原因是 我之前写了一段 需要dom操作 然后放在 setup中然后就是这段代码导致 其实如果你要在 setup操作dom的话 最好还是import { nextTick } from "vue"import { useStore }

苹果用户经常反馈 我经常要点击好几次才进去不管是使用 @tap @click都不行什么样式上 加 cursor pointer 什么委托都试了试都不行最后试了试 touch事件 才发现可以解决我的问题。难受最好在移动端还是使用touch事件比较好@touchend 我就是用的这个事件处理好了最后附上一个 也是经常碰见的坑就是 ios10以上双手和双击还是可以放大的问题万能的网友<script> window.onload = function () { // 阻止双击

vue3 来的同时。也带火了 vite,不过现在仍然是webpack称王的时代,vite也在快速发展中.今天讲的主角是 vant, 那么在vite中使用按照官方文档 照样给我报错了初始化 vite项目之后安装vantnpm install vant --saveyarn add vent --save在vite中使用vant还需要其他的插件辅助, 就是vite-plugin-style-import这里官方推荐的是 1.4.1版本yarn add vite-plugin-style-im

单纯的切来切去 可能会觉得无聊,这个时候可能希望给我们的路由加上一些动画效果.这个时候 我们如果做的是h5的项目的话,可以选择淡入淡出的效果 其实还是比较简单的 就是使用我们的那个 transition组件<template> <router-view v-slot="{ Component }"> <transition name="slide-fade" mode="out-in" :duration="{ enter: 500, leave: 300 }"

可能有一点让人很难受的就是 如果网站要更换整体的协议和政策时候,运营会给我们一个doc文档 或者docx文件 让我们转换成html然后放到网站中这里就介绍一个比较好用的工具mac安装brew install pandoc查看自己安装成功的话brew -h转换成html5pandoc -s example.docx -t html5 -o example.html最后发现转换成功了。然后就可以放到你的网站上了。还是比较方便 当然这个工具不仅仅是能转换html md.txt 都

使用hbuilderX创建的项目 确实比较方便 但是确实限制了很多东西。我想自定义一些打包或者环境 对我来说有点不舒服所以我还是采用了 cli的方式创建了 uni项目因为项目中引入了 uview 这个是需要 sass的支持呢 ,但是吧 cli创建的 需要你手动安装下 sass支持环境安装npm i sass-loader node-sass --save**注意如果你使用的是 vue2的话 那么最新的webpack版本是4.*, 但是我们npm默认不指认版本的话 安装的就是最新的webpac

本来原生的h5 直接input type=“password” 这样会发现 也不是说不能输入数字。只是让用户多了一步操作 的切换到数字的情况才能输入。 不知道安卓手机如何 反正苹果是这样的 （这样体验不好）即使是你自己做一个数字键盘也是不行的，响应比较卡顿（tips: 不让input输入框 弹出软键盘，直接设置readonly=true就可以）但是有没有这种 password + number 这种组合形式嘛。好像是没有吧但是我们可以做一个出来。利用vue的双向绑定快速实现tips 在pa

感觉 vite 有点学create-react-app了, 脚手架 也不给我们自动搞好 vuex 和 react-router ，让我这衣来伸手饭来张口的人感觉生活难了好多。好可恶啊对我这个小白，不想学习 只想吃老本的前端程序员来说 太难了，但想了想为了挣钱还是老老实实去学习吧。好了不恶搞了 开始步入正题了。vue用着真爽 vite真快， 推荐其实只要你是vue2 的熟练使用者的话，自己简单配置下 还是可以因为vite搭配的是vue3 那么 vue-router 也应该是搭配 vue3安

还是会出现这样的需求的，我们的业务中需要两个module中的数据 进行处理， 然后一个actions中的数据 依赖另一个module中actions的执行结果 这个时候就需要我 执行另一个modu le中的actions了其实调用还是比较简单的举个例子就是 a模块要调用b模块中的actions那么我们在a模块中就应该是书写是module aa.jsdispatch(‘b/getListData’, params, { root: true }){ namespaced: true, act

看了各种文档没有实现我的要求的，只能自己手写一个了<u-field v-model="cash" @input="inputChange" type="number" label="提现金额" placeholder="最多可提现一亿元">inputChange(value) { if(value) { var price = value.toString().replace(/(?<=\.[0-9]{2})\d+/, '') this.$nextTick(() =>

先看下效果哈，相信这种效果业务中还是比较常见的，因为吧pdf最大只能上传5M的大小，所以稍微动下就要超过了，所以录制的时候我点的很快。将就着看吧。毕竟代码才是关键 哈哈。效果就凑合着看大部分情况下。ui组件会给我们封装好的，但有些还是得需要我们自己写了其实当你了解了简单的原理之后其实还是很简单的就实现了呢FloatTop.vue 组件。可以直接拿去使用哈<template> <div class="container"> <div class="cont

在项目中能不能有这样的变量 不是挂在Vue原型上，就是一个常量在所有的地方都可以访问到 这样的东西有的童鞋可能说 那个。process.env.NODE_ENV 不就是一个全局的的吗怎么说呢，这个也算是全局的变量的一种情况吧。但是我们想要的可能就是。比如 var a = ‘12’ 在项目任何位置都可以访问到这个a其实是可以做到的。 通过webpack的一个插件来做到在vue.config.jsimport webpack = require('webpack')module.exports =

好久没写vue项目了，只记得之前的更改第三方ui插件的样式是 /deep/ 或者 >>>然后打包的时候就出来这个警告了我是有强迫症的 就想把它解决了。看它提示我写成。::v-deep .demo {}:deep .demo 还是会继续报错。最后改成 :deep() 把选择其放到这个里面 才不会报警告了:deep(.demo) {}前端更新速度还是太快了 有点羡慕后端童鞋了 很久没有更新。就算更新也不会发生大变动。关注我。持续更新前端知识...

先放一个成功之后的效果吧 移动端h5项目背景 新开的vue3项目 需要用到层叠轮播图首先想到了swiper插件，安装之后是 swiper7 版本注意swiper7只能在vite中直接引入使用，因为它是基于esm模块编写的，webpack默认是cjs规范，不支持esm，除非你在webapck中引入babel 让node_modules 中支持 esm编译否则 他引入时候的会报错说找不到vue-awesome-swiper 基于swiper封装的vue组件，但好像不支持vue3 pass，

最新版本的HbuilderX 已经支持 创建vue3版本的uniapp 项目了但是默认创建的还是 vue2版本,需要我们手动更改到 vue3版本在manifest.json 可视化配置页面进行更改然后我们就可以 写vue3的语法了我们就拿最经典的计数器作为尝鲜吧<template> <view class="content"> <button type="primary" @click="addCount">加一</button> {{c

有的时候 小图标 ui一般不会直接切给我们，可能会告诉我们 图标都在自己公司的一个iconfont图标库中让我们自己去查找资源管理 我的项目 我参与的项目 (一般是公司ui可能会拉你进来) 然后下载到本地下载到本地之后 是一个压缩包然后 就是 吧 那个ifconfon.css 文件 还有几个字体文件拿出来 在assets文件夹下创建一个 fonts的字体文件这里注意 要讲文件引入路径修改下哈之前可能直接是 iconfont.eot 啥的 我们不是变换了下 ...

之前搞pc端的 会使用element的ui组件 现在 vue3 来了 顺便也更新试用下 vuu3中的ui组件 不过好像 element还没更新支持 vue3 所以先用antd 来试试看1. 安装npm i --save ant-design-vue@next2. 注册使用 引入样式文件import { Button, message } from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';var app =...

在一家公司呆的时间长了，前期可能事情多了，后期项目比较稳定了 可能就比较闲了 如果薪资待遇可以的话 就可以一直待下去搞it的人 最好还是要一种居安思危的思想 如果不知道自己现在的水平多少 那就出去走走 面试面试看看 让面试官 问些问题 看你能不能答上来这样 最近的 面试了一家 名气可以的 要求可能比较高的 的公司 就来分享下 经验吧这家公司 主要还是使用的vue 作为主要技术栈 大多数的问题还是围绕着 vue展开的 我是技术经历了 三次 面试 分别是 初级前端...

直接上效果还看下哈由于不让上传超过5M的图片 就切换了了 两下 就4M了 尴尬了直接上 组件 我搞了一个 Carousel.vue的组件<template> <div class="carousel" ref="carousel"> <div class="whole"> <div class="roll-img"> <span class="last" @click="after" v-...

虽然 await 后面不一定非得跟 一个 返回promise对象得函数 但是如果你在工作中用的话 那就是必须后面跟一个 Promise函数在没搞懂 async await promise三者之间的关系前 不要去使用 async 在你得vue项目中 这个东西 用的好 事半功倍 用的不好 掉进深坑之前博主有专门讲解过三者之间的关系 可以去看之前的博客飞机票 在vue中请求数据用的是axios 而且axios 请求数据都是返回一个 promise对象所以在 axios 请求 前面

其实有一种方式和就是在 index.html 中引入 socket.io.js 文件但作为单页应用 在index.html中引入东西 显然 不好 本博主 也不推荐用这种方式安装 vue-socket.io （大神封装好的vue插件）npm install vue-socket.io --save注册和使用import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, conne

之前的博客中 曾经的我 面试碰见了一道题目就是 如何获取从后台回来的一组数据 动态渲染到页面中的 标签我说的是 在created 中 请求数据 然后 在monted 中进行 获取动态渲染的 标签 其实这个倒也没错 但是不能算对下面我举一个例子哈data中有一个数组 然后我把它渲染到页面中 我是在 mounted 中 对这个动态渲染的标签进行获取 <ul> <li v-for="(item, index) in userList" :key="index">

这个是因为 再第一次渲染的时候 你请求的数据还没有回来，即使你是再 created中请求的数据 但是vue的生命周期函数还是一直在往下执行的记住图片的 src 属性也会发起网络请求 他找到路径自然就会报错了<img :src="api + list.img_url" />其实可以 设置下 v-if 进行条件渲染 <img v-if="list.img_url" :src="api + list.img_url" />这样就不会在报错误 其实正常也不影响啥

没有一段时间 vue开发经验的小伙伴来说，可能很多高级的骚操作东西都不会用到，比如 mixin 这个 我想 很多初级前端 和博主这个菜鸟前端 一样都没用过哈。据说mixin 封装组件的时候 会用到 (我没听错吧 封装组件 这个大佬才会做，我不会，撤了撤了)当然 我们的项目本来就那么小 需要什么骚操作哈 这点 我也认同 毕竟适合的才是最好的今天拿 vuex 来做个 小 例子 来讲解一些 开发过程中一些 稍微高级的骚操作我相信哈 用过 一段时间 vuex 的童鞋 一定 对 辅助函数 mapStat

哎 每天都是 挖坑 填坑得过程后台 不给你开启跨域 你搞死 都不可能 解决跨域得 兄嘚下面的三部曲 得由后台 来添加// 响应头设置header('Access-Control-Allow-Headers:x-requested-with,content-type');// 设置允许传递 cookiesheader('Access-Control-Allow-Credentials:true');// 指定允许其他域名访问header('Access-Control-Allow-Origin

做个几个月node的项目后 ，终于 公司给我分配了一个 vue项目 ，由于很久没搞过vue了 一上来 到时 有点难度 毕竟好久没用了。但是把 捡起来 还是比较快的这天出来了一个问题 我给子组件传进来了一个 show 变量 来控制子组件中一个元素的显示隐藏后来发现一直 显示不出来 哈 搞得我很难受最后发现 ：我再父组件中 给这个元素 设置了一个 display:none;我擦 这个倒是 很难想到的 子组件 虽然样式穿透不出来 影响到父组件 但是 父组件却可以影响子组件的样式 学到了

我们在项目中使用 过滤器 更多的是 格式化 日期 性别啥 但是 也会碰见一些特殊的情况 需要传参的又得时候会和 data中的其他的数据产生关联 我发现在过滤器中 使用 this.属性值的情况 竟然 出不来 很奇怪这个时候 只能通过传参的方式进行传入到 过滤器中了<p>{{sex | gender(count) }}</p> // 过滤器中 第一个 参数 还是 前面的 sex 第二个才是我们要传进来的那个参数 countfilters:{ gender(val

如果你对vue得原理稍微理解得 这个问题应该是不难的如果 vue中 data 中的数据发生变化 其实 这个时候 dom 树 时会发生变化得 和一些 过滤器 也会静悄悄得执行的这样说可能有点笼统 还是 根据实际例子来说吧<input @input="change" type="text" v-model="value"><p>{{sex | gender }}</p>data(){ return { value:'',

其实过滤器还是挺有用的哈，比如后台给我们返回用户的性别，一般来说吧 数据库不会存储男和女的 会存储一个 1 和 0 假设 1代表男性 0代表女性这个时候 我们不能展示一个 1 和 0到页面上给客户看吧 这个时候 用过滤器就很好了<div> {{sex}</div>data(){ return { sex:0 }},想下面这种展示成这样肯定不行了定义一个组件中的过滤器filters:{ changeSex(value){ if(value

相信只要使用vue+elmentUI 做后台管理系统的 基本上都需要用到左侧导航栏然后左侧导航栏和路由导航 联系在一起默认它是不启用 路由关联的 这个时候我们得配置一下 才可以给el-menu上面加一个　 router的属性才可以 关联到<el-menu :default-active="$router.currentRoute.path" router class="el-menu-slide"></el-menu>还有就是一个问题 就是重复点击导航的时候 就会报错

你有没有因为Vue自带的组件默认切换方式 感到难受么那你来看菜鸟的这篇文章算是来对了。各位大爷里面请因为本人的动画效果做的实在特别烂，就不在这里丢人了 直接用大神写好的动画哦animate.css https://animate.style/ 官方地址 已经更新到 4.* 版本 不知不觉让小菜鸟的我觉得技术这东西更新真的好快然后 我用 vue-cli 创建了一个 初始化的脚手架项目 不要乱动什么就这个初始化项目 拿来当例子 最好了点击上面home和about 来实现 组件的切换默认是

以往我们在vue中绑定一个dom元素的属性的时候 使用 v-bind<body> <div id="app"> <p v-bind:title="msg">鼠标秒上来看看</p> </div></body><script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ msg:"看到我了吧", }, methods:{

hash模式 是默认的，就是在地址栏 访问上面有一个 #号http://localhost:8081/#/home，http://localhost:8081/#/searchhash模式下 默认的地址栏 默认不会讲# 号 后面的发送给服务器端在发送之前 前端会判断下 将# 号后面的过滤掉所以上面的就是 http://localhost:8081/history模式 则是利用htm...