vue使用正则表达式

2024-08-01

Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通过规则验证告知用户不合法,2.禁止输入不符合规则字符.下面基于第2种情况,针对Vue中的input控件通过自定义指令(directive),使用正则表达式限制input控件的输入. 工作流程: input控件绑定v-model ---> 通过自定义指令(v-restrict)设定验证的正则表达式 -

vue+element 正则表达式进行表单验证

<template> <el-form :model="form" label-width="115px" ref="form" :rules="rules" label-position="left"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item

9. VUE 常用正则表达式

1. 判断输入是否是数字 var numReg = /^[0-9]+$/ var numRe = new RegExp(numReg) if (!numRe.test(number)) { this.$message({ type: 'warning', message: '请输入数字 ', duration: 10000, showClose: true, }) return false }

大白话Vue源码系列(03)：生成AST

阅读目录 AST 节点定义标签的正则匹配解析用到的工具方法解析开始标签解析结束标签解析文本解析整块 HTML 模板未提及的细节本篇探讨 Vue 根据 html 模板片段构建出 AST 的具体过程.这对 Vue 的使用通常没什么帮助,但熟悉这个过程会对 Vue 的内部工作原理有更清晰的认识. 主代码位置:Vue 项目的 src/compiler/parser/html-parser.js 文件. AST 节点定义 AST 是由一个个节点组成的,正如 DOM 树是由 DOM 节点组成

前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

内容精简资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2项,只供参考.更多内容细看分类. js:JavaScript 标准参考教程 js:JavaScript 秘密花园 Es6:ECMAScript 6入门 Es6:深入浅出ES6 css:CSS 参考手册 jquery:从零开始学习jQuery jquery:前端开发者都应知道的 jQuery 小技巧

从 Vue parseHTML 来学习正则表达式

从 Vue parseHTML 所用正则来学习常用正则语法 Vue parseHTML 中所用的所有正则如下.常见正则规则可参见附录 1,Vue parseHTML 正则所用规则均可在其中找到定义. const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ const dynamicArgAttribut

webpack构建vue项目（配置篇）

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

Vue动态组件

前面的话让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件概述通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

Vue keep-alive实践总结

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

给vue项目添加ESLint

eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的: 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量. 全局

Vue源码后记-其余内置指令（1）

把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind:style="styleObject"> <input v-show="vShowIter" v-model='vModel' /> <span v-once>{{msg}}</span> <div v-html=&qu

在nginx上部署vue项目(history模式)；

在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成如下:http://local

如何在VUE项目中添加ESLint

如何在VUE项目中添加ESLint 1. 首先在项目的根目录下新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使

深入理解vue

一理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架. 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念. 那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前

vue 的模板编译—ast(抽象语法树) 详解与实现

首先AST是什么? 在计算机科学中,抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码. 我们可以理解为:把 template(模板)解析成一个对象,该对象是包含这个模板所以信息的一种数据,而这种数据浏览器是不支持的,为Vue后面的处理template提供基础数据. 这里我模拟Vue去实现把template解析成ast,代码已经分享到 https://github.com/z

Django REST framework+Vue 打造生鲜超市（四）

五.商品列表页 5.1.django的view实现商品列表页 (1)goods/view_base.py 在goods文件夹下面新建view_base.py,为了区分django和django rest framework的view 利用Django的view实现返回json数据 # goods/view_base.py from django.views.generic import View from goods.models import Goods class GoodsListView

Django REST framework+Vue 打造生鲜超市（六）

七.用户登录与手机注册 7.1.drf的token (1)INSTALL_APP中添加 INSTALLED_APPS = ( ... 'rest_framework.authtoken' ) token会生成一张表authtoken_token,所以要运行migrations和migrate (2)url配置 from rest_framework.authtoken import views urlpatterns = [ # token path('api-token-auth/', vie

vue 实践记录

打包后使用相对路径在 build/webpack.prod.conf.js 的 output 节点添加配置:publicPath: './' 打包时使用shell复制文件在入口 build/build.js 中使用. 引入 shelljs库 require('shelljs/global') 使用示例:cp('-R', 'favicon.ico', config.build.assetsRoot) 不同环境使用不同模式加载路由( vue 开发环境不适用懒加载) router目录结构 _imp

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会替换原有的,原有的必须删除,不能刷新. ③ 在其他的设备上使用的时候,也要安装软件. B/S :浏览器和服务器(Browser/Server)架构 B/S 软件的特点: 不需要安装任何的客户端,是通过浏览器输入网址打开的. 更新的时候不需要重新安装软件,你只需要刷新页面,程序就能更新. 在其他设备端

Vue(day5)

一.监听数据变化的三种形式假设我们需要提供两个输入框,分别输入姓和名,然后自动拼接为姓名.这样,我们就需要监听输入框的数据变化,让完整的姓名跟随输入的变动而变化.我们可以使用以下三种方式: 1.结合DOM事件使用mothod来监听数据变化 html代码:使用keyup事件来监听数据的改变. <div id="app"> <input type="text" v-model="firstname" @keyup="ge

vue使用正则表达式

热门专题