vue 禁止输入空白符

2024-08-02

vue 输入框禁止输入空格，只能输入数字,禁止输入数字

正则表达式: @input="form.userName = form.userName.replace(/\s+/g,'')" ( 禁止输入空格) @input="form.phone = form.phone.replace(/[^\d]/g, '')" ( 只能输入数字 ) @input="form.name = form.name.replace(/[^\u4e00-\u9fa5]/g, '')" (禁止输入数字)

webpack构建vue项目（配置篇）

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

[AST实战]从零开始写一个wepy转VUE的工具

为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要一些公共页面和功能,但新项目又有自己的独特点,这些页面需求重新开发成本很高,但如果把小程序代码转换成 VUE 就会容易的多,因此需要这样一个转换工具. 本文将通过实战带你体验 HTML.css.JavaScript 的 AST 解析和转换过程如果你看完觉得有用,请点个赞~ AST 概览 AST 全称是叫抽象

记录近期面试题，面试总结 (从css - vue 全面面试题)

记录近期换工作时遇到的面试题和面试题答案 css 部分盒模型问题:说一下 css 的盒模型盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高怪异盒模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高问题:css 如何设置两种模型 /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 问题:有没有遇到过边距重叠,

vue 学习笔记（二）

最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定基础用法 v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 对于需要使用输入法 (如中文.日文.韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新.如果你也想处理

VUE (vue-cli)脚手架项目说明

1. 概述 1.1 说明使用vue-cli快速创建的vue项目目录如下: build -- webpack相关配置以及服务启动文件,配置多依赖于下边的config文件夹中内容 config -- vue基本配置文件,如监听端口,打包输出等配置 node_modules -- 安装依赖包的目录文件 src -- 页面以及业务逻辑文件夹,在此文件夹下进行项目开发 static -- 静态资源,可存放一些不需要进行打包的资源文件 .babelrc -- ES6语法编译配置,用来将ES6代码转换为浏

Vue.js常用指令：v-model

一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

我的Vue之小功能统计

摘要:项目中经常会要用到大大小小的功能,所以我在这里进行一个汇总,后面会持续添加至这篇博客,希望当你遇到这个功能时,我的博客能够对你有帮助,(上一篇博客说要在收假后写一篇博客做一个年终总结,想了半天不知道写什么,文笔不好,就算了,不写了,今天是情人节,祝没有脱单的程序员赶快脱单,脱单了的永不脱发,脱发了的就当我没说......) 一.安装(npm) 图片如下:可使用npm进行安装也可以使用VSCode的终端进行安装 1.安装路由vue-router npm install vue-router

vue 配置多页面应用

前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用. Vue多页面应用开发 1. 新建 vue 项目 vue init webpack vue_multiple_test cd vue_multiple_test npm install 2. 安装 glob npm i glob --save-dev glob 模块用于查找符

vue文档重读有感

vue 官方文档,每次读都有不一样的感受.项目已经做过一个了,遇到了不少问题,下面总结下这次看到的注意点: 一.指令方面 1. v-once 一次性绑定,只渲染元素和组件一次.随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过: 2. v-html html代码块的解析,对资讯类的网站特别重要,不过会有一定的风险,比如XSS攻击: 3. :class 不需要三目表达式,如果后面直接是true 或者false的话: 4. v-if 不占位,随机切换,很少改变的时候使用:v-sho

vue 基本知识整理

1 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 2 可以扩展Vue构造器,从而使用预定义选项创建可复用的组件构造器所有的Vue.js组件其实都是被扩展的Vue实例每一个VUE实例都会代理其 data 对象里所有的属性:注意只有这些被代理的属性是响应的,也就是说值的任何改变都会触发视图的重新渲染.如果在实例创建之后添加的属性到实例上,它不会触发视图的更新. vue-resource 在ie9及以下浏览器中,post请求参数无法发送到服务器......bug.... 在我

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

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

vue input框type=number 保留两位小数自定义组件

第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number" :placeholder="placeholder" v-model="inputData" @keydown="keydownFn" /></template><script> export defaul

input禁止输入后，触发事件，在苹果手机的页面会滚动

在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. 在苹果手机微信中,会滚动会顶部,才跳转.滚动你喵呀. 经过各种测试,都不行,后来搜索了input的禁止输入方法,发现: 换成这样既可防止苹果微信浏览器滚动,<input type="text" disabled="disabled" @click="&

一起学Vue之表单输入绑定

在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理.v-model 会忽

vue基础总结

Vue语法: new Vue({ //挂载: el: '#app', //初始化数据: data: {}, //监听 data 的数据变化: watch: { todos: { //深度监视 handler() { window.localStorage.setItem("todos",JSON.stringify(this.todos)) }, deep: true, //默认为false } }, //计算属性: computed:{}, //初始化完成要执行的方法: create

Vue 全宇宙最浪 VSCode 配置、插件

别人的那一堆配置.插件我就不写了- 首先进入官网下载并安装. 基本配置在编译器文件 >> 首选项 >> 设置,可以拷贝相面的选项后搜索相关配置设置制表符等于空格数为 2: "editor.tabSize": 2 设置文件末尾增加新行:"files.insertFinalNewline": true 默认换行符:"files.eol": "\n 保存文件剪切尾随空格:"files.trimTrail

Vue.js 和 MVVM 小细节

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量

wepack+sass+vue 入门教程（三）

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-

wepack+sass+vue 入门教程（二）

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }

vue 禁止输入空白符

热门专题