VUE
swx980
这个作者很懒,什么都没留下…
展开
-
按需引入vant报错Object(...) is not a function
先检查单词大小有没有写错,如果各方面都没有错误的话,检查一下vant版本,如果是3,修改版本为2的就可以了报错信息:解决办法,看vant版本:原创 2021-01-28 14:50:16 · 1724 阅读 · 0 评论 -
babel-plugin-import 实现自动按需引入
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。1、下载npm i babel-plugin-import -D2、(1)在.babelrc 中添加配置 注意:webpack 1 无需设置 libraryDirectory{ "plugins": [ ["import", { "libraryN原创 2021-01-26 10:20:45 · 10338 阅读 · 1 评论 -
vue3 动态加载 title
1、下载npm install --save vue-wechat-title2、main.js 引入import VueWechatTitle from 'vue-wechat-title';Vue.use(VueWechatTitle)3、router.js 中{ path: '/', name: 'home', component: () => import('./pages/home.vue'), meta: { title: '首页原创 2021-01-25 17:22:21 · 364 阅读 · 0 评论 -
eruda 一个可以在手机浏览器上直接定位问题的插件
在index.html中引用如下js:<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0">原创 2021-01-22 13:41:33 · 173 阅读 · 1 评论 -
vue中使用js-cookie
下载:npm install js-cookie --save引入import Cookies from 'js-cookie'存储数据// 在整个项目有效Cookies.set('name', 'value');// 创建一个7天后过期的cookie,在整个项目上有效:Cookies.set('name', 'value', { expires: 7 });// 创建过期cookie,对当前页的路径有效:Cookies.set('name', 'value', { expire原创 2021-01-18 16:49:52 · 130 阅读 · 0 评论 -
vue中$nextTick()
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染。mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。实例:html:<div class="app"> <div ref="msgDiv">{{msg}}</di原创 2021-01-14 17:05:37 · 65 阅读 · 0 评论 -
vue关闭运行时的代码捡测
打开 vue.config.jsmodule.exports = { lintOnSave: false, devServer: { port: 8888, open: true, overlay: { warning: false, errors: false } }}原创 2021-01-05 15:29:01 · 135 阅读 · 0 评论 -
vue中自定义组件,.install的使用
vue中.install方法的使用如同vue.use(),具体如下:1、新建一个ceshi.vue文件<template> <div> 我是组件 </div></template><script> export default { }</script> <style scoped> div{ width:20px; h原创 2021-01-04 11:13:08 · 2353 阅读 · 2 评论 -
vue中.gitignore文件的作用
.gitignore 可以避免在提交代码时把我们不想上传的文件提交到git中# Maven #target/ # 此处可屏蔽target文件夹下的所有文件(包括文件夹)# IDEA #.idea/ # 此处可屏蔽.idea文件夹下的所有文件(包括文件夹)*.iml # 可屏蔽当前目录下所有以.iml结尾的文件/src/main/java/***/demo.java # 屏蔽指定目录下的单个文件...原创 2021-01-04 09:32:35 · 2049 阅读 · 0 评论 -
如何搭建vue3.0脚手架
一 创建vue3.0脚手架1、如果已经安装过vue2.0,要先卸载vue2.0,没有安装过的话可以忽略这一步(也可以不卸载vue2.0,这样就可以创建不同版本的项目啦!)npm uninstall vue-cli -g2、安装vue3.0,注意:Node 版本升级至 8.9 及以上npm install -g @vue/cli3、vue3.0创建项目命令vue create my-project4、vue3.0运行命令npm run serve5、关闭vue3.0自带eslint原创 2021-01-03 22:08:31 · 543 阅读 · 0 评论 -
keep-alive
作用:避免多次重复渲染降低性能,组件可以缓存下来,维持当前的状态app.vue<div id="app" class='wrapper'> <keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要缓存原创 2020-12-31 12:34:21 · 156 阅读 · 0 评论 -
scroll-behavior属性:滚动框指定滚动行为及锚点
1、scroll-behavior属性:auto(滚动条立即滚动) / smooth(窗口平稳滚动) / inherit / initial / unset2、锚点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点平滑跳转</title> <style> *{原创 2020-12-31 11:27:34 · 1024 阅读 · 0 评论 -
vue项目中使用jQuery,并实现页面到达指定位置时实现animate动画
一、vue中使用jquery1、首先下载npm install jquery -s2、在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。var webpack = require('webpack')3、最后在build目录下的webpack.base.conf.js文件里找到module.exports,添加以下代码plugins: [ new webpack.ProvidePlugin(原创 2020-11-24 15:49:41 · 974 阅读 · 0 评论 -
一个页面使用多次swiper,相互冲突的问题,或接接口不循环的问题
首先,可以用不同的 id 或 class 来区分他们,并设置样式<template><div><!-- 第一个轮播 --> <div class="swiper-container" id="container1"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide1"> <i原创 2020-11-23 16:57:29 · 680 阅读 · 0 评论 -
vue行间截取字符串
<p>{{item.newsAddTime.slice(11,16)}}</p>// 两个参数str = str.slice(2,4);//截取第二个到第四个之间的字符str = str.substring(2,4);//截取第二个到第四个之间的字符str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符// 一个参数str = str.slice(2);//截取第二个之后所有的字符str = str.substring(2);//截取第二原创 2020-11-20 17:41:35 · 951 阅读 · 0 评论 -
vue 使用 swiper 实现轮播的那些事
首先运行 npm下载npm install swiper --save-dev在需要用到的页面中<template> <div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="lun原创 2020-11-20 10:48:45 · 250 阅读 · 0 评论 -
vue实现根据页面动态改变title
老板,来一盘代码效果:index.js 中import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode:"history", routes: [ { path: '/', name: 'one', component: ()=>import("@/components/one"),原创 2020-11-19 11:05:51 · 580 阅读 · 0 评论 -
vue隐藏路由的方法
先来看下效果,他在首页的时候是不显示路由的,点击跳转到其他页面了才会显示打开 index.js,加上 mode : " history "import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode:"history", routes: [ { path: '/', name: '/home', com原创 2020-11-19 10:17:20 · 8479 阅读 · 0 评论 -
vue中移动端引入适配插件,pc端页面变大的问题
解决办法移动端适配插件是把px单位转化为了rem,写PC端页面用px时,把px大写成PX,就不会受影响喽原创 2020-11-18 18:19:27 · 429 阅读 · 0 评论 -
vue中一个项目里兼容移动端和pc端
话不多说,上代码先来看一下我的文件路由文件 index.js:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ mode:"history", routes: [ // pc端 { path: '/', name: '/pc/home', component: ()=>import("@原创 2020-11-18 18:14:40 · 5238 阅读 · 6 评论 -
vue做移动端打包上传服务器后图片报404
先展示下错误因为这个错误,我在手机端上查看的时候,页面是崩溃状态解决方法找到config下面的index.js里面的build对象下的assetsPublicPath: ‘/’,这个“ / ”前面不要加点,如下图:原创 2020-11-18 18:01:26 · 299 阅读 · 0 评论 -
vue做移动端的打电话功能
一行代码搞定它<a href="tel:400-123-456">点击咨询</a>原创 2020-11-18 17:51:02 · 405 阅读 · 0 评论 -
vue移动端适配
1、安装插件npm i lib-flexible --save // 载lib-flexiblenpm install px2rem-loader // 安装px2rem-loader2、在main.js中引入import 'lib-flexible/flexible'3、在index.html中引入<meta name="viewport" content="width=device-width, user-scalable=no, initial-sca原创 2020-11-13 10:41:00 · 62 阅读 · 0 评论 -
vue报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
原因:新版的webpack-dev-server 3.1.14 存在问题。解决方法:package.json 中指定 webpack-dev-server 低版本号(1)npm uninstall webpack-dev-server(2)npm install webpack-dev-server@2.9.1(3)npm run dev如果还不行,就删掉node_modules,然后再 npm i 一下,最后npm run dev...原创 2020-10-09 17:29:32 · 1227 阅读 · 0 评论 -
vue点击按钮回到顶部事件
<template> <div id="app"> <router-view /> <img src="../src/images/imgs/footer/up.png" alt="" id="return_top" style="display: block" /> </div></template><script>export def原创 2020-10-08 17:30:00 · 674 阅读 · 0 评论 -
vue转时间戳
// 时间戳转日期add0 (m) {return m < 10 ? '0' + m:m},getDate (item) {var time = new Date(item) var year = time.getFullYear()var month = time.getMonth() + 1var date = time.getDate()let h = time.getHours()let m = time.getMinutes() let s = time.g原创 2020-10-08 10:06:16 · 131 阅读 · 0 评论 -
VUE使用axios
1,npm一下npm install vue-axios --savenpm install qs.js --save //这一步可以先忽略,它的作用是能把json格式的直接转成data所需的格式2.main.js中import Vue from 'vue'import axios from 'axios'Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axiosVue.prototype.qs = qs //全局注原创 2020-10-07 15:48:31 · 103 阅读 · 1 评论 -
vue导航点击事件
话不多说,上代码:<template> <div> <ul> <li v-for="(item,i) in nav" :class="active===i?'yellow':'white'" :key="i" @click="$router.push({path:item.path}),active=i">{{item.name}}<div :class="active===i?'line':'line1'"></原创 2020-09-19 13:17:42 · 577 阅读 · 0 评论 -
写hover遇到的坑
1.在hover前使用了中文冒号错误的,中文的:.head:hover{ background:black}正确的,英文的:.head:hover{ background:black}2.在hover前加空格错误的,带空格:.head :hover{ background:black}正确的,无空格:.head:hover{ background:black}3.子代元素使用hover方法html:<ul> <li cla原创 2020-09-19 11:54:13 · 159 阅读 · 0 评论 -
vue常见面试题汇总
1.v-if 和 v-for一起使用的弊端以及解决办法由于v-for的优先级比v-if高,所以导致每循环一次就会去v-if一次,而v-if是通过创建和销毁dom元素来控制dom元素的显隐,所以就会不停地去创建和销毁元素,造成页面卡顿,性能下降。解决办法:在v-for的外层或内层包裹一个元素来使用v-if。2.beforeDestroy 里面一般进行什么操作beforeDestroyed 是组件销毁前执行的一个生命周期,在这个生命周期里,我们可以进行回调函数或定时器的清除,不用的 dom 元素的清除等原创 2020-08-24 17:32:57 · 154 阅读 · 0 评论 -
vue 组件间的传值方式
1.兄弟间传值(1)小项目通过eventBuseventBus.js:// 定义一个新的vue实例专门用于传递数据,并导出import Vue from 'vue'export default new Vue()兄弟A:定义传递的方法名和传输内容,点击事件或钩子函数触发$emit事件<template> <div class="A"> <h2>我是A</h2> <p @click="toBClick">点击向兄弟原创 2020-08-24 17:04:48 · 156 阅读 · 0 评论 -
VUE的几种路由钩子
全局钩子在main.js中写入:beforeEach((to,from,next)=>{ }):全局前置守卫Router.beforeEach((to,from,next)=>{ ......})afterEach((to,from)=>{ }):全局后置钩子Router.afterEach((to,from)=>{ ......})某个路由独享钩子在路由配置中定义的钩子beforeEnter{ path:"/home",原创 2020-08-03 17:06:20 · 789 阅读 · 0 评论 -
vue如何使用腾讯地图申请key值,实现定位,点击可查看提示信息
如何申请腾讯key要使用腾讯地图,首先要有个key1.首先通过这个链接(官网:https://lbs.qq.com/javascript_v2)进去后,完成注册。2.完成注册后,按下图操作即可:3.进入如下页面,把信息填写完整,点击提交就可以了哦使用腾讯地图实现位置的显示,点击可查看信息1.效果图:2.首先在vue项目中引入在线的腾讯地图在index.html中:<!DOCTYPE html><html> <head> <me原创 2020-08-03 14:38:28 · 1913 阅读 · 0 评论