当前位置：首页 > Web前端 > vue.js

前端开发框架Vue.js巧妙使用修饰符讲解解析

时间：2023-04-01 11:26:01 vue.js

本文不会详细介绍Vue.js如何给组件绑定事件。大家都知道是通过v-on:event="eventname"或者它的语法糖@event="eventname"进行前端训练。Vue.js为我们提供了许多不同类型的修饰符，例如事件修饰符、按钮修饰符和鼠标按钮修饰符。我们将详细介绍这三个修饰符。1.事件修饰符首先我们来看一下Vue.js为我们提供的事件修饰符。修饰符名称的作用。stop阻止传递事件。prevent阻止事件的默认行为。捕获使事件首先触发。self限制事件只有在自己触发时才处理，即事件通过事件冒泡触发。该事件无效。once规定事件只会被触发一次。被动会立即触发事件的默认行为，即不受event.preventDefault()的影响。stop如果不使用修饰符。停止：当我们点击类名grandson的div标签时，会打印如下内容

这时候我们执行同样的操作，打印结果如下：div1isclickeddiv2isclicked在一个类名为father的div标签上的click事件并没有被触发，其实是因为修饰符.stop相当于stopPropagation()的作用，阻止了事件继续向上传递。.capture这个修饰符提高了事件的触发顺序。我们继续看上面的例子。我们使用这个修改器后会发生什么？我们点击中间的元素看结果：div1被点击div3被点击div2被点击我们可以看到最外层的div使用修饰符.capture，所以当我们点击最里面的div时，事件应该是从里到外依次触发的，但是此时最外层的div的事件是先触发的，然后是按照原来的顺序。self修饰符按照字面意思也很好理解，就是只有当事件被自身触发时，才会调用处理函数。我们按照上面的例子来看我们先点击类名Grandson'sdiv，结果如下：点击了div3，点击了div1。让我们点击带有类名child的div。结果如下：div2被点击，div1被点击。我们可以看到当最里面的div被点击的时候，事件会冒泡到中间的div，但是因为使用了修饰符.self，所以并没有调用事件处理函数。once这个修饰符的意思是事件只能触发一次，让我们看例子>

