![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue相关
wflynn
研究代码中...将随缘更新
展开
-
vscode识别defineProps报错Default export of the module has or is using private name ‘Props‘
vscode识别defineProps报错原创 2022-07-24 11:15:22 · 1093 阅读 · 0 评论 -
vue inspect查看项目的webpack配置
开发环境:npx vue-cli-service inspect --mode development >> webpack.config.development.js生产环境:npx vue-cli-service inspect --mode production >> webpack.config.production.js在产生的 js 文件开头,添加:module.exports =,然后格式化即可查看。...原创 2021-03-26 14:26:09 · 1223 阅读 · 1 评论 -
Uncaught Error: Redirected when going from “/*“ to “/*“
Uncaught Error: Redirected when going from “/" to "/”this.$router.push({path: this.redirect || ‘/’,query: this.otherQuery}).catch(()=>{})原创 2020-12-19 14:31:45 · 1236 阅读 · 1 评论 -
vue及原生html实现列表无缝上下滚动,以及单行滚动
vue版本npm i vue-seamless-scroll -S<template> <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp "> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="it.原创 2020-05-12 13:19:06 · 1905 阅读 · 0 评论 -
vue监听用户离开页面并根据离开次数设置判断-可用于微信浏览器
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git动画效果的处理遇到的一个问题,当用户离开页面再回来时我会更换一张图片,同时给图片加上晃动的动画效果但是如何animation直接写死,只会触发一次,当用户离开页面再回来时动画效果并不会再次触发。此时只需要把相同的动画css复制一份,改一下动画名称,然后在页面离开事件中处理即可。下面为代码示例<div v-if="!modalStatus" style="position:原创 2020-05-13 13:31:55 · 1287 阅读 · 0 评论 -
vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本
set-ExecutionPolicy RemoteSigned 选择Y原创 2020-08-05 13:58:28 · 582 阅读 · 0 评论 -
easycom模式使vue组件无需引入即可使用
easycomHBuilderX 2.5.5起支持easycom组件模式。传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:<template> <vi...原创 2020-04-19 11:51:51 · 21610 阅读 · 0 评论 -
vue头像组件封装
<template> <view> <view class="cu-avatar margin-left" :class="[false ? 'radius' : 'round', ['sm', 'lg', 'xl', ''][3], ]" style="background-image:url(http...原创 2020-04-23 11:11:31 · 531 阅读 · 0 评论 -
vue3 配置生成环境打包不输出日志
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git在vue.config.js配置文件中添加configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 生产环境不输出日志 confi...原创 2020-04-25 16:11:18 · 2207 阅读 · 0 评论 -
vue消息提示组件封装
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git使用示例<template> <view class="bg-white padding"> <!--顶部消息--> <messTip ref="toast" v-if="index==0...原创 2020-04-26 09:34:07 · 1445 阅读 · 0 评论 -
vue二维码生成可自定义logo
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git<template xlang="wxml"> <view class="container"> <!-- pdground="rgba(123, 191, 234, 1) qrR(res) { this.src = res }-->...原创 2020-04-26 09:57:42 · 657 阅读 · 0 评论 -
vue监听页面离开事件
vue监听页面离开事件可加入变量判断,根据离开次数加入不同的事件var app = new Vue({ el: '#app', data() { }, mounted() { document.addEventListener('visibilitychange', this...原创 2020-04-27 11:11:21 · 10274 阅读 · 0 评论 -
vue之图片上传组件封装
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git使用方法<template> <view class="bg-white"> <upLoadImgSingle ref="uploadImg"></upLoadImgSingle> <button @tap="s...原创 2020-04-21 19:22:38 · 1231 阅读 · 0 评论 -
vue-cli3项目出现跨域的解决方法
使用vue-cli3搭建脚手架时,没有以前的webpack配置文件,一些配置列如跨域,alias无法配置,这时候在项目目录下新建一个vue.config.js即可。具体配置如下解决跨域配置devServer: { proxy: { '/api': { // target: "http://10.19.1...原创 2020-03-27 09:10:25 · 1089 阅读 · 0 评论 -
vue封装时间类函数方法大全
root.jsexport default { // 数字不满10补0 addZero (str) { let num str >= 10 ? num = str : num = `0${str}` return num }}import root from './root'const DAY_...原创 2020-04-07 23:04:00 · 1441 阅读 · 0 评论 -
关于vue打包性能优化(后续更新)
不断更新优化原创 2021-02-08 10:10:12 · 611 阅读 · 0 评论 -
vue自定义指令详解
注册一个全局自定义指令Vue.directive('upper-text', { bind: function (el, binding) { el.textContent = binding.value.toUpperCase() }})注册一个局部指令directives: { 'lower-text': { bind:...原创 2019-11-17 12:29:56 · 522 阅读 · 0 评论 -
vue子组件调用父组件的三种方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件代码<template> <div> <songCompoent></songCompoent> </div></template><script> const son...原创 2019-11-16 09:45:06 · 5416 阅读 · 0 评论 -
v-for 与 v-if 优先级
v-for的优先级比v-if更高这意味着v-if将分别重复运行于每个v-for循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,如下:<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>上面的代码将只渲染未完成的 todo。而如果你的目的是有条...原创 2019-11-15 17:24:08 · 947 阅读 · 1 评论 -
vue核心之虚拟DOM(vdom)
vdom是什么virtual dom , 虚拟 DOM 用 js 模拟DOM结构为什么需要虚拟DOM,它有什么好处?虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用...原创 2019-11-15 09:31:47 · 233 阅读 · 0 评论 -
vue之v-on监听多个方法,绑定多函数
代码如下<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来</button><button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来</button><!-- 一个事件绑定多个函数,按顺序执行,这里分隔...原创 2019-11-14 16:17:17 · 4488 阅读 · 0 评论 -
vue按键修饰符、按键码、系统修饰键、exact 修饰符、鼠标按钮修饰符
按键修饰符、按键码Vue 允许为v-on在监听键盘事件时添加按键修饰符:<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --><input v-on:keyup.enter="submit">keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。 <input v-on:keyup.13=...原创 2019-11-14 15:54:47 · 2047 阅读 · 0 评论 -
vue事件修饰符详解
事件修饰符Vue.js 为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。 .stop stop 等同于JavaScript中的event.stopPropagation(),防止事件冒泡 阻止单击事件继续传 <div @click="log('我是外层div')" style="width: 100px;height: 100px;backgro...原创 2019-11-13 11:06:36 · 391 阅读 · 0 评论 -
Vue.js 是什么?
Vue是什么Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue的两个核心思想Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是...原创 2019-11-13 10:24:26 · 277 阅读 · 0 评论 -
vue-cli常用npm命令大全
下载 node_modules 资源包的命令:npm install 安装 package.json 中 dependencies 字段和 devDependencies 字段中的所有模块npm install --production 只安装 dependencies 字段的模块。启动 vue-cli 开发环境的 npm命令:npm run dev 或 npm start...原创 2019-11-13 09:48:31 · 1068 阅读 · 0 评论 -
构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?
1、vue.js:vue-cli工程的核心,主要特点是双向数据绑定和组件系统。2、vue-router:vue官方推荐使用的路由框架。3、vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些 变量 和 方法。4、axios( 或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。5、we...原创 2019-11-13 09:38:31 · 1653 阅读 · 0 评论 -
vue-cli详解
什么是vue-clivue-cli是vue的脚手架安装:npm install -g vue-clivue-cli搭建vue项目使用vue-cli创建vue项目:常用 vue init webpack my-project用法: vue init <template-name> <project-name>template-name: ...原创 2019-11-13 09:24:35 · 126 阅读 · 0 评论 -
vue之computed和watch的区别
计算属性computed :支持缓存,只有依赖数据(vm中data的属性)发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用...原创 2019-10-30 16:08:46 · 108 阅读 · 0 评论 -
vue-router的router-link详解
<router-link><router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址,默认渲染成带有正确链接的<a>标签,可以通过配置tag属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。<router-link>比起写死的<a...原创 2019-10-30 15:40:23 · 1448 阅读 · 0 评论 -
vue动态路由匹配
什么是动态路由匹配我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果示例:这是公共的组件 (DynamicRouteDemo.vue)<template> <div>...原创 2019-10-30 14:58:17 · 209 阅读 · 0 评论 -
vue-router的实例方法详解
三个全局导航守卫router.beforeEach router.beforeResolve router.afterEach编程式路由导航router.push router.replace router.go router.back router.forward原创 2019-10-30 13:38:11 · 542 阅读 · 0 评论 -
vue-router编程式的导航
什么是编程式的导航除了使用<router-link>创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location, onComplete?, onAbort?)注意:在 Vue 实例内部,你可以通过$router访问路由实例。因此你可以调用this.$router.push。想要导航到不同...原创 2019-10-30 12:52:29 · 237 阅读 · 0 评论 -
vue-router如何响应路由参数的变化
什么是路由参数的变化当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。监测路由参数变化的方法方法一watch监听:watch: { // watch的第一种写法 $route (to, from) { ...原创 2019-10-30 10:17:16 · 3990 阅读 · 0 评论 -
vue-router完整的导航解析流程以及导航守卫详解
什么是导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。通俗点讲就是一个拦截器。导航守卫分类全局守卫beforeEach、beforeResolve、afterEach(在路由实例对象注册使用)路由守卫beforeEnter(在路由配置项中项定义)组件守卫beforeRouteEnter、beforeRouteUpdate、befor...原创 2019-10-29 17:17:52 · 3058 阅读 · 0 评论 -
vue之watch详解
什么是watch?一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性。类型:{ [key: string]: string | Function | Object | Array }测试公共代码如下:<template> <div&g...原创 2019-10-29 14:22:49 · 194 阅读 · 0 评论 -
Vue-router 中hash模式和history模式的不同
在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:"hash";// 默认mode:"history";前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了以下两种支持:hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列...原创 2019-10-28 17:32:33 · 291 阅读 · 0 评论 -
vue路由懒加载及组件懒加载
为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。使用方法常用的懒加载方式有两种:即使用vue异步组件和ES中的import未用懒加载,vue中路由代码如下import Vue from 'vue'import Router from 'vue-route...原创 2019-10-28 16:05:44 · 229 阅读 · 0 评论 -
vue子组件传值到父组件$emit
功能:子组件为一个switch开关,通过switch的开关来控制父组件div的背景颜色以下为示例代码:子组件代码:<template> <div> <!--用到的是iview的switch开关--> <i-switch @on-change="setCard" v-model="menuCards"...原创 2019-10-23 17:58:46 · 571 阅读 · 0 评论 -
vue之父子组件传值props
props 类型:Array<string> | Object 详细: props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。 你可以基于对象的语法使用以下选项: type: 可以是下列原生构造函数中的一种:String、Number、Boolea...原创 2019-10-23 15:28:37 · 553 阅读 · 0 评论 -
vue之引入公共css样式方法
在main.js引入 import '../static/assets/css/reset.css' // 重置样式import '../static/assets/css/common.css' // 公共样式 在App.vue中引入 @import '../static/assets/css/reset.css'; /*重置样式*/@import '../st...原创 2019-10-23 11:23:05 · 2470 阅读 · 2 评论