【vue】手动实现vue的v-model语法糖，以及控制在输入法完成之后才更新model

前沿

通过观察发现，中文输入完成之后，绑定的属性才更新；
面临的问题：中文输入过程中，每按下键盘就会触发input事件，而我们需要捕获中文真正输入完成后的事件，从而更新双向绑定的属性。所以，今天的主是CompositionEvent ，它表示用户间接输入文本（如使用输入法）时发生的事件。

composition event	说明
compositionstart	输入法编辑器开始新的输入合成时会触发
compositionupdate	字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）
compositionend	当文本段落的组成完成或取消时触发

vue中实现一个v-model

// 在vue中实现一个v-model
<template><div><p>{{value}}</p><inputtype="text"v-bind:value="value"v-on:input="onInput"@compositionstart="onCompositionstart"@compositionend="onCompositionend"/></div>
</template>
<script>
export default {data() {return {value: 'lilei',composing: false};},methods: {onInput(ev) {if (this.composing) {return;}this.value = ev.target.value;},onCompositionstart() {this.composing = true},onCompositionend(ev) {this.composing = false;this.onInput(ev);}}
};
</script>

html中实现一个v-model

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="show"></p><input type="text" id="root" value=""><script>let value = 'lilei'let composing = falseconst $root = document.getElementById('root')$root.addEventListener('input', onInput)$root.addEventListener('compositionstart', onCompositionstart)$root.addEventListener('compositionend', onCompositionend)initValue($root, value)function onInput(ev) {if (composing) {return}value = ev.target.valueupdateValue('#show', value)}function onCompositionstart() {composing = true}function onCompositionend(ev) {composing = false;onInput(ev);}function updateValue(id, value) {document.querySelector(id).innerHTML = value}function initValue(dom, value) {dom.value = valueupdateValue('#show', value)}</script>
</body></html>

【vue】手动实现vue的v-model语法糖，以及控制在输入法完成之后才更新model相关推荐

【Vue教程】Vue.js推文
为什么前端工程师的需求这么大我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...
vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...
Vue3在setup语法糖下的父子组件传值
文章目录前言一.前期准备二.初始化项目 1.父组件传值给子组件 2.子组件传值给父组件 3.完整代码总结前言 vue版本大于>3.2 使用setup语法糖一.前期准备 setup介绍 ...
【JS语法糖】常见的几种JS语法糖
[JS语法糖]常见的几种JS语法糖今天遇到一个前端方面的新词汇语法糖第一次听到这个词我的第一反应是:这是一个糖可能是像这样的: 或者像这样: [PS:旺仔牛奶是不是该给我打钱了 ? ...
Java中部分常见语法糖
语法糖(Syntactic Sugar),也称糖衣语法,指在计算机语言中添加的某种语法,这种语法对语言本身功能来说没有什么影响,只是为了方便程序员的开发,提高开发效率.说白了,语法糖就是对现有语法的一 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
Vue.js----入门 (3)----v-bind、v-on、v-model等指令以及其语法糖的用法
文章目录一.指令 1.v-bind指令 2.v-on指令 3.v-model指令一.指令 1.v-bind指令 v-bind指令是用来更新HTML元素的属性,其语法糖写法为用 : ...
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...

【vue】手动实现vue的v-model语法糖，以及控制在输入法完成之后才更新model

前沿

vue中实现一个v-model

html中实现一个v-model

【vue】手动实现vue的v-model语法糖，以及控制在输入法完成之后才更新model相关推荐

最新文章

热门文章