vue
Gordon-Liu
拼搏到无能为力,坚持到感动自己
展开
-
[VuetifyLoaderPlugin Error] No matching rule for vue-loader found
Vuetify 采坑原本正常启动服务,写代码,但后来关闭服务重启后,报错,如下:排查好久,上网也查了许多资料,最后自行解决:在使用vue add vuetify后vue.config.js会自动生成,并附加配置,但第二次启动服务会报错(不确定具体因为什么报错,但需要更改这里配置)const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')module.exports = { configureWebpack: functi原创 2021-12-19 21:24:37 · 904 阅读 · 0 评论 -
Vue3中postcss的安装及配置
安装postcss-pxtoremnpm install postcss-pxtorem -D在根目录下创建postcss.config.jsmodule.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的cl原创 2021-10-22 16:27:17 · 4284 阅读 · 1 评论 -
Vue性能方面优化
(1)代码层面的优化v-if 和 v-show 区分使用场景computed 和 watch 区分使用场景v-for 遍历必须为 item 添加 key,且避免同时使用 v-if(v-for优先级更高)长列表性能优化(Object.freeze())事件的销毁图片资源懒加载(vue-lazyload)路由懒加载第三方插件的按需引入(babel-plugin-component)优化无限列表性能(vue-virtual-scroller)服务端渲染原创 2021-08-15 23:44:56 · 304 阅读 · 1 评论 -
Vue 的父组件和子组件生命周期钩子函数执行顺序?
加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated父组件更新过程父 beforeUpdate ->..原创 2021-08-15 21:50:13 · 252 阅读 · 0 评论 -
Vue组件通信的几种方法
(1)props / $emit 适用 父子组件通信这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。(2)ref 与 $parent / $children 适用 父子组件通信ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例$parent / $children:访问父 / 子实例(3)EventBus ($emit / $on) 适用于 父子、隔代、兄弟组件通信这种方法通过一个空的 Vue 实例作原创 2021-08-15 21:47:09 · 77 阅读 · 0 评论 -
vue项目中loading全局配置,(超方便)两种方法
第一种方法简单操作1、首先写一个公共组件,然后再建立一个js文件将其引入并使用js文件import topbar from '../components/navigation'export default (Vue) => { Vue.component('topbar', topbar)}2、最后在入口main.js引入这个js文件并使用import globalVue from './globalVue.js'Vue.use(globalVue)3、然后vue组件中直接原创 2021-08-10 14:58:01 · 8553 阅读 · 0 评论 -
vue中向html插入节点标签(简单易懂)
正常vue中插入节点会报这个错:原因:插入的不是节点,而是一个字符串,需要将这个字符串变为对象才能插入到HTML中简单几步:1、创建新节点2、将新节点替换要插入的标签(innerHTML方法)3、将节点插入到页面指定的标签中(appendChild()方法)<template> <div class="home"> <h1 ref="home">首页(发现音乐) <h2>有数据</h2> </h1原创 2021-08-07 17:53:11 · 9725 阅读 · 1 评论 -
单级菜单需要多页面时的配置
方便传参跳转路径路由设置{ path: '/subjectAdmin', name: 'index', java: true, component: 'markingCenter/subjectAdmin/index', meta: { title: '科目管理' } }index.vue文件设置<template> <transition> <keep-alive> &原创 2021-06-07 15:05:28 · 115 阅读 · 0 评论 -
对外暴露.vue文件共用
js文件里import topbar from'../components/title';import overlayLoad from'../components/overlayLoad';import { Icon } from "vant";export default (Vue) => { Vue.component('topbar', topbar); Vue.component('overlayLoad',overlayLoad); Vue.use(Icon);}.原创 2021-05-24 16:34:58 · 142 阅读 · 0 评论 -
vue文件中index.vue的使用方法
<template> <div> <keep-alive> //组件缓存 <home-page v-if="pageName === 'homePage'"></home-page> </keep-alive> <add-page v-if="pageName === 'addPage'"></add-page> <info-page v-if="pa原创 2021-05-17 13:51:38 · 8156 阅读 · 0 评论 -
vue预览pdf带全文缩略图
https://github.com/FranckFreiburger/vue-pdf#createloadingtasksrc原创 2021-04-13 09:35:25 · 2196 阅读 · 0 评论 -
千分位数字
// 千分位数字Vue.prototype.$num_filter = (val) => { //有数值或为0的时候进行操作 if(val || val == 0) { //为字符串的话转为数字 if(typeof(val) == 'string') { val = parseFloat(val) //为数字就不用转换 } else { val = val } // 先保留两位小数后再格式化为浮点型数字 v原创 2021-04-12 10:46:43 · 298 阅读 · 0 评论 -
VUE中搜索栏输入字符,实时更新输出的数据
VUE中搜索栏输入字符,实时更新输出的数据<template> <div> <!-- 引入了vant搜索插件 --> <form action="/"> <van-search v-model="value" show-action placeholder="请输入搜索关键词" /> </form>原创 2020-10-24 15:24:32 · 1048 阅读 · 0 评论 -
下拉列表加载组件数据(利用vant的UI框架)
上面标签部分下面数据部分代码详情<template> <div class="nowplaying"> <!-- 直接引入vant插件内的代码 --> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <F原创 2020-10-24 11:28:44 · 739 阅读 · 0 评论 -
点击详情页切换到不同的详情页面
先创建一个一级路由的目录在路由内进行配置详情页的一级路由传输动态id点击电影跳转详情页详情页内接受动态id后进行数据请求原创 2020-10-24 09:57:05 · 813 阅读 · 0 评论 -
keep-alive缓存的数据无法在页面刷新问题,Vue中浏览器全局刷新
问题:vuex数据更新了但页面的数据没有更新,页面的组件是用keep-alive包裹进行缓存的,如何解决组件更新问题简述解决方案:在一级路由下有四个二级路由利用keep-alive将四个组件包裹,进行缓存在城市组件中,添加点击城市的事件点击后判断是否更改了城市,如果更改了就修改vuex的数据,跳转页面,指定浏览器刷新若没有更新就直接跳回页面一级路由中的keep-alivecity组件vuex里面的数据设置浏览器页面:这篇博客完善了之前的城市渲染,解决了keep-alive的bu原创 2020-10-23 21:16:01 · 921 阅读 · 0 评论 -
城市选择数据渲染
要求:点击右边索引栏时,会自动跳转到对应的索引位置大体解决方案:利用vantUI框架引入indexBar索引栏利用axios拿到后台城市数据,定义两个数据,一个为右边索引栏的字母数组(大写),一个为索引和城市的对象数组先将右侧索引栏字母定义出来,遍历数据的拼音,取出首字母,排序,转大写再定义第二个数组,做一个双for循环,先循环索引的字母,将字母以对象的形式插入到空数组中,再循环数据中拼音的首字母大写,若找出数据中的首字母大写与索引的字母一样的话就进行插入,以对象的形式插入到刚刚的数组中,最后用原创 2020-10-22 16:54:17 · 576 阅读 · 0 评论 -
Vue脚手架的安装及项目的创建
Vue脚手架创建项目1.安装node.js1)在node.js官网正常下载安装node.js下载地址:node.js中文官网 http://nodejs.cn/download/2)安装成功后打开命令行工具查看node版本①打开"运行"对话框(Win+R),输入cmd,打开命令行工具②输入命令行 node -v ,出现版本号说明安装成功2.安装cnpm在用 vue.js 构建大型应用时推荐使用 npm 安装,npm 能很好地和诸如 webpack 或 browserify 模块打包器原创 2020-10-14 20:26:40 · 269 阅读 · 0 评论 -
Vue中Router的使用方法以及各个步骤配置
router文件夹内的index.js是主文件夹,必须建一个index.js下载安装Router组件npm install vue-router 或cnpm install vue-router -S 或yarn add vue-router配置路由:1、引入vue和vue-routerimport Vue from 'vue'import Router from 'vue-router'2、安装使用routerVue.use(Router);3、实例化路由(必须是routes)原创 2020-10-01 21:42:54 · 1054 阅读 · 0 评论 -
什么是API、computed和watch的区别及各个原理
什么是API(通俗易懂)官方回答:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。简单通俗点来说:举个例子:打开一个文件,将文件保存在硬盘上,要经过非常复杂的处理才能显示,这看似简单的操作其实在底层是非常复杂的打开文件首先要扫面硬盘,找到文件的位置,然后从文件中读取一部分的数据,将数据放进I/O缓冲区,放进内存,这些数据原创 2020-09-29 22:18:58 · 974 阅读 · 0 评论 -
SSR(服务端与客户端渲染)、NUXT.js(介绍安装、配置、路由、视图、异步数据与反向代理解决跨域、vuex状态树)(九)
nuxt一. SSR什么是服务端渲染? 核心在于方便seo优化后端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完整的html页面,再直接返回给浏览器,以便用户浏览。 例如:http://www.cnblogs.com/cate/design什么是客户端渲染? 分担到客户端数据由浏览器通过ajax动态获得,再通过js将数据填充到dom元素上最终展示到网页中,这样的过程就叫做客户端渲染。 例如:https://m.maizuo.com/v5/#/films/nowPlaying服务端原创 2020-09-29 15:06:55 · 801 阅读 · 0 评论 -
vuex作用、vuex执行流程、核心属性、使用vuex流程、项目结构、辅助函数、数据持久化(八)
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:问题一:传参、组件通信的方法对于多层嵌套的组件来说非常繁琐,而且对于兄弟组件间的状态传递也无能为力问题二:我原创 2020-09-23 09:04:55 · 539 阅读 · 0 评论 -
router-view、声明式(router-link)和编程式导航、代码提示片段、路由懒加载、多极路由、命名路由、动态路由匹配(:id)、路由模式、路由守卫、$route和$router区别(七)
vue-router在的应用都流行SPA应用(single page application)传统的项目大多数用的是多页结构,当进行页面跳转的时候,会受到网络和性能的影响,用户体验不好而单页面应用(SPA)就是用户通过操作地址栏来切换对应的组件(卸载和安装),无刷新切换,用户体验良好,Vue会使用官方提供的vue-router插件来使用单页面安装插件:yarn add vue-router or cnpm install vue-router -S简单路由的实现//引用路由import原创 2020-09-16 10:33:17 · 800 阅读 · 0 评论 -
vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题(六)
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方提供的,基于webpack的脚手架工具进行项目开发。注意: 要求node.js版本是8+安装方法全局安装vue-cli: cnpm install -g @vue/cli oryarn global add @vue/cli检测安装:vue -V脚手架创建项目vue create 项原创 2020-09-14 22:53:56 · 689 阅读 · 0 评论 -
插槽、组件通信、transition过渡、声明周期(四)
slot插槽vue提供了一种将父组件的内容和子组件模板整合的方法,内容分发如果想在组件内部添加内容的话,就在组件模板内部对应的位置添加slot标签,而且添加上name属性,指明与外部的标签相通,如果不写name属性的话,将外面所有未命名的标签添加到该位置上<div id="app"> <father> <p slot="zha">我叫渣渣辉</p> </father> <hr> &l原创 2020-09-11 21:43:21 · 263 阅读 · 0 评论 -
组件:vue-mixins、fetch、if-else-show、is-:is、filter、虚拟dom、prop验证(三)
vue基础:组件vue-mixins在vue里可以使用mixins来做代码的抽离复用(声明一个对象,包含vue实例里面的一些属性),便于维护若某个实例要用的话,就直接通过mixins导入(数组的方式),并且不会覆盖原来的数据,而是合并在一起*let* commen = { methods:{ a(){ console.log(111) } } } new Vue({ el:"#app", mixins:[c原创 2020-09-10 22:55:28 · 177 阅读 · 0 评论 -
v-for遍历、v-model、v-on简单易理解,vue的遍历循环(二)
Vue模板语法声明式渲染:先在HTML中声明一条数据message,用vue特殊的模块语法(mustachar)将其渲染进dom中在浏览器可以通过vm.vue = “你好”,改变浏览器中该条数据的内容,内部的MVVM模式js中声明的变量不能一样,浏览器调试器中写法:js声明的变量名.HTML声明的数据 = “改的数据”<div id = "app"> {{message}} </div>var vma = new Vue({ el:"#ap原创 2020-09-07 22:47:52 · 947 阅读 · 0 评论 -
Vue特点、使用和实例;MVVM;双向绑定原理(一)
Vue基础渐进式vue是渐进式JavaScript框架 用到什么功能,只需要引入什么功能模块如果只是简单的将数据与视图进行关联渲染,只需要引入vue即可实现声明式渲染如果后续多个地方用到轮播图效果,那么我们可以借助vue的组件化思想进行封装如果要做前端SPA单页路由,需要引入第三方插件vue-router实现路由功能如果涉及多组件之间的状态管理维护,需要引入第三方插件vuex实现状态管控如果项目最终上线、团队开发等需要引入webpack等构建工具进行项目打包、构建、迭代操作主张弱原创 2020-09-07 22:19:25 · 323 阅读 · 0 评论 -
keep-alive包裹动态组件、v-focus、自定义指令钩子函数(参数、案例)(五)
vue知识点1、vue中的数据发生改变了,vm却知道数据发生改变了? (vue中的双向数据绑定的原理是什么?)vue创建vm的时候,会将数据配置到实例中,然后内部通过Object.defineProperty方法,对数据绑定了get与set。当获取数据的时候,会触发对应的get方法,当设置数据的时候,会触发对应的set方法,一旦set方法触发完毕了,内部会进一步触发watcher,从而数据改变了,视图会重新渲染。2、Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统原创 2020-09-08 17:55:47 · 621 阅读 · 0 评论