标签分类
技术文章
当前位置:主页 > 计算机编程 > vue.js > Vue.js修饰符用法

Vue.js修饰符知识点详解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:107

Vue.js修饰符用法

这篇文章主要知识点是关于Vue.js,修饰符,vuejs,修饰符详解,Vue.js修饰符用法,Vue.js 事件修饰符的使用教程 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Web前端大小:186.6 MB格式:PDF出版:清华大学出版社作者:申思维
立即下载

更多相关的学习资源可以参阅 程序设计电子书办公软件电子书、等栏目。

本篇将简单介绍常用的修饰符。

在上一篇中,介绍了 v-model 和 v-on 简单用法。除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。

一、v-model的修饰符

 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值。

为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时,按F12就可以在开发者工具里看到Vue页签。这里需要注意,只有在引用Vue的开发版本文件,即vue.js文件时,Vue Devtools工具才能正常使用。

.lazy

首先在 vm 对象中增加需要绑定的属性

 var vm = new Vue({
   el: "#app",
   data: {
     input_lazy: ""
   }
 });

在页面中的 input 的元素上添加指令

 <div class="row">
   <h2>v-model.lazy</h2>
   <input type="text" v-model.lazy="input_lazy" />
 </div>

打开页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化

Vue.js学习笔记之修饰符详解

当在文本框输入内容,并且光标焦点没有离开文本框时,属性值没有实时发生变化

Vue.js学习笔记之修饰符详解

而当焦点离开文本框时,属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。

.number

该修饰符用来将输入内容自动转换成数值。

vm 对象里增加一个属性,默认为空字符串

 var vm = new Vue({
   el: "#app",
   data: {
     input_number: ""
   }
 });

在页面的 input 元素上添加指令

 <div class="row">
   <h2>v-model.number</h2>
   <input type="text" v-model.number="input_number" />
   <hr />
 </div>

打开页面,在文本框内输入内容,查看绑定属性值的变化

Vue.js学习笔记之修饰符详解

当开始输入数字时,属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符,属性值将不再变化。

Vue.js学习笔记之修饰符详解

而当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值,所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。

.trim

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

vm 对象中增加一个属性,默认为空字符串

 var vm = new Vue({
   el: "#app",
   data: {
     input_trim: ""
   }
 });

input 上添加指令

 <div class="row">
   <h2>v-model.trim</h2>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>

打开页面,在文本框输入内容,并在内容前后添加多个空格

Vue.js学习笔记之修饰符详解

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

二、v-on的修饰符

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

.stop

该修饰符将阻止事件向上冒泡。同理于调用 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">
   <h2>v-on.stop</h2>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </div>

打开页面,并点击按钮,查看控制台打印结果

Vue.js学习笔记之修饰符详解

按照事件冒泡原理,点击按钮时,从当前触发的元素开始,沿着它的父元素一直到根元素,都会依次触发 click 事件。但是应用了 .stop 修饰符后,将只会触发当前元素的 click 事件,并阻止事件向上冒泡。

.prevent

该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

vm 对象里添加一个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     form_submit: function () {
       console.log("form submit!");
     }
   }
 });

页面添加一个 form 表单,并绑定表单的提交事件

 <div class="row">
   <h2>v-on.prevent</h2>
   <form @submit.prevent="form_submit">
     <button type="submit">Submit</button>
   </form>
   <hr />
 </div>

当点击提交按钮时,会触发绑定的事件,并且阻止表单提交并刷新当前页面的默认行为。

.self

该指令只当事件是从事件绑定的元素本身触发时才触发回调

修改上面 .stop 的例子,在父元素 div 上添加样式

 <div class="row">
   <h2>v-on.self</h2>
   <div @click.self="div_click" >
     <button type="button" @click="stop_click">Button</button>
   </div>
   <hr />
 </div>

打开页面

Vue.js学习笔记之修饰符详解

因为父元素比它的子元素要长,所以右侧会有一部分红色的父元素显示出来。分别点击按钮和红色区域,查看控制台打印结果

