飞翔༒之翼

可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。同理，执行删除操作时，对象或数组不更新时，可以使用this.$delete。方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。

解析：Vue先判断新创建的路由是否有name属性，当有name属性的时候，如果新的name不在nameMap里面，那就把新的name添加到record里面并且赋值nameMap为更新后的record。否则，且在非生产环境下，就会报warning，这时候就会看见我们开头时候的那个警告。找到报warning的位置了，看了一下，这里的意思就是：如果不是生产环境下，那我就给你报这个warning。言外之意就是，与之前命名过该路由名称的路由发生了冲突，所以Vue发出警告。翻译过来就是：定义重复命名的路由。

就可以改变body里的样式。

【代码】Vue中一次性遍历同一个点击事件且操作互不影响。

就可以解决传递中文参数，在IE浏览器没有反应的问题了。

在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式。

【代码】vue 中 给img图片添加动态路径 路径正确但是图片不显示问题。

【代码】vue 悬浮可拖拽组件--可在屏幕上进行拖拽。

加载时 在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空 所以就在父元素 加上。初次加载闪烁 然后在父元素添加了v-cloak。

在form上添加@submit.native.prevent发现容易出现不可预测问题。

主要思想就是在第一级下拉框发生单击事件的时候，我们拿到第一级下拉框的id值(这里你不一定是id值)，然后遍历包含所有数据的一级分类集合，找到和当前单击事件选中的一级分类id值相等的那个对象，然后把它的children属性(我的children在后端是个二级分类的集合)赋值给data属性里面的二级分类数组对象subjectTwoList即可。我这里是后端一次性把所有数据都取到了，我在前端遍历解决的。

实现方法：用vue动态绑定class的方法，实现用不同的class渲染箭头，达到点击箭头

this.$refs在vue中ref可以以属性的形式添加给标签或者组件ref 写在标签上时： 获取的是添加了标签对应的元素ref 写在组件上时： 获取到的是添加了属性的这个组件

一 数字转金额格式显示以vue组件为例：export function toPsyt(num) { if(num) { if(isNaN(num)){ return "金额异常"}num = typeof num === 'string' ? parseFloat(num) : num // 判断是否是字符串如果是字符串转成数字num = num.toFixed(2) // 保留两位num = num.toLocaleString() // 转成金额显示模式// 解决数字小于1时

vue-cli3相比于2取消了build和config文件夹，需要自己创建.env文件区分不同的环境官方文档地址：https://cli.vuejs.org/zh/guide/mode-and-env.html1、在根目录下创建一个.env.development 是开发环境VUE_APP_URL = 'https://www.easy-mock.com/mock/5d6cbe39fb84500aa8f810fe/vuetest'VUE_APP_xxx = '可以自己定义你需要的变量，但是要以VUE

用vue-cli2构建完项目后，只有一个开发环境dev和生产环境prod，现在我们要加一个测试环境 test；1、首先在package.json增加一个test启动项，可以使用npm run test打包测试代码复制build代码，做如下更改2、接下来要建一个build_test.js，在build文件夹复制一份build.js更名为build_test.js，做如下修改:3.上方代码需要引入webpack.test.conf，那么在build文件夹下复制一份webpack.prod.conf.

在vue2.0中，原来的v-link指令已经被<router-link>组件替代了组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1、to（必选参数）：类型string/

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } }})直接写一个监听处理函数，当每次监听到

