vue
有趣的前端
这个作者很懒,什么都没留下…
展开
-
Vue中动态设置Style样式
凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 html :style="{ color: activeColor, fontSize: fontSize + 'px' }" ...原创 2021-05-24 10:33:30 · 2911 阅读 · 1 评论 -
vue 使用nprogress 实现顶部加载进度条效果
一、下载安装yarn add nprogressnpm i nprogresscnpm i nprogress二、引入//可以在router.js 和 axios.js文件中使用import NProgress from 'nprogress'//样式可以放在main.js中全局样式import 'nprogress/nprogress.css'三、配置使用//页面打开时显示router.beforeEach((to,from,next) => { NProgress.s原创 2020-09-13 20:18:17 · 392 阅读 · 0 评论 -
vue 编写插槽组件
标题vue-组件化-插槽(slot) 理解Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如:导航栏组件中,右上角的分享按钮,左上角做菜单按钮弹出框组件中,弹出框的提示内容等...在这种场景下,把保留给使用者的部分,叫做插槽(slot)插槽分类匿名插槽理解:所谓匿名插槽,就是这个插槽里,没有声明任何名称,使用者放进来的东西,都扔进这个插槽中。匿名插槽是一种特殊的具名插槽,也就是名为default的插槽写法://自定义组件中&l原创 2020-09-10 10:30:38 · 742 阅读 · 0 评论 -
elementUI表单验证报错:Error in event handler for “el.form.blur“: “Error: Unknown rule type name“ found in
elementUI是一款非常好用的基于vue脚手架的后端框架,表单验证非常好用。但是,今天我爱模板网在使用它进行日期验证的时候出了问题,报Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"的错误:代码如下:js验证码的代码:从上面的错误可以看出,应该是类型出错。可能是:elementUI自带的格式转换后会将绑定值转为字符串,而校验规则中的【type...原创 2020-09-09 11:34:33 · 8504 阅读 · 0 评论 -
webpack 中 Module build failed (from ./node_modules/babel-loader/lib/index.js): 的错误解决
在使用webpack打包中出现以下错误:Module build failed (from ./node_modules/babel-loader/lib/index.js):Error: Plugin/Preset files are not allowed to export objects, only functions.1. 原因:出现错误是由于babel的版本冲,有两种解决方式:版本更换:babel-loader 8.x | babel 7.x (升级版本)npm inst原创 2020-09-09 10:46:59 · 4585 阅读 · 1 评论 -
vue v-for遍历对象详解
代码:<body><div id=" app"> <!--注意:在遍历对象身上的键值对的时候,除了有val key, 在第三个位置还有一个索引--> <p v-for=" (val, key, i) in user">值是: {{ val }} ---键是:{{key}} --索引{{i}}</div><script> //创建Vue实例,得到ViewMode1 varVm = new原创 2020-09-03 21:00:18 · 3233 阅读 · 0 评论 -
vue input搜索功能分享
全部都是亮点:<template> <div> <div class="top"><!--搜索框--> <van-nav-bar title="搜索" left-text="返回" right-text="按钮" left-arrow原创 2020-08-31 20:23:36 · 885 阅读 · 0 评论 -
vue页面与页面之间的滚动位置隔离并缓存各页面位置
上代码:let arr = {}const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, //页面之间无位置影响 scrollBehavior(to, from, savedPosition) { arr[from.name] = document.documentElement.scrollTop let y = ar原创 2020-08-30 19:28:06 · 252 阅读 · 0 评论 -
参数为FormData 类型转换
一、准备,了解所需技术知识上传文件表单: <input type="file" accept="image/*" capture="camera" > 介绍:1. type="file" 上传文件表单2. accept="image/*" 上传文件类型3. capture="camera" 使用手机摄像头拍摄请求参数为FormData 类型 new FormData() let formData = new FormData()原创 2020-08-27 21:17:47 · 1973 阅读 · 0 评论 -
vue中的组件通信 及 递归组件
一、vue组件通讯父子通讯**** 父->子:主要通过props实现 props:支持数组和对象两种接收形式单向数据流:只能父->子级->子级的子级,而不能子级改变父级注意:如果要接收的props值进行修改,则通常把props接收的值处理成data变量或computed计算属性难道子级真的不难改变父级了吗??1.利用对象特性--浅复制2.利用vue中的sync和$emit实现父组件中: <a-com :msg.sync="msg"><原创 2020-08-27 07:31:20 · 321 阅读 · 0 评论 -
vue自定义组件用v-model来接受子组件的值,可以自定义任何样式输入框组件
今天教大家一个有趣的操作:如图:利用v-model属性接受组件值,实现自定义样式输入框父组件代码:<template> <div class="logon"> <Input type="number" v-model="abcd" placeholder="请输入手机号"/> {{ abcd }} </div></template><原创 2020-08-20 20:24:16 · 800 阅读 · 2 评论 -
vue项目用vue.config.js来配合不同环境自动切换配置
1. 首先安装插件,并修改启动项安装cross-env 跨平台切换插件兼容好,-作用: 切换环境变量例如:不同的打包和运行命令切换不同的配置变量"scripts": { "serve": "cross-env type=dev vue-cli-service serve", "build": "cross-env type=prod vue-cli-service build" }安装 process 插件 是node中读取nodejs总环境变量的所用参数作用:在原创 2020-08-19 21:09:28 · 2625 阅读 · 1 评论 -
vue项目使用插件postcss-px2vwh将px转vw wh
您可以使用此插件将“ px”转换为“ vw”或“ vh”。首先:安装插件 : postcss-px2vwhnpm i postcss-px2vwh配置文件:vue项目根目录下建 .postcssrc.js文件赋值以下代码:module.exports = { plugins: [ require('@moohng/postcss-px2vw')({ width: 375, //你的 psd's wi原创 2020-08-19 08:00:50 · 1212 阅读 · 1 评论 -
vue使用插件Animate.css轻松实现完美转场动画
首先第一步:npm 或 yarn 安装 :npm install animate.css --saveyarn add animate.css(扩展)HTML引入:在HTML中使用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />安装之后,下一步: 引入例: vue中: import 'animate.c原创 2020-08-09 17:37:30 · 1116 阅读 · 0 评论 -
用最简单的css 来实现vue的转场动画
效果:app里的代码:<transition name="slide-fade"> <router-view/> </transition>css代码:写在app的style标签中<style> .slide-fade{ position: fixed;left:0;right: 0; width: 100%; background-color: whi原创 2020-08-03 13:28:50 · 542 阅读 · 0 评论 -
vue中的watch侦听属性的使用
vue中的watch侦听属性的使用方法详解:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。注意:不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 V原创 2020-07-16 20:53:14 · 453 阅读 · 0 评论 -
添加页面滚动监听,来完成到底部加载更多数据
代码: window.addEventListener('scroll', () => { if (document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop < 1) { if (this.p === 4) {原创 2020-07-08 16:17:00 · 411 阅读 · 0 评论 -
vue商品组件封装
效果:API :img :照片路径,title :标题名字,describe :描述,obj :对象{ price: 现价,originalPrice:原价,sales:销量 }代码:<template> <div @click="clicks()"> <div class="llen"> <div class="img"> <img :src="img"&g原创 2020-07-03 16:27:05 · 599 阅读 · 0 评论 -
vue中的axios请求将设置为form-dara的数据请求格式
1. axios将请求设置为form-dara的数据请求格式//设置为form-dara的数据请求格式 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it)原创 2020-07-01 16:47:58 · 240 阅读 · 0 评论 -
vue获取当前页面路由及参数
代码:当前页面完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.$route.params原创 2020-06-30 12:05:25 · 3681 阅读 · 0 评论