Vue.js学习笔记之修饰符详解

因为 div_click 事件被修饰符绑定,只有在直接点击到父元素 div ,即红色区域内,事件才会被触发。

即使点击了它的子元素触发了子元素的事件,按照事件冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是事件绑定的元素本身,所以父元素事件不会被触发。

.one

该修饰符表示绑定的事件只会被触发一次

vm 对象中添加一个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     once_click: function () {
       console.log("once click...");
     }
   }
 });

页面添加一个按钮,绑定事件

 <div class="row">
   <h2>v-on.once</h2>
   <button type="button" @click.once="once_click">Button</button>
   <hr />
 </div>

打开页面,多次点击按钮。只有在第一次点击时,事件才会触发。

键值修饰符

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

vm 对象中添加一个测试方法

 var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

页面增加一个 input 元素,监听键盘事件

 <div class="row">
   <h2>键值修饰符</h2>
   <input type="text" @keyup.="enter_click" />
   <hr />
 </div>

打开页面,在文本框输入内容,并按回车,查看控制台打印结果

Vue.js学习笔记之修饰符详解

通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听

 <input type="text" @keyup.enter="enter_click"/>

也可以自定义按键名称

 // 自定义按键名称
 Vue.config.keyCodes.ent = 13;
 
 // 页面引用
 <input type="text" @keyup.ent="enter_click"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

Vue.js 事件修饰符的使用教程

 一、前言

熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。

仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives

 二、干货合集

1、 DOM 事件流

有时,当我们需要完成页面中的某些功能时,我们要在需要实现功能的页面元素上使用 v-on 指令去监听 DOM 事件,在 html4 时代浏览器如何确定页面的哪一部分会拥有特定的事件时,IE 和 Netscape 的开发团队提出了两个截然相反的概念。这一差异,也使我们在写代码中需要考虑如何去处理 DOM 的事件细节。为了解决这一问题,vue 给我们提供了事件修饰符这一利器,它使我们的方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

一些涉及到概念:

a)事件:用户设定或者是浏览器自身执行的某种动作。例如click(点击)、load(加载)、mouseover(鼠标悬停)、change(改变)等等

b)事件处理程序:为了实现某个事件的功能而构建的函数方法,也可称为事件监听器

c)DOM 事件流:描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序

在 DOM 事件流中存在着三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

a)事件捕获(event capture):当鼠标点击或者触发 DOM 事件时,浏览器会从根节点开始 由外到内 进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件

b)事件冒泡(event bubbing):当鼠标点击或者触发 DOM 事件时,浏览器会从根节点开始 由内到外 进行事件传播,即点击了子元素,则先触发子元素绑定的事件,逐步扩散到父元素绑定的事件

之前我们提到的 IE 和 Netscape 的开发团队提出了两个截然相反的事件流概念,IE 采取的是事件冒泡流,而标准的浏览器的事件流则是事件捕获流。所以,为了兼容 IE 我们需要改变某些的写法。

2、 事件修饰符

a).stop:阻止事件冒泡

在下面的示例中,我们分别创建了一个 button 的点击事件和外侧的 div 的点击事件,根据事件的冒泡机制我们可以得知,当我们点击了按钮之后,会扩散到父元素,从而触发父元素的点击事件,具体的结果也如下图所示:

<div id="app" class="divDefault">
  <div id="div1" @click="divHandlerClick">
   <input type="button" value="点击" @click="btnHandlerClick" />
  </div>
 </div> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    divHandlerClick() {
     alert('我是div的点击事件!')
    },
    btnHandlerClick() {
     alert('我是button的点击事件')
    }
   }
  });
 </script>

这时候,如果我们不希望出现事件冒泡,则可以使用 Vue 内置的修饰符便捷的阻止事件冒泡的产生。因为我们是点击 button 后产生的事件冒泡,我们只需要在 button 的点击事件上加上 stop 修饰符即可,示例代码如下。