1.这个是后台返回的接口流（上图）vue代码<template><div><img :src="params"></div></template><script>import axios from 'axios'const server = axios.create({tiomout: 5000,})server.interceptors.request.use( config => { ret.

vue与elementUI实现基于vue-router的路由面包屑导航条功能1.需求描述：vue项目，在项目结构上通过与elementUI实现基于vue-router的路由面包屑导航条功能，这个功能的核心是vue-router，所以在前期路由文件的父子级代码一定要清晰，下面写一个demo，大家可以在此基础上根据实际情况自行拓展。要实现如下的效果：2.解决方案：第一步：是路由文件的配置（以下是测试数据），我这边的路由文件格式及相关代码如下：routes: [ { path

在网上找了很多的这个配置文件，但都有bug，下面这个虽然配置少但没有报错：vue.config.jsmodule.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser comp

最近公司的项目使用了typescript 用的不是特别熟练 特此准备重头开始 搭建一个纯前端 管理系统页面 后续会将jsx 也集成进来1 、使用vue-cli 搭建vue init webpack vue-admin-masternpm run dev一个简单vue项目搭建成功2、引入typescriptts-loader typescript 必须安装npm install ts-loader typescript tslint tslint-loader tslint-config-s

一、背景需求在页面上渲染一个多级列表的时候，数据往往也具有多个层级例如：数组的每个元素都是一个对象，对象中的value可能是一个数组{ "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categoryList": [{ "title": "成人票", "children": [{ "title": "成人三馆联票",

理解最近在开发项目过程中，发现了混入(mixins)这个好东西，于是乎就开始研究，发现很不错，不仅可以省好多代码，而且方便维护。个人理解的混入就是在一个公共的实例中写入公共的数据或者方法，这样的话vue会自动注入到（全局混入会注入到每一个组件的实例中）（单页面引入的会注入到引入的组件中）。混入的对象也就是minxin中可以写入的内容包含任意组件选项*******（也就是说你在export default {}里边的内容都可以混入）有一种类似公共的方法的感觉，但是可以写公共的data里边的数据，这一

1、调试的时候可以在浏览器中修改network为slow 3g这样加载的时间就比较长一、安装webpack插件npm install vue-skeleton-webpack-plugin二、创建模板文件如果不同的路由界面显示不同的模板可以创建过个模板文件，我在src文件夹下面创建了三个文件Skeleton1.vue<template> <div class="skeleton-wrapper"> <header class="skel

得看实际情况；一般在 created 里面就可以，如果涉及到需要页面加载完成之后的操作话就用 mounted；created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；（调用异步请求最佳，用户就越早感知页面的已加载）mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求...

前提最近刚接手同事的vue+element项目，就碰到了一个困扰了许久的bug，bug如标题所示，报错“ Cannot read property ‘reduce’ of null" 。 google了许久，发现跟这相关的解决手段很少，所幸最后还是解决了，这里简单记录下。问题分析问题的由来是：同事在测试环境用npm run build:test打包成的dist目录，可以正常运行无异常，而当我...

Vue-Element的show-overflow-tooltip属性使用后空属性值鼠标移动上去提示一个黑色悬浮框 <el-table-column align="center" prop="productName" label="产品名称" min-width="200" show-overflow-tooltip> <...

这个问题看了网上的一些资料有一定的帮助，但我还是想把我用的方法记录想来。代码：<el-input v-model="ghStats.authCode" ref="gain" @keyup.enter="onSubmit" autofocus="autofocus" ></el-input>this.$nextTick(() => { ...

我看了别人写的博客关于设置和清除定时器都比较复杂，我感觉其实很简单的几行代码就好。把我的写法记录一下。methods中setTime() //设置定时器{ this.clearTimeSet=setInterval(() => { this.webSocketClientOnopen(); }, 1000);},clearTime() //清除定时器{ cl...

build命令后占体积最大的竟然是.map文件，webpack如何设置不让编译出.map文件呢？解决办法：去config/index.js中改一个参数：productionSourceMap:false 把这个改为false。不然在最终打包的文件中会出现一些map文件map文件的作用：有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 项目打包后，代码都是经过压缩加密的，...

今天的关键词：linkActiveClass每次路由切换成功进入激活状态在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？如何做？在路由里面设置const router = new VueRouter({ routes, linkActiveClass: 'is-active'});linkActiveClass: 'is-active',然后在c...

前言在一个项目中，一些功能会涉及到重要的数据管理，为了确保数据的安全，我们会在项目中加入权限来限制每个用户的操作。作为前端，我们要做的是配合后端给到的权限数据，做页面上的各种各样的限制。需求因为这是一个工作上的业务需求，所以对于我来说主要有两个地方需要进行权限控制。第一个是侧边菜单栏，需要控制显示与隐藏。第二个就是页面内的各个按钮，弹窗等。流程如何获取用户权限？后端（当前用户拥...

分享目标：了解 Vue.js 的组件化机制了解 Vue.js 的响应式系统原理了解 Vue.js 中的 Virtual DOM 及 Diff 原理Vue.js概述Vue 是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢？渐进式含义：强制主张最少。Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持等，但在实际开发中，并没有...

一、什么是跨域？？？跨域是指一个域下的文档或脚本去请求另一个域下的资源，俗称跨域请求。跨域主要是由于浏览器出于安全问题的考虑，采用了同源策略，通过浏览器对JS的限制，防止恶意用户获取非法的数据。二、什么是同源策略？？？同源策略是一种约定，他是浏览器最核心最基本的安全功能，如果缺少同源策略，浏览器很容易受到xss（XSS攻击原理：通过向用户界面中注入script脚本，然后在脚本中获取用户的t...

Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么是“状态管理模式”？每一个 Vuex 应用的核心就是...

个人在项目中用到的页面性能优化的方式总结。一、均衡页面加载文件的大小和数量1、项目中小图片图片转base64，通过工具如webpack进行图片压缩，文件进行压缩混淆等2、vue-router 懒加载，异步路由3、第三方依赖按需加载，比如使用element-ui框架，但是里面的组件只用到了其中一部分，可以单独建一个引入element组件的文件，在里面引入我们项目中需要的组件，然后vue.us...

1、active-class 是哪个组件的属性？嵌套路由怎么定义(1)、active-class 是 vue-router 模块的 router-link 组件的属性 　　(2)、使用 children 定义嵌套路由2、怎么定义 vue-router 的动态路由? 怎么获取传过来的值 在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。 使用 ...

https://blog.youkuaiyun.com/kaola_l/article/details/80497490

// 验证用户名 过滤特殊符号和空白export function isvalidUsername(str) { // const urlregex = /^[A-Za-z0-9]+$/ const regex = /^[\u4e00-\u9fa5a-zA-Z0-9\w]+$/g return regex.test(str)}/* 合法uri*/export function...