vue
关注
分享
扫一扫
asteriaV
这个作者很懒，什么都没留下…
展开
-
vue全局自定义指令
一、用一个页面放自定义方法clickStateForm.js/** * @description 自定义指令v-preventClick 防止重复点击 */export default { install(Vue) { Vue.directive('preventClick', { inserted(el, binding) { el.addEventListener('click', () => { .原创 2021-08-25 15:09:03 · 1134 阅读 · 0 评论 -
vue返回上一页并刷新上一页数据
在上一页加上： activated: function () { this.fetchData()//数据加载的方法 },原创 2021-06-25 10:29:47 · 2552 阅读 · 0 评论 -
vue图片点击放大预览v-viewer
1.下载v-viewernpm install v-viewer -S2.main.js中引入注册import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true,转载 2020-09-25 17:08:05 · 260 阅读 · 0 评论 -
使用v-viewer点击图片预览的组件封装
1.下载v-viewernpm install v-viewer -S2.main.js中引入注册import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'too原创 2020-09-25 16:14:42 · 967 阅读 · 0 评论 -
vue 组件通信看这篇就够了
vue 组件间的通信是 vue 开发中很基础也十分重要的部分，作为使用 vue 的开发者每天都在使用。同时，vue 通信也是面试中非常高频的问题，有很多面试题，都是围绕通信展开。本文会介绍常见的通信方式，并分析每种方式的使用场景和注意点。vue中提倡单向数据流，这是为了保证数据流向的简洁性，使程序更易于理解。但对于一些边界情况，vue也提供了隐性的通信方式，这些通信方式会打破单向数据流的原则，应该谨慎使用。下面我们将组件通信分为父子组件通信 和 非父子组件通信进行分析父子组件通信1，pr转载 2020-06-28 18:45:58 · 652 阅读 · 1 评论 -
vue在组件中使用插槽,动态改变子组件数据
1）使用<slot></slot>标签父页面：如下，在父组件页面引入子组件，然后在子组件里面写上你要展示的内容。这里定义一个按钮： <Child> <template> <div class="openButton" @click="toRecharge"> <span>充值</span> </div> &l原创 2020-06-19 18:38:20 · 3173 阅读 · 1 评论 -
vue 路由懒加载 resolve vue-router配置
vue 路由懒加载 resolve作用：如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。你可以打包的时候看看目录结构就明白了。懒加载router/index.jsimport Vue from 'vue'import Router fro.转载 2020-06-12 17:18:08 · 697 阅读 · 0 评论 -
vue组件通信之bus
官方推荐的状态管理方案是Vuex。不过如果项目不是很大，状态管理也没有很复杂的话，使用Vuex有种杀鸡用牛刀的感觉，当然，这也是要根据自己的需求来的，只是建议。vue官方文档中有这样一个定义：非父子组件的通信，内容很少，如下：其实关于这个非父子组件通信的demo还是有的，它藏在了和broadcast的迁移文档中，有兴趣的小伙伴可以点击进去查看。文档中的建议就是：对于和broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实...转载 2020-06-11 18:14:16 · 232 阅读 · 0 评论 -
vue项目中使用mixins详解
一，混入mixins什么是mixins?混入（mixins）是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。mixins可以简单理解成常见函数封装，也可以进行一些业务逻辑的拆分，组合。也有一定的风险。混入方式组件按需混入，全局混入。二，结构//定义一个混入对象jsvar myMinxins={ data(){ return{ } }, .原创 2020-06-10 19:07:50 · 750 阅读 · 0 评论 -
vue-cli3.0项目中怎么去除eslint报错
方法一：把vue.config.js文件中的lintOnSave:为false,（注意：vue.config.js文件修改过需要重新启动项目）方法二：把 .eslintrc.js文件的parser:'babel-eslint'给注释掉原创 2020-06-01 16:00:08 · 695 阅读 · 0 评论 -
安装node.js，vue3.0脚手架
1，安装node.jsNode.js 安装包及源码下载地址为：https://nodejs.org/en/download/。安装方法步骤可参考：https://www.runoob.com/nodejs/nodejs-install-setup.html查看版本号：node -V，npm -V出现版本号即安装成功。（如未出现可重启电脑再试）node8,9或以上版本2，管理node.js版本（非必装）执行命令安装：npm install -g nn latest （升级node.j.原创 2020-05-29 10:40:41 · 337 阅读 · 0 评论 -
vue-cli3.0解决报错error in ./src/views/homepage.vue?vue&type=style&index=0&id=e20931f0&lang=scss&scoped
配置的配置vue.config.js文件中修改：把sass里面的data改为prependData // css相关配置 配置高于chainWebpack中关于css loader的配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps?是否在构建样式地图，false将提高构建速度 sourceMap: false, // css预设器配置项 loade...转载 2020-05-23 09:56:22 · 44008 阅读 · 2 评论 -
vue修改该项目浏览器顶部图片和title
如下所示，一般每个项目都会有自己的浏览器显示图片和title,那么我们应该怎么来修改它们呢1，修改项目浏览器的图片1) 在你的项目里面找到public下的favicon.ico2)到所在目录里面，把你需要的图片放上去，改图片名称为favicon.ico然后检查看是否修改成功即可；2，修改所在项目的浏览器title1) 在你的项目里面找到public下的index.html2)找到<title>标签，在里面写上你的title3)...原创 2020-05-09 18:35:59 · 3846 阅读 · 0 评论 -
vue写一个侧边导航栏，并且实现页面跳转，浏览器刷新/返回的高亮显示
大体侧边导航栏如下所示：<template> <div id="homeAside" class="clearfix"> <div class="homeAside clearfix"> <el-row class="tac"> <el-col :span="12"> <el-menu :default-active="'1'" ...原创 2020-05-09 17:50:26 · 2045 阅读 · 0 评论 -
vue写手机号绑定+验证，点击获取和重新获取验证码
用vue写手机号绑定如下，第一步，首先得是点击获取 ,60s倒计时第二步.出现60s倒计时第三步.点击获取完，出现重新获取按钮，并实现倒计时60s代码： <template> <div id="weixinAuth" class="clearfix"> <div class="container"> ...原创 2020-04-08 14:03:32 · 3812 阅读 · 1 评论 -
vue移动端项目使用click，点击延迟300ms解决方法
在开发微信端时，发现在Android下面，click事件非常的流畅，而在IOS下却有一定的延迟。查了查资料，发现早在2007年，苹果为了解决在Iphone这种小屏幕浏览器站点的问题，就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。vue项目中，可以通过引入fastclick第三方依赖包来解决。1、安装fastclick依赖：npm install fastclic...原创 2020-04-02 15:20:34 · 863 阅读 · 0 评论 -
vue项目兼容IE浏览器，判断IE11以下，则提示浏览器版本过低，更新浏览器页面
1. 把下面这段js直接放入vue项目的index.html 页面的<head>里面 <script type="text/javascript">(function(window) { var theUA = window.navigator.userAgent.toLowerCase(); if ((theUA.match(/msie\s\d+/...转载 2020-04-01 16:05:46 · 4308 阅读 · 3 评论 -
vue页面跳转并传参
vue页面跳转并传参,如下为A页面跳转B页面并传递所需参数：A页面：//html <el-table-column label="详情"> <template slot-scope="scope"> <div @click="handleEdit(scope.$index,scope.row)">...原创 2020-04-01 15:26:02 · 360 阅读 · 0 评论 -
vue中自定义<a>链接的href内容，设置动态链接，动态添加请求头
在http.js页面定义好了需要动态添加的接口请求头：OPEN_UR 。如下：列如下，需要给点击下载模板时的<a>标签动态添加请求头和接口// html部分 <a :href="`${OPEN_URL}`" size="middle" class="middleBtn" >下载模板</a>//js部分import { O...原创 2020-03-11 16:36:42 · 6422 阅读 · 1 评论 -
用v-model 来实现两个组件数据的双向绑定
下面以一个 input 组件实现的核心代码，介绍下v-model的应用。<!--父组件--><template> <base-input v-model="input"></base-input></template><script> export default { data...原创 2020-03-09 16:54:24 · 774 阅读 · 0 评论 -
vue+element-ui的项目使用分页器，跳转后再返回时高亮问题
1.页面所需相关操作如下：第一步：如下是班级管理模块的页面，跳转到班级管理的详情页面第二步: 再从班级管理详情页面返回到班级管理页面时，班级管理页面应该显示的是原先所选择的第5页第三步：其它页面点击跳转到该页面（如班级管理页面）时，应该为第一页（显示初始数据）2.代码初始列表页面（班级管理）页面代码：//html <el-paginatio...原创 2020-01-13 10:57:44 · 856 阅读 · 0 评论 -
Vue 带你了解生命周期钩子函数
下图展示了实例的生命周期。beforeCreate（创建前）在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created（创建后）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开...原创 2019-12-27 15:27:20 · 114 阅读 · 0 评论 -
vue使用vant框架的toast 轻提示框功能
脚手架推荐使用 Vue 官方提供的脚手架Vue Cli 3创建项目# 安装 Vue Cli npm install -g @vue/cli# 创建一个项目 vue create hello-world安装# 通过 npm 安装npm i vant -S一. 自动按需引入组件 (推荐)babel-plugin-import是一款 babel 插件，它会在编译过程...原创 2019-12-20 11:00:43 · 7351 阅读 · 1 评论 -
v-if和v-show的区别，详解！
1.v-if，v-eles-if，v-else的使用1）v-if，v-else//html<div v-if="isActive"> 今天星期三 </div> <div v-else> 今天星期四 </div>//jsisActive:true如上，isActive为true会显示"今天星期三"，为fa...原创 2019-12-19 11:34:04 · 262 阅读 · 0 评论 -
vue写短信验证时实现60s倒计时功能
vue写短信验证时实现60s倒计时功能已进入该页面就发送了验证码，同时实现倒计时功能：60s后效果：<!-- 找回密码 --><template> <div id="stepsTwo" class="clearfix"> <div class="steps-main clearfix"> <el...原创 2019-12-19 11:01:54 · 1242 阅读 · 0 评论 -
用vue写原生input密码框的文字显示/隐藏，通过v-if判断或改变type属性实现
要通过vue根据所提供的图片点击时显示/隐藏密码框的内容！效果图方法一：通过点击最右边的图标来实现，可以结合vue的v-if ,v-else判断加点击事件完成。//表单中密码部分 <el-form-item prop="password"> <div class="inputs"> <...原创 2019-08-15 14:32:36 · 1854 阅读 · 0 评论 -
vue中 Error in mounted hook: "TypeError: handler.call is not a function" 报错问题解决方案
进入组件页面时，vue报错：Error in mounted hook: "TypeError: handler.call is not a function"，主要原因是里面的钩子函数mounted {}是否有声明了未定义方法或是只声名了钩子函数解决该问题的方法：1.把mounted: {}删除掉。2.把mounted: {}改为mounted(){}。...原创 2019-12-17 14:15:11 · 19177 阅读 · 5 评论 -
vue页面跳转的同时把$message消息语句删除
一，创建一个message.js文件import { Message } from 'element-ui';export const warningOpen=(msg)=>{ Message({ showClose: true, message:msg, type: "warning", center: t...原创 2019-12-10 10:35:40 · 1951 阅读 · 0 评论 -
vue组件化引入message.js文件实现$message消息语句按需引入
最近用vue写项目时有用到$message消息提示语句，又觉得每次添加都要几行代码过于累赘，如下所示 this.$message({ showClose: true, message: "没有找到记录！", type: "warning", center: true ...原创 2019-12-10 10:19:55 · 4509 阅读 · 0 评论 -
vue获取当地日期和天气数据
效果如下，需要获取到当地实时日期和天气数据调用天气API接口，官网地址：https://www.tianqiapi.com/?action=v1//html <a class="weeks">{{week}}</a> <a class="weather">{{weather}}</a> <a class=...原创 2019-12-07 18:01:40 · 3142 阅读 · 2 评论 -
vue使用rem来实现移动端自适应布局
现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最高效的布局方案——rem布局一，设置初始的rem值用js计算来实现rem，只需要全局引入下面这段原生js代码即可 <script> (function (d...原创 2019-12-04 15:33:46 · 1166 阅读 · 2 评论 -
在vue-cli工程中如何实现无痕刷新？
原理：先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用。步骤：v-if控制<router-view></router-view>的显示。 provide：全局注册方法。 methods：设置reload方法。第一步在app.vue里面设置，<template> <div id="a...原创 2019-11-22 18:09:39 · 365 阅读 · 0 评论 -
vue 设置表格当内容过长时自动添加省略号，点击时显示提示文本
效果图如下：方法一：vue使用element-ui中的table布局，其实只要添加一个自带属性方法就可以：代码： <el-table-column label="家长建议" :show-overflow-tooltip="true"> <template slot-scope="scope"> ...原创 2019-11-20 10:59:22 · 5111 阅读 · 0 评论 -
vue-cli工作中常用的过滤器
在 .vue 组件中的使用示例：{{ string | trim(1) }} //去除所有空格，过滤器第一个参数为value常用的过滤器，filter/filter.js//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格function trim(value, trim) { switch (trim) { case 1: ...原创 2019-11-19 18:27:25 · 241 阅读 · 0 评论 -
vue-cli工作中如何自定义一个过滤器？
文件结构：.├── src│ ├── filter│ │ ├── filter.js│ │ │ └── main.js└── ...filter/filter.js：这个文件主要是写了过滤器实现的方法，然后export进行导出。function filterOne(n){ return n + 10;}function fil...原创 2019-11-19 18:00:41 · 900 阅读 · 0 评论 -
v-for 与 v-if 的优先级是怎样的，为什么v-for和v-if同一节点使用报错？
当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。这也是为什么v-for和v-if同一节点使用会报语法错误的原因。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：<ul><li v-for="todo in todos" v-if="!todo.isComplete"> {{ t...原创 2019-11-19 16:14:41 · 483 阅读 · 0 评论 -
vue事件中如何使用event对象？
注意在事件中要使用 $ 符号//html部分<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>//js部分showEvent(event){ //获取自定义data-id console.log(event.target.dataset.i...原创 2019-11-19 16:02:40 · 1641 阅读 · 0 评论 -
v-for产生的列表，实现active的切换
v-for产生的列表，如何实现active样式的切换？通过设置当前 currentIndex 实现：<template> <div class="toggleClassWrap"> <ul> <li @click="currentIndex = index" v-bind:class="{clicked: index === curre...原创 2019-11-19 15:59:00 · 1176 阅读 · 0 评论 -
关于Vue，那些你不容错过的前端必问面试题！！！
第一题：vuex的存储流程State（1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data。（2）state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。mutations：用于同步操作比如会员登录的信息，购物车里的商品等等。Actions：用于...原创 2019-10-28 10:55:15 · 1239 阅读 · 0 评论 -
使用Vue-cli 3.0搭建Vue项目，详解！！！
在开始创建vue-cli3.0之初遇到挺多问题，以下是我配置成功的正确操作步骤，供大家参考，希望有所帮助。1.1. 安装Node.js （建议使用LTS版本）npm install -g1.2. nrm安装及npm registry设置// use npmnpm i nrm -g// use yarnyarn global add nrm查看可用的npm源n...原创 2019-10-23 11:41:03 · 1220 阅读 · 0 评论