<input type="button" value="点击" @click.stop="btnHandlerClick" />

Vue.js 事件修饰符的使用教程

b).prevent:阻止默认事件

阻止默认事件这个也很好理解,有些标签本身会存在事件,例如,a 标签的跳转,form 表单中 submit 按钮的提交事件等等,在某些时候我们只想执行我们自己设置的事件,这时,就需要阻止标签的默认事件的执行,原生的 js 我们可以使用 preventDefault 方法来实现,而在 Vue 中,我们只需要使用 prevent 关键字就可以了。

在下面的示例中,我们为 a 标签添加了一个点击事件,由于 a 标签本身具有默认的跳转事件,此时,当我们点击后,最终还是会执行 a 标签的默认事件。

 <a href="http://www.baidu.com" @click="aHandlerClick">链接跳转</a> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    aHandlerClick() {
     alert('我是a标签的点击事件')
    }
   }
  });
 </script>

Vue.js 事件修饰符的使用教程

在 Vue 中,当我们想要阻止元素的默认事件,只需要在绑定的事件后使用 prevent 修饰符即可,示例代码如下。

<a href="http://www.baidu.com" @click.prevent="aHandlerClick">链接跳转</a>

Vue.js 事件修饰符的使用教程

c).capture:添加事件监听器时使用事件捕获模式

在上面的学习中我们了解到,事件捕获模式与事件冒泡模式是一对相反的事件处理流程,当我们想要将页面元素的事件流改为事件捕获模式时,只需要在父级元素的事件上使用 capture 修饰符即可,还是上面的例子的代码,当我们在 div 绑定的点击事件上使用 capture 修饰符后,我们点击按钮首先触发的就是最外侧的 div 的事件。

 <div id="app" class="divDefault">
  <div id="div1" @click.capure="divHandlerClick">
   <input type="button" value="点击" @click="btnHandlerClick" />
  </div>
 </div>

Vue.js 事件修饰符的使用教程

d).self:只当在 event.target 是当前元素自身时触发处理函数(比如不是子元素冒泡引起的事件触发)

在上面的例子中,我们为 div 绑定了一个点击事件,而我们的本意可能是只有当我们点击 div 后触发这个事件,而实际情况是事件冒泡还是事件捕获都会触发这个事件,这与我们的本意是不符的。在 Vue 中,我们就可以使用 self 修饰符去修饰事件,让这个事件只在我们想要触发时触发。

<div id="app" class="divDefault">
 <div id="div1" @click.self="divHandlerClick">
  <input type="button" value="点击" @click="btnHandlerClick" />
 </div>
</div>

Vue.js 事件修饰符的使用教程

e).once:事件只触发一次

当我们仅仅想对绑定的事件只在第一次的时候触发,这时我们就可以使用 once 修饰符去修饰绑定的事件。例如在下面的代码中,只有第一次点击时才会触发绑定的事件,之后点击都不会触发。

<input type="button" value="点击" @click.once="btnHandlerClick" />

f).passive:滚动事件的默认行为 (即滚动行为) 将会立即触发

在页面滚动的时候,浏览器会在整个事件处理完毕之后再触发滚动,因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault(),而 passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消,即 使用 passive 修饰符后表示绑定的事件永远不会调用 event.preventDefault()。

 三、总结

1、事件修饰符的使用顺序很重要

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2、.passive 和 .prevent不能一起使用

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

以上所述是小编给大家介绍的Vue.js 事件修饰符的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到儿童python编程入门书籍推、 vue项目中使用md5加密以及、 解决axios.interceptors.respon、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:Vue2自定义全局指令Vue.directive和指令的生命周期知识点

下一篇:vue项目打包后通过百度的BAE发布到网上流程步骤

展开 +

收起 -

学习笔记
网友NO.229034

Vue 按键修饰符处理事件的方法

