u010227042的博客

第一种方法：直接将变量内容复制至剪切板，暂时没有找到处理数据后再复制的方式。1. 安装vue-clipboard。2.main.js引入。

3.在忘记密码页面使用，给接口传的参数加密后传给后端。一.使用jsencrypt进行RSA加密-非全局。二.使用jsencrypt进行RSA加密-全局。

vue 组件间 eventBus

this.breadList.unshift(node.data.value)// 将value保存起来。node.parent) {// 若无父节点，则直接返回。// console.log("data是多少呢");label: '三级 1-1-1',label: '三级 2-1-1',label: '三级 2-2-1',label: '三级 3-1-1',label: '三级 3-2-1',label: '二级 1-1',label: '二级 2-1',label: '二级 3-1',

1.1. 前端开发工具：JetBrains WebStorm 2019.2.4 x64。1.7. 服务器系统：CentOS 7.6 64bit。1.4. node.js版本： v12.13.0。1.5. vue-cli版本: v4.4.6。1.2. 服务器文件传输软件：WinSCP。1.3. 服务器连接软件：Xshell。1.6. vue 版本：2.9.6。

el-selectv-model="ruleForm.region"placeholder="请选择条件"style="width100%">立即创建//验证名称的函数。

ESLint 在项目中是以插件的形式存在。所以我们只需要在项目中安装 ESLint 就可以使用安装 ESLint1 npm install eslint --save-dev2 安装 vue 专门的 ESLint 规则插件 @vue/cli-plugin-eslint3 npm i @vue/cli-plugin-eslint --save-dev添加配置文件配置文件常用的方法有两种:1 在 package.json中添加{ "name": "mypackage", "version"

亲测可用，如有疑问，请私信错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "grants" (found in component )

1. :append-to-body="false"2父组件最外层样式{ position: relative; overflow: hidden;}3 drawer组件样式 // do some

在vue项目中,正常父子组件传值使用props属性,而且要注意props的单向数据流特点,也即父组件通过props向子组件传值,但子组件不能直接改props里面的值,正常的做法一般是通过$emit向父组件发射一个事件,然后传值,达到子组件想要修改父组件值的目的.vue在后面的版本为了简化写法,推出了.sync的语法糖写法,代码更简洁,达到的效果是一样的...

亲测可用，如有疑问请私信Vue - 解决子组件中修改props值报错其实这就是Vue的单向数据流的概念单向数据流父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。那么怎么解决呢？很简单修改 prop 的两种情形：①：这个 prop 用来传递一.

亲测可用，如有问题请私信官方Beta文档已过时。只需按照此最新文档中的说明进行操作。 https://github.com/vuejs/eslint-plugin-vue/tree/v3.14.0#readmeeslint-plugin-vue @ beta是v.3.14.0根据文档，请改用这些设置。将package.json中的"extends": ["plugin:vue/essenti al","eslint:recommended"],替换成："extends": .

1.安装weixin-js-sdknpm i -S weixin-js-sdk2 获取微信授权import wx from 'weixin-js-sdk'async created() { //签名的URL let sign_url = ""; if (window.__wxjs_is_wkwebview === true) { //如果当前设备是IOS sign_url = window.loc...

最近开发公众号遇到一个问题：iOS、Android 加载页面，如果用户调整了微信自带的字体大小，那么我们的页面就会跟随调整字体大小，导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。找了一些方法总结如下：原理：阻止ios和安卓调整字体大小时候的事件，ios通过添加css属性，安卓通过微信属性去阻止。iOS系统禁止微信客户端修改字体大小：/* iOS禁止微信调整字体大小 */body { -webkit-text-size-adjust: 100% !important;..

亲测可用，若有疑问请私信需求：通过点击el-table每行的数据，进行勾选。但是不希望点击表格内按钮的时候也触发。因此要阻止这些按钮的冒泡事件。解决方案：加个span标签，然后在标签上使用 @click.stop="" <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> <template slot-scope="sco...

亲测可用，若有疑问请私信获取url参数有两种情况：情况一：内部页面之间互相传值这里先讲情况一，因为同一项目内互相传值比较简单，假如要从A页面跳转到B页面，并传值。就要在A页面这么写this.$router.push({name:"B",query:{ Id : this.tId , ...}})进入B页面之后，在B页面内这么写this.Id = this.$route.query.Id;就能将A页面的id传入B页面，进行数据调取。情况二...

1、下载在项目里面，通过npm安装下载npm install vue-wordcloud --save2、使用demo<template> <div class="hello"> <div id="app"> <wordcloud :data="defaultWords" nameKey="name" valueKey="value" :color="myColors" :...

推荐库：GitHub - fengyuanchen/compressorjs: JavaScript image compressor.vant 上传压缩示例：npm icompressorjs -simport Compressor from 'compressorjs';before-read 回调中：： beforeRead(file){ let that = this return new Promise((resolve) => ...

data定义：data () { return { test: '测试'}; },获取data 中数据的初始状态test值：： this.$options.data.call(this).test

1，看之前可以先看一下官网：https://element.eleme.cn/#/zh-CN/component/popover#events2，官网写的都很笼统，有一些都没做详细解释，新手可能有很多地方都看得比较懵，现在就说一下，自己遇到的坑吧3，官网这么简单的介绍了一下这个，trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或

注解：vuex是一个很简单、很方便的技术，入门很简单，这里给大家详细介绍下vuex的进阶使用。一、vuex模块化modules1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。目录结构：store　　index.js --文件　　modules --文件夹2、store->index.js 1 2 3 4 5 ...

vuex 动态注册方法 registerModule的实现示例：使用场景：三方库，不污染主工程vuexmodule c.js如下：组件中动态注册module使用：import B from '../C';this.$store.registerModule('A', B);// 动态注册库所需的vuex模块...

在学习和接触 Vue 的过程中，接触到 Vue 的两个特性，单向数据流与双向数据绑定，他们是什么，特点如何，以及彼此之间的关系和联系又有什么，接下来，我们深入的探究一下它们。单向数据流数据流，表明的是数据流向，用大白话说就是数据传递。那么单项数据流是我们的数据单一方向传输。对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性。首先对于父子组件来说，父组件总是通过 Props 向子组件传递数据。例如： <div id="app"> &l...

Announcing qiankun@2.02019 年 6 月，微前端框架qiankun正式发布了 1.0 版本，在这一年不到的时间内，我们收获了 4k+ star，收获了来自 single-spa 官方团队的问候，支撑了阿里 200+ 线上应用，也成为社区许多团队选用的微前端解决方案。在今天，qiankun 将正式发布 2.0 版本。qiankun@2.0 带来了一些新能力的同时，只做了很小的 API 调整，1.x 的用户可以很轻松的迁移到 2.x 版本，详细信息见下方 升级指南 小节。..

Yarn是什么？“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。 同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。

Autofocus processing was blocked because a document already has a focused element.场景：因为页面有多个el-input解决办法：我是这样做的：<el-input v-else v-model="item.sentence" :ref=" 'input'+ item.id " placeho...

Vue .sync修饰符与$emit(update:xxx).sync修饰符的作用在对一个 prop 进行“双向绑定,单向修改”的场景下，因为子组件不能直接修改父组件，sync在2.3版本引入，作为一个事件绑定语法糖，利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。.sync修饰符之前的写法父组件：<parent :myMessage=“bar” @update:myMessage=“func”>js定义函数:

此问题，自己分析了好久才找到问题。其实有两种解决方案，我这里举例了一个，另一种环境变量配置也是可以的。希望能帮到大家。问题描述：解决方案：1：执行这条命令：npm install --global --production windows-build-tools执行后你会发现下面的截图所展示的问题，一定要仔细阅读（这两张截图）；2：找到这个文件夹，点击进去3：提醒一下，这里看截图操作4：先点击移除，完成后。再次找到python-2.7...

document.getElementsByClassName('类名')[0].click();

npm i vue-qriously -S//在main.js中引入import VueQriously from 'vue-qriously'Vue.use(VueQriously)//使用<template> <div> <qriously :value="url" :size="100" /> </div></template><script> export default { da...

首先：@和~ 都是在路径访问时使用的。1. @ 使用说明 @这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面定义。 vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。 默认定义：@这东西代表着到src这个文件夹的路径 自己添加：2. ~ 使用说明 ~ 是 stylus-loader 的东西，参考 htt...

该配置用于vue开发，最终效果是保存时自动根据eslint对js、html和css代码进行格式化。vscode Vetur插件Vetur插件用于识别vue文件，原本vetur自带格式化功能，但是和eslint会有冲突，所以没用上。vscode ESlint插件Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示，后面的自动格式化根据这里的错误提示进行格式化操作。基于vue-cli创建的项目以下相关步骤需要注意：创建的时候把Linter/Fo

前言：本文将引入两个 Vue 中比较特殊的使用场景，带领大家熟悉一下null和undefined的区别，然后再分析一下 Vue 中是怎么对 Props 做校验的，最后给出大佬是怎么解释的。一直以来，笔者在使用 Vue 时，习惯于在需要表示 prop 属性未定义时，使用undefined，而不是null。因为“undefined才是没有值，null是有值，但是值为空的对象（注意不是空对象{}）”。基于这一习惯，笔者规避掉了很多问题，对此也没有深究。直到最近，参与项目的一些同学习惯于指定null.

props: { str: { type: String, default: "" }, num: { type: Number, default: null }, boo: { type: Boolean, default: true }, arr: { type: Array, default() { return []; ..

vscode 必装插件vscode必装插件：1、文件图标：Material Icon Theme2、html5模板：HTML Snippets、Mithril Emmet3、vue插件：Vetur、Vue 2 Snippets，vue-helper（支持CTRL+点击函数跳转 || 绑定对象跳转）4、{}括号优化插件：Bracket Pair Colorizer5、主题：Tokeyo Night (东京之夜)6、标签自动补齐：Auto Close Tag7、vue输入组件

前言最近在开发跨境电商项目的时候，要做一个广告宣传页，根据产品的要求希望广告宣传页面在独立域名下，但是领导又希望这个页面在原有的项目内，于是就想起了用vue-cli多页应用。接下来就详细介绍配置多页应用中遇到的坑和注意的细节。step 一：首先看一下项目的主体架构,下边讲解不懂得可以参考这个目录结构project.pngstep 二：主要讲解一下多页应用的主要配置1,你可以使用原有的main.js和App.vue作为主页面的入口，原有的项目不需要动 2,然后其他的多个页面.

以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写）nested menu1 menu1-1 menu1-2 menu1-2-1 const nestedRouter = { path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Rou

今天介绍一个小巧好用的唯一ID生成器，Github地址：https://github.com/ai/nanoid一、安装npm i nanoid二、使用import { nanoid } from 'nanoid'let idA = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"//也可以指定生成字符串的长度let idB = nanoid(5)...

原谅我做一次标题党，Ajax 不会死，传统 Ajax 指的是 XMLHttpRequest（XHR），未来现在已被Fetch替代。最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的$.ajax迁移到Fetch，上线一个多月以来运行非常稳定。结果证明，对于 IE8+ 以上浏览器，在生产环境使用 Fetch 是可行的。由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读MDN Promise 教程。旧浏览器不支持 Promise，需要...

如果全是用一级路由时，路由管理就变得很臃肿，有点乱，路由有父子关系的话，嵌套路由会更好。嵌套也就是路由中的路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。1.嵌套路由的使用场景：应用最多的就是选项卡，在选项卡中，顶部有多个导航栏，中间的主体显示的是内容；这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，就是中间的主体显