
vue
拾玥花开
一个奋斗者
展开
-
Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候,mode属性的"in-out"、"out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之。首先我们看一下vue中文文档的说法根据这样的描述我写出了如下代码demo<style type="text/css"> .on-enter-active,.off-enter-active{ transition: 2s ease; } .on-leave-active,.off-leave-active{转载 2021-07-06 09:38:35 · 1891 阅读 · 0 评论 -
aciveated钩子函数
当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。原创 2021-07-05 10:18:27 · 140 阅读 · 0 评论 -
Vue中v-model结合checkbox类型
Vue中v-model结合checkbox类型1.单选框<body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是:{{isAgree}}</h2> &转载 2021-05-23 15:39:56 · 331 阅读 · 0 评论 -
Vue cil3使用postcss-plugin-px2rem达到适配的效果
安装 npm i postcss-plugin-px2rem --save -devpackage.json中添加配置(组件中px转rem才生效)在package.json、package.json、package.json中设置很重要"postcss-plugin-px2rem": { "rootValue": 37.5, "unitPrecision": 5, "propBlackList": [ "font-size"转载 2021-04-25 11:01:39 · 359 阅读 · 0 评论 -
Vue项目中axios请求的时候使用localStorage去拼接报的401错误
在我上一篇博客所说的项目中的userinfo组件中,当在请求的时候会发生401错误,我们只要添加上请求头即可。 Headers : { 'Authorization': 'Bearer ' + localStorage.getItem("token"), },原创 2021-03-09 17:06:28 · 1067 阅读 · 0 评论 -
Vue项目中登陆和注册页面的数据判断
Vue项目中登陆和注册页面的数据判断本次讲解一下在Vue项目中注册页面和登陆页面中关于输入数据的判断。以我自己做的一个仿某站项目为例。这是每个输入框的组件<template> <div> <van-cell-group> <van-field v-model="content" :label="label" :rule="rule" :placeholder="placeholder" :type="type"/> &l原创 2021-03-09 16:36:26 · 1286 阅读 · 0 评论 -
推荐一个前端移动端项目用的到的适配插件
在vscode中搜索px-to-vw,下载这个插件。然后在首选项——设置中搜索px在viewport-Width中设置自己的设计图纸宽度,然后在实际项目中用alt+z按钮将px转换成vw 即可根据不同的手机实现适配的效果。...原创 2021-02-23 23:34:07 · 742 阅读 · 0 评论 -
Vue项目中个人中心头像的上传方法
我们实现的时点击头像栏这一整行都可以更换头像这个功能。我们需要使用vant组件库中的Uploader文件上传组件。即:<van-uploader :after-read="afterRead" />将这个代码复制到我们的代码中。注意此处的uploader组件需要和edit banner组件同级。<div class="uploadfile"> <div class="uploadimg"> <van-uploader pre原创 2021-01-24 00:31:10 · 3124 阅读 · 5 评论 -
Vue中watch的详细用法
Vue中watch的详细用法运用场景当项目中某个值发生变化时,想执行对应的方法或者时刻获取最新的值,此时就需要用到watch方法常规用法当值发生变化直接执行定义在methods中的方法,这种写法,只有当值value发生变化时,才会执行方法,第一次默认绑定值时不会执行changeValue函数;data(){ return{ value:'' }} watch:{ value:'changeValue' }, methods:{ changeValue转载 2021-01-20 23:49:35 · 1196 阅读 · 0 评论 -
Vue脚手架使用meta使得进入路由时进行验证
在初始的脚手架中的router文件夹中的index》原创 2021-01-20 21:57:10 · 298 阅读 · 0 评论 -
vscode中vue文件v-for语法报错
VsCode中vue文件v-for语法报错错误如下:原因是因为缺少键值key的语法错误添加key说明即可原创 2020-11-26 20:30:33 · 615 阅读 · 0 评论 -
vue侦听器以及基本指令
文章目录vue侦听器以及基本指令Vue的侦听属性vue基本指令v-oncev-html 标签代码渲染V-if指令V-show指令V-else指令V-else-if指令V-model指令V-model指令详解之修饰符lazyV-bind指令vue侦听器以及基本指令Vue的侦听属性Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。<div id="app"> {{name}} <br> <input type="text" v原创 2020-11-21 23:40:44 · 691 阅读 · 0 评论 -
vue基本逻辑
文章目录vue基本逻辑什么是vuevue使用:vue插值Vue的计算属性Vue的计算属性的setterVue的方法vue基本逻辑什么是vue某种意义上来讲, Vue.js不是一个框架-----它只聚焦视图层,是一个构建数据驱动的web界面的库(当然, 按照目前的发展来看,vue有完善的生态圈, 早可以成为框架)。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统. Vue内置的额外方法库较少, 比如Router, ajax,表单验证等等一些额外的功能得由我们自行引入。其特性:轻量化:原创 2020-11-21 22:44:09 · 1972 阅读 · 0 评论