按键修饰符 在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修饰符时, 我们可能会去监听键盘事件, 根据 keyCode 的值加以判断 Vue 新增按键修饰符和系统修饰符来处理类似事件 /** 提交表单 */template div class="demo" 电话号码: input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" / /div/templatescriptexport default { data () { return { phone: '' // 电话号码 } }, methods: { // TODO 提交电话号码 handleSubmit () { alert(this.phone) } }}/script 要记住所有的 keyCode 值比较困难, 所以 Vue 为常用的按键提供了别名 input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" / 常见按钮别名 enter tab delete esc space up down left right 如果这些别名不能满足需要的话, 可以通过全局 config.keyCodes 对象自定义按键修饰符别名 Vue.config.keyCodes.x = 88 你也可以将 keyboardEvent.key 暴露的按键名转换为 kebab-case 来作为修饰符, 以下两种修饰符都能触发 handleSubmit 事件 input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" /input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" / 系统修饰键 有时候我们需要配合系统修饰键共同触发事件, 这里要注意的是, 单独按下系统修饰键是不会触……

网友NO.191625

Vue input控件通过value绑定动态属性及修饰符的方法

对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): !-- 当选中时,`picked` 为字符串 "a" --input type="radio" v-model="picked" value="a"!-- `toggle` 为 true 或 false --input type="checkbox" v-model="toggle"!-- 当选中时,`selected` 为字符串 "abc" --select v-model="selected" option value="abc"ABC/option/select 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。 举个最容易认知的例子 input type="radio" v-model="pick" v-bind:value="a"//当只有v-model的情况下,我们绑定了VUE实例中的pick这个数据,而这数据往往都是字符串或者是逻辑值,而如今通过v-bind绑定value,意味着,value是一个可变的数据 a,而不是字符串'a',而v-model在这个控件选定后的值就是指向value,而用v-bind绑定后,指向的值又是一个动态属性,所以此时就可以通过a这个动态属性来更改v-model绑定的值,其他的控件也是如此,比如select等// 当选中时vm.pick === vm.a .lazy 在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: //测试是在失去焦点的时候才更新,而不是实时更新 input v-model.lazy="msg" .number 如果想自动将用户的输入……

网友NO.422558

Vue.js 事件修饰符的使用教程

一、前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。 仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives 二、干货合集 1、 DOM 事件流 有时,当我们需要完成页面中的某些功能时,我们要在需要实现功能的页面元素上使用 v-on 指令去监听 DOM 事件,在 html4 时代浏览器如何确定页面的哪一部分会拥有特定的事件时,IE 和 Netscape 的开发团队提出了两个截然相反的概念。这一差异,也使我们在写代码中需要考虑如何去处理 DOM 的事件细节。为了解决这一问题,vue 给我们提供了事件修饰符这一利器,它使我们的方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 一些涉及到概念: a)事件:用户设定或者是浏览器自身执行的某种动作。例如click(点击)、load(加载)、mouseover(鼠标悬停)、change(改变)等等 b)事件处理程序:为了实现某个事件的功能而构建的函数方法,也可称为事件监听器 c)DOM 事件流:描述的是从页面中接收事件的顺序,也可理解为事件在……

网友NO.132546

详解Vue.js中.native修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如: my-component v-on:click.native="doTheThing"/my-component 简单点理解就是: 给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。例如: HTML代码 div id="app" a href="#" rel="external nofollow" v-on:click.native="clickFun"click me/a/div JavaScript代码 new Vue({ el: '#app', methods: { clickFun: function(){ console.log("message: success") } }}) 结果 给某个组件的根元素上监听一个事件,之后添加 .native 修饰符就会起作用了。例如: HTML代码 div id="app" my-component v-on:click.native="clickFun"/my-component/div JavaScript代码 Vue.component('my-component', { template: `a href='#'click me/a`})new Vue({ el: '#app', methods: { clickFun: function(){ console.log("message: success") } }}) 结果 总结 以上所述是小编给大家介绍的Vue.js中.native修饰符,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明