让我们点击名为孙子第一次，结果如下：点击div3，点击div2，点击div1，然后我们第二次点击它，结果如下：div2我们可以看到点击了div1，因为最里面的div使用了修饰符.once，所以只有点击t时才会调用事件他第一次点击后不会触发。被动是一个不会被展示太多的修饰符。作用是让事件立即触发默认行为。例如，我们为表单提交事件submit设置了event.preventDefault()，阻止了表单提交的默认行为，但是我们对这个事件使用了修饰符.passive。当点击提交表单时，event.preventDefault()会失效，即仍然执行表单提交的默认行为。==注意==：但是这里必须注意修饰符.prevent和修饰符.passive不能同时使用，系统会忽略前者。接下来我们将介绍修饰符的组合使用。修饰符的组合修饰符可以组合，像这样.stop.once。下面看看修饰符.stop和修饰符.once一起使用的效果让我们点击类名Grandson'sdiv，结果如下div3被点击这里div2被点击，因为div2使用修饰符.stop，所以点击事件没有向上传递。然后我们再点击一下，看看div3是如何被点击的，div1是如何被点击的，因为div2使用了修饰符.once，所以第二次点击和后续的点击都不会触发它的事件处理程序。2.按键修饰符我们可以对键盘按键事件使用修饰符，例如keyup或keydown。Vue.js为我们提供了一些常用键的修饰符。让我们来看看。enter//回车key.tab//tabkey.delete//删除键和退格key.esc//esckey.space//Spacebar.up//↑key.down//↓key.left//←key.right//→key我们只需要在事件后面加上一个key修饰符来指定按下哪个键触发事件up。键盘上的键那么多，如果我们要规定按其他键怎么办？其实我们只需要自己配置其他键即可，例如，Vue.config.keyCodes.f1=112配置全局配置后，我们可以使用键修饰符.f13.系统修饰键我们在平时看到过这样的需求。按住ctrl+f1可以触发某些操作，所以Vue.js也提供了一些修饰键来帮助我们完成这个需求。.ctrl.alt.shift.meta//这个修饰键是Mac电脑的.exact修饰键，可以配合事件使用。例如@click.ctrl='btnClick'表示只有按住ctrl点击才会触发该事件；同时修饰键也可以和键修饰符一起使用，例如@keyup.alt.enter='keyUp'表示只有在按下Alt的同时按下回车键才会触发该事件。但其实我们在使用的时候，会发现这样一种情况，@keyup.alt.enter='keyUp'，我们按住alt，然后按一个空格键或者tab键，再按回车键，这个也可以触发事件。所以Vue.js加了一个修饰符.exact来完成按钮的精确触发。@keyup.alt.enter.exact='keyUp'，使用修饰符.exact后，我们必须只按alt和enter键触发事件，再按一个键触发事件。4.鼠标按键修饰符当然，鼠标上有三个按键，分别是左键、右键和滚轮键。它们也有对应的修饰符，分别是.left、.right、.middle，这里就不用做了。的演示。5.其他修饰符除了上面提到的修饰符外，还有一些其他的修饰符用于特定的场合。我们来看一下.sync为了理解这个修饰符的作用，我们先回顾一下父子组件之间的通信一个例子?子组件显示父组件传过来的变量title，当点击时，一个名为changeValue的事件是发送给父组件，同时也传递了一个值。//我们创建了一个名为child-cpn的组件{{title}}...props:['title'],methods:{divClick(){this.$emit('changeValue','我是改变的值')}}?在父组件的情况下，父组件将自己的变量origin_title传递给子组件，同时接收事件changeValue事件和子组件传递的数据。//父组件使用子组件child-cpn......data(){return{origin_title:'Iamtheoriginalvalue'}},methods:{changeValue(info){this.origin_title=info}}我们都知道从父组件传递给子组件的数据是单向变化的，也就是只有当数据父组件发生变化，子组件获取的数据也会跟着变化。所以在这个例子中，子组件想要改变这个值，通过子组件和父组件之间的通信告诉父组件，你可以尽快改变这个值，我会把修改后的值发给你。这样父组件还需要监听子组件传过来的事件，然后再用一个方法来处理事件，非常麻烦。理解了上面例子的需求，下面引入我们的修饰符.sync，看看如果使用这个修饰符，代码会简洁到什么程度。子组件与父组件通信时，传递的事件名需要改成这样的格式：update:需要改变的变量名//我们创建了一个名为child-cpn的组件{{title}}…props:['title'],methods:{divClick(){this.$emit('update:title','我是改变后的值')}}?在这种情况下父组件的，父组件只需要传给子组件变量，在变量名后加一个修饰符.sync，这样父组件中的origin_title会直接改成子组件传递的参数成分。//父组件使用子组件child-cpn...data(){return{origin_title:'我是原值'}}细心的小伙伴一定发现了，父组件使用修饰符.sync后，省去了@changeValue='changeValue'和changeValue(info){this.origin_title=info}这两部分代码，变得非常简洁。注意：这里还是要强调一下，子组件与父组件通信时，传递的事件参数必须是unpdate的格式：需要改变的变量名，这是规定的。使用修饰符.sync后，我们在给子组件传递数据时就不能使用表达式了，比如：title.sync="origin_title+'haha'"，会报错。.native修饰符的作用比较简单，简单描述一下//父组件使用了一个名为child-cpn的子组件，监听它的点击事件，结果没用有经验的人都知道，在组件的根元素上绑定原始事件是没有用的。如果你不相信我，你可以自己试试。但是只要我们在事件后面加上修饰符.natvie，就可以绑定原来的事件了。//父组件使用名为child-cpn的子组件，并监听其点击事件，成功绑定

上一篇：前端面试每日3+1——第1021天

下一篇：从日常应用实例defineProperty到vue.js计算实现

前端开发框架Vue.js巧妙使用修饰符讲解解析相关文章

最新推荐

猜你喜欢