前言
业务里经常有这样的需求, 页面跳转的时候保持前一个页面的状态跟数据, 方便返回时处理
例如: A->B需要缓存, A->C不需要缓存
网上大部分例子都需要去处理业务组件, 感到非常不合理
故自己分享改功能用来处理此类问题
vue的keepAlive组件很适合解决这类问题, 但还是有缺陷, 比如很难灵活的根据路由来控制是否需要缓存, 只能简单的通过inclu
文章目录Vue常用特性表单基本操作表单修饰符自定义指令Vue.directive 注册全局指令Vue.directive 注册全局指令 带参数自定义指令局部指令计算属性 computed侦听器 watch过滤器过滤器中传递参数生命周期数组变异方法替换数组动态数组响应式数据图书列表案例1、 提供的静态数据2、 把提供好的数据渲染到页面上3、 添加图书4 修改图书-上5 修改图书-下6 删除图书常用
1、在代码中，添加属性：:rule
< Form ref = "loginForm" :model = "form" :rules = "rules"
场景描述： 项目中，有一个Steps 步骤条，包含三步审核，当页面跳转时，不管当前处于第几步，都需要停止上个页面正在执行或还未执行的逻辑。需求：当vue路由跳转时，取消执行上个页面之后的逻辑。这个需求可以分为两个功能点vue路由跳转时，停止上个页面正在请求的接口除了停止接口，还要停止接口请求之后的逻辑（主要是涉及到页面跳转的）一 vue路由跳转时，停止上个页面正在请求的接口当页面发生跳转时，就没必
下面以vue-cli脚手架项目来举例说明 ,进入项目打开.eslintrc.js配置文件，如下图：一、常用配置 rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': pro
基于element-ui1、在代码中，添加属性：:rule <el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form>并且，在<el-form-item>中添加prop属性，对应rules中的规则 2、新开一个文件夹（valid
提示用户（确定之后真正删除）-使用弹框组件组件 | Element $confirm需要先挂载再使用import { MessageBox} from 'element-ui';
Vue.prototype.$confirm = MessageBox.confirm // 需要全局挂载<!-- 删除按钮 -->
<el-
在使用Vue开发管理系统项目的时候，为了保存页面的浏览状态，我们可以使用内置组件keep-alive来缓存组件内部状态，避免重新渲染。<keep-alive>
<router-view></router-view>
</keep-alive> 被keep-alive包裹的动态组件或router-view会缓存不活动的实例，再次被调用这些被缓
vue集成element对表单字段进行验证前言一、element是什么？二、使用步骤1.完整引入库2.按需引入三、使用rules1.vue表单2.data 数据3.完整示例代码如下 前言vue集成element对表单字段进行验证一、element是什么？Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库二、使用步骤1.完整引入库你可以引入整个 Element
用过 Vue 的各位，对于 Prop 一定不会陌生，相信大家都能够信手拈来。但就是这么一个大家都熟悉的 Prop，有时候也会把我们坑了。在介绍这个坑之前，我们先再来温习一下 Prop 的基础用法。
第一部分“Prop 的基础用法”部分，比较熟悉的朋友，可以直接跳过，从第二部分开始即可。
一、Prop 的基础用法1.1 Prop 的大小写Vue 官方文档的Prop 章节第一段
. 目录1，合法的ip地址2、是否手机号码或者固话3、是否固话4、是否手机号码5、是否身份证号码6、是否邮箱7、合法url8、验证内容是否包含英文数字以及下划线9、自动检验数值的范围10、验证数字输入框最大数值11、验证是否1-99之间12、验证是否整数13、验证是否整数,非必填14、 验证是否是[0-1]的小数15、 验证是否是[1-10]的小数,即不可以等于016、验证是否是[1-100]的小
需求 为了防止截图等安全问题，在web项目页面中生成一个平铺全屏的水印要求水印内容为用户名，水印节点用户不能通过开发者工具等删除效果如上图在body节点下插入水印DOM节点，水印节点覆盖在页面最上层但不影响页面正常操作在通过js或者用户通过开发者工具删除或修改水印节点时自动复原原理通过canvas画出节点需生成水印的文字生成base64图片生成该水印背景图的div节点插入到body下，通过jsM
?引言在 Vue 中，我们经常会使用表单来收集用户的输入信息。为了确保用户输入的准确性和完整性，我们需要对输入进行校验。Vue 提供了一种便捷的方式来进行表单校验，即使用 rules 属性。本文将深入介绍 Vue 中的 rules 属性，并提供几个示例来帮助读者更好地理解其用法。?什么是 rules 属性在 Vue 中，表单校验规则可以通过 rules 属性来定义。该属性是一个对象，包含了各个表单
在Vue中，用watch来响应数据的变化，示例代码如下，第一种方式<input type="text" v-model="userName"/>
//监听当userName值发生变化时触发
watch: {
userName (newName, oldName) {
console.log(newName)
}
}第一种方式有一个缺点： 就是当值第一次绑定的时候 不会执行监
几个常见的表单约束属性：
pattern 给输入框指定正则表达式，用户输入的 value 必须匹配正则表达式才可验证通过；
maxlength 用户可以输入文本输入框中的最大字符；
minlength 用户可以输入文本输入框中的最小字符数；
required 表示这个表单控件的值不能为空；
min 对于 type=“number” 的表单而言，小于指定的 min 值则无效；
max 对于 type
前提在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。1、是否合法IP地址export function validateIP(rule, value,callback) {
if(value==''||value==undefined||value==null){
callback();
}else {
一.在组件上定义一个:rules1. rulesel-form
ref="dataForm"
:rules="rules"
:model="dataForm"
size="mini"
label-width="110px"
>
//在data
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<
需求：当用户登录时，会输入用户名和密码，用户名不能为空，密码的长度不能小于6位。需要在用户在点击登录按钮前，进行验证是否通过我们设定的规则，如果通过则放行，如果不通过则会进行提示。效果图：结合Element-UI来实现校验规则1. 页面元素中的设定（1）在el-form中绑定rules，同时v-mode绑定存储表单数据的变量，ref用于对表单元素进行标记，后面点击登录时，会获取表单，判断表单中的字
vue组件的详细介绍、用法最近看了不少网页和资料，发现vue组件应用非常重要，在这里和大家分享一下我的一些了解简单了解组件及目标组件其实也是一个Vue的实例 ---- 组件是可复用的 Vue 实例组件 1、注册一个组件 2、使用组件 ---- 就像HTML标签一样使用即可 3. 也可以理解为预先定义好的ViewModel类组件的目标 为了可重用性高，减少重复性开发，我们可以按照template、s
