Vue.js学习笔记中修饰语的详细解释

本文将简要介绍常用的修饰语。

在前一篇文章中，我们介绍了v-model和v-on的简单用法。除了常规用法之外，这些指令还以特殊方式支持绑定方法，这些方法作为修饰符实现。通常情况下，修饰语名称用小数点“.”连接在指令之后。

1.v型修饰语

V-model是在表单的表单元素上创建双向数据绑定的指令。在input和textarea上，默认值是通过侦听元素的输入事件来更新绑定属性值。

为了清晰的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展。查看Vue开发的页面时，按F12查看开发工具中的Vue选项卡。这里需要注意的是，Vue dev tools工具只有在引用了Vue的开发版本文件，即vue.js文件的情况下才能正常使用。懒惰的

首先，添加需要绑定到vm对象中的属性

var vm=new Vue({ el: '#app '，data : { input _ lazy : ' ' })；在页面中添加关于输入元素的说明

div class=' row ' h2v-model.lazy/h2 Input Type=' text ' v-model . lazy=' Input _ lazy '//div打开页面，打开Vue Devtools，在文本框中输入字符，检查属性值的变化

当在文本框中输入内容并且光标焦点没有离开文本框时，属性值不会实时改变

当焦点离开文本框时，属性值改变，并与文本框的内容一致。从这个例子可以看出。lazy修饰符延迟同步更新属性值的时间。也就是说，最初绑定到输入事件的同步逻辑被更改为绑定到更改事件。数字

该修改器用于自动将输入转换为数值。

向vm对象添加一个属性，默认为空字符串

var vm=new Vue({ el: '#app '，data : { input _ number : ' ' })；在页面的输入元素上添加说明

div class=' row ' h2v-model.number/h2输入类型=' text' v-model。number=' input _ number'/HR//div打开页面，在文本框中输入内容，检查绑定属性值的变化

当您开始输入数字时，属性值将实时更新为数字。在数字后输入其他非数字字符，属性值不会改变。

当输入非数字字符串时，属性值将实时更新为相同的字符串，因为Vue无法将字符串转换为数字值。即使后来输入了一个数字，它也将被视为一个字符串。整齐

该修饰符用于自动过滤字符串前后的空字符。

向vm对象添加一个属性，默认为空字符串

var vm=new Vue({ el: '#app '，data : { input _ trim : ' ' })；添加输入说明

div class=' row ' h2v-model.trim/h2 Input Type=' text ' v-model . trim=' Input _ trim '/HR//div打开页面，在文本框中输入内容，并在内容前后添加多个空格

Vue会自动过滤掉前后多个空格，最终的属性值是前后没有空字符的字符串。

二、v-on的修饰语

绑定事件修饰符可以更改事件的触发方式。停止

该修饰符将防止事件冒泡。与调用event.stopPropagation()方法相同

向vm对象添加两个事件

var vm=new Vue({ el: '#app '，methods : { div _ click : function(){ console . log(' div click . '));}，stop _ click : function(){ console . log(' stop _ click . ');} } });将以上两种方法绑定到一组具有父子关系的元素

div class=' row ' h2v-on.stop/h2 div @ click=' div _ click '按钮类型=' button' @ click。stop=' stop _ click '停止传播/button/div HR//div。打开页面，单击按钮查看控制台打印结果

根据事件冒泡的原理，当点击一个按钮时，点击事件将从当前触发的元素沿着其父元素依次触发到根元素。然而当。如果应用了stop修饰符，它只会触发当前元素的click事件，并防止事件向上冒泡。预防

此修饰符阻止当前事件的默认行为。与调用event.preventDefault()方法相同

向vm对象添加测试方法

var vm=new Vue({ el: '#app '，methods : { form _ submit : function(){ console . log(' form submit！');} } });将表单表单添加到页面，并绑定表单的提交事件

div class=' row ' h2v-on.prevent/h2表单@ submit.prevent=' form _ submit '按钮类型=' submit ' submit/button/formhr//div当您单击submit按钮时，它将触发绑定事件，阻止表单提交并刷新当前页面的默认行为。自己

只有当事件从事件绑定元素本身触发时，此指令才会触发回调

修改的上述示例。停止向父元素div添加样式

div class=' row ' h2v-on.self/h2 div @ click . self=' div _ click ' style=' display : inline-block；宽度：像素；背景色-: red；'按钮类型=' button' @ click=' stop _ click '按钮/button/div HR//div打开页面

因为父元素比其子元素长，所以一些红色的父元素会显示在右侧。分别单击按钮和红色区域，查看控制台的打印结果

因为div_click事件是由修饰符绑定的，所以只有当直接单击父元素div时，即在红色区域，才会触发该事件。

即使点击其子元素触发子元素的事件，根据事件冒泡的原理，父元素的事件应该被触发，但是因为事件的触发源不是绑定到事件本身的元素，所以父元素的事件不会被触发。一个

此修饰符意味着绑定事件只会被触发一次

向vm对象添加测试方法

var vm=new Vue({ el: '#app '，methods : { once _ click : function(){ console . log(' once click . '));} } });向页面添加按钮以绑定事件

div class=' row ' h2v-on.once/h2按钮类型=' button ' @ click . once=' once _ click '按钮/buttonhr//div打开页面，单击按钮几次。事件仅在第一次单击时触发。

键修饰符

这个修饰符可以用来监听键盘事件

向vm对象添加测试方法

var vm=new Vue({ el: '#app '，methods : { enter _ click : function(){ console . log(' enter click . '));} } });向页面添加输入元素以监视键盘事件

Div class=' row' h2key修饰符/h2input type=' text' @ keyup。=' enter _ click '/HR///div打开页面，在文本框中输入内容，然后按Enter查看控制台打印结果

使用keyup.keyCode监控特定键盘按键的事件。您也可以按键名收听

输入类型=' text ' @ keyup . enter=' enter _ click '/您也可以自定义键名

//自定义键名vue . config . key codes . ent=13；//页面引用输入类型=' text ' @ key up . ent=' enter _ click '/以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。