wxl1390的博客

【代码】vue回车键触发事件。

两个日期校验

问题描述：报Expected indentation of 0 spaces but found 2如何解决。在.eslintrc.js，修改indent。

了，所以每次渲染页面的时候都要重新执行一下添加动态路由的方法。第一次进入页面会正常显示，但是点击刷新页面后会导致页面空白。在vue项目中采用动态添加路由的方式，

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。影响到父组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updated。影响到子组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updated。子组件 mounted。

Vue报错问题汇总

禁止谷歌浏览器自动填充密码,输入框背景颜色改变还原

锚点定位，菜单焦点随内容变化

Vue 跳转相同路由实现 ，query 不同

随着版本的更新Element UI新增了新的组件，例如：Image，没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。这是官方文档中有写的，但是我想不使用Image组件又想使用预览大图的功能是否可行呢？答案是当然可以。使用方法翻看了Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下props: { urlList: { type: Array, default: () => [

this.$options 可以获取自定义属性时。用来获取data外面的数据和方法。<script>export default { name: "Test", data() { return { }; }, //在data外面定义的属性和方法通过$options可以获取和调用 name: "zs", age: 12, haha() { console.log("haha"); }, created() {

在Vue中遇到很多url都用到了<%= BASE_URL %>这个东西。<%= BASE_URL %> // 项目根目录在 vue-cli 创建的一个项目中执行命令 vue inspect > output.js将会输出一个output.js文件，自动将 vue-cli 中对 webpack 的配置信息导出到 output.js 文件，会发现下面一段代码： new DefinePlugin( { 'process.env': {

一、methods中使用过滤器的方法1.一种方法是采用全局过滤器设置全局的filter的方法Vue.filter(‘name’，function (val) {})在methods中使用全局的filter：Vue.filters['filterName'] (val)2.设置当前组件的方法filter: { functionName (val) { // logic process }}在methods中使用局部的filter:this.$options.filters

一个完整的版本号组表示为： [主要版本号，次要版本号，补丁版本号]。npm模块的完整的版本号一般是【主版本 . 次要版本 . 补丁版本】，一般情况下，次要版本号发生改变的话，表示程序有重大更新。1. 用 ~ 指示范围如果指定了次要版本，允许补丁版本升级。如果没有指定次要版本，允许次要版本升级2. 用 ^ 指定范围允许不会改变最左边的不为零的版本号的版本提升，也就是说，1.0.0允许次要、补丁版本升级，0.1.0允许补丁版本升级，^0.0.x 不允许升级。...

<script>export default { data() { return { screenWidth: document.body.clientWidth }; }, watch: { screenWidth(newVal) { console.log('newVal', newVal); // console.log('old', old); // this.boxWscreenWidthidth

环境变量一个环境变量文件只包含环境变量的键值对：NODE_ENV=developmentVUE_APP_BASE_URL=http://127.0.0.1:8080/注意：NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径除了 NODE_ENV 和 BASE_URL，其他的环境变量必

用单选框来切换打印时的方向<div slot="footer" class="dialog-footer"> <el-radio v-model="isPortrait" label="1" @change="handleRadioChange">纵向</el-radio> <el-radio v-model="isPortrait" label="0" @change="handleRadioChange">横向</el-ra

第一种：把图片放进父元素bacground里，也就是不用子元素：.css{ // 在vue的:style里做更新一定要这么写 /cover background: url('../../bg.jpg') no-repeat center center/cover fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-si

问题描述: 在路由a的时候，滚动页面到x的位置，此时直接跳转路由b，会发现b页面竟然页停留在x的位置！解决方案①:监听路由直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0)export default { watch: { $route: function(to, from) { window.scrollTo(0,0); //document.body.scrollTop = 0; //doc

定义全局过滤器filter第一种方法：mian.js 中进行定义Vue.filter("moneyFilter", function(value, num, type) { //value是使用过滤器是的表达式或者值,num和tyep中的参数 return "￥" + value.toFixed(num) + type;});过滤器的参数解析moneyFilter表示的是过滤器的名称函数中的参数解析：value是通过管道传来的数据num在调用过滤器时在圆括号中第一个参数type

概念el-scrollbar(滚动条组件)：是Element UI隐藏组件注意事项：1.el-scrollbar的父层要有固定高度2.el-scrollbar的高度要设成100%3.如果出现横滚动条，添加overflow-x:hidden;属性el-scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性props: { native: Boolean,

什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可以重复使用的代码。在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。在有些情况下，组件也可以是原生元素的形式，以is特性进行扩展。如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。方法一: props/$emit父组件向子组件传值//App.vue父组件<template> &l

在vue中使用clipboard.js 时候发现一个问题，如果移动端不是input或者button，则复制不成功，使用步骤如下：引入clipboard.jsnpm install clipboard --save在需要使用的组件中importimport Clipboard from 'clipboard';添加需要复制的内容<button class="tag-read" data-clipboard-text="我是可以复制的内容，啦啦啦啦" @click="copy"

需求在提交表单使用http的put请求进行数据更新时，只提交表单中被修改的数据，而不是提交整个表单解决获取表单数据时clone一份作为原始数据rawData在提交表单前将表单数据 formData 和 rawData 的数据进行比较将差异存放到新的对象 diffData 中，在提交表单时提交就行了实现（部分代码）template中的代码<template> <el-form ref="formRef" :model="form"> <el-for

package.json:1、主要用来定义项目中需要依赖的包，在创建项目的时候会生成。2、记录项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm insta

一、安装1、全局安装npm i -g eslint2、项目安装npm i -D eslint二、eslint 定义规则1、创建 .eslintrc.js 文件可以使用 ./node_modules/.bin/eslint --init 创建文件.eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件。在 package.json 里创建一个 eslintConfig 属性，在那里，同样可以定义你的配置。如果 .eslintrc.js

关于安装Vue CLI 的包名称由 vue-cli 改成了 @vue/clinpm install -g @vue/cli安装完成后查看版本vue --V项目创建关于项目创建，除了命令创建3.x还增加了图形化界面创建以及管理vue项目在创建新项目时还可以混合选用多种集成TypeScriptPWAVue Router & VuexESLint / TSLint / Prettier用 Jest 或 Mocha 进行单元测试用 Cypress 或者 Nightwatch 进

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></div> <el-che

identify这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下：直接上测试代码：identify.vue组件（主要用于定义参数和方法）<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentH...

HTML你需要将所有想要翻译的模块部分的class中加上lang，然后自定义key。还需要有设置语言的按钮，class中添加translate，id用相应的代号。<button class="translate" id="en">English</button><button class="translate" id="zh">Chinese</bu...

在本地加载正常，上传到服务器之后，网页没有样式。解决问题的过程：是否路径问题？—>分析：应该不是路径问题。页面中引用了图片，路径格式与CSS文件相同，图片可以正确加载。—>操作–需要进一步确认不是路径问题：去掉文件夹，去掉引用，CSS文件与index.html放置在同一个文件夹内：仍然无法显示样式。结论：不是路径引用问题。2.是否CSS内容编写错误，导致浏览器无法识别？...

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js类似下面的路由代码router/index.js 路由相关信息,该路由文件引入了多个 .vue组件import Hello from '@/components/Hello'import P...

oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数

一、entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。//方式一：单文件写法entry: { index: './src/pages/route.js', //about: './src/pages/about.js', //other:()=>{...}}//方式二：多文件写法entry:...

vuex是什么？vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。Vuex 就是前端为了方便数据的操作而建立的一个 “前端数据库”vuex中，有默认的五种基本的对象：state：存储状态（变量）getters: 对数据获取之前的再次编...

在router/index.js中添加如下代码：import Vue from 'vue'import Router from 'vue-router' /** * 重写路由的push方法 * 解决，相同路由跳转时，报错 * 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5") */const routerPush...

启动项目npm run dev报错:Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (modul...

1.事件修饰符是由点开头的指令后缀来表示的。.stop.prevent.capture.self.once.passive注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。<!-- 阻止单击事件继续传播 -->&l...

一、引入JSEncrypt1.安装依赖npm install jsencrypt2.在main.js（需要引入的地方）引入import { JSEncrypt } from 'jsencrypt'3.前端公钥加密、后台私钥解密、请求来的数据后台公钥加密、前端私钥解密二、引入转码方法 // 16进制转byte数组function hexToBytes(hex) { for ...

这个页面创建前设置我的样式，销毁之前移除我设置的样式。//创建前设置beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#efeff4;')},//销毁前清除beforeDestroy () { document.querySelector...