vue修饰符--多是东半球最详细的文档（滑稽）

时间  2019-11-05 标签 vue 修饰 东半球 详细 文档 滑稽

为了方便你们写代码，vue.js给你们提供了不少方便的修饰符，好比咱们常常用到的取消冒泡，阻止默认事件等等~javascript

目录

  • 表单修饰符
  • 事件修饰符
  • 鼠标按键修饰符
  • 键值修饰符
  • v-bind修饰符（实在不知道叫啥名字）

表单修饰符

填写表单，最经常使用的是什么？input！v-model~而咱们的修饰符正是为了简化这些东西而存在的html

  • .lazy
<div>
   <input type="text" v-model="value">
   <p>{{value}}</p>
</div>

clipboard.png

从这里咱们能够看到，咱们还在输入的时候，光标还在的时候，下面的值就已经出来了，能够说是很是地实时。
可是有时候咱们但愿，在咱们输入完全部东西，光标离开才更新视图。vue

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

这样便可~这样只有当咱们光标离开输入框的时候，它才会更新视图，至关于在onchange事件触发更新。java

  • .trim

在咱们的输入框中，咱们常常须要过滤一下一些输入完密码不当心多敲了一下空格的兄弟输入的内容。dom

<input type="text" v-model.trim="value">

clipboard.png

为了让你更清楚的看到，我改了一下样式，不过问题不大，相信你已经清楚看到这个大大的hello左右两边没有空格，尽管你在input框里敲烂了空格键。
须要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的svg

  • .number

看这个名字就知道，应该是限制输入数字或者输入的东西转换成数字，but不是辣么赶单。学习

clipboard.png

clipboard.png

若是你先输入数字，那它就会限制你输入的只能是数字。
若是你先输入字符串，那它就至关于没有加.numberui

事件修饰符

  • .stop

因为事件冒泡的机制，咱们给元素绑定点击事件的时候，也会触发父级的点击事件。this

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

一键阻止事件冒泡，简直方便得不行。至关于调用了event.stopPropagation()方法。spa

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1
  • .prevent

用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。至关于调用了event.preventDefault()方法。

<!-- 提交事件再也不重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

注意：修饰符能够同时使用多个,可是可能会由于顺序而有所不一样。
用 v-on:click.prevent.self 会阻止全部的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
也就是从左往右判断~

  • .self

只当事件是从事件绑定的元素自己触发时才触发回调。像下面所示，刚刚咱们从.stop时候知道子元素会冒泡到父元素致使触发父元素的点击事件，当咱们加了这个.self之后，咱们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景）才会shout~从这个self的英文翻译过来就是‘本身，自己’能够看出这个修饰符的用法

<div class="blue" @click.self="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

clipboard.png

  • .once

这个修饰符的用法也是和名字同样简单粗暴，只能用一次，绑定了事件之后只能触发一次，第二次就不会触发。

//键盘按坏都只能shout一次
<button @click.once="shout(1)">ok</button>
  • .capture

从上面咱们知道了事件的冒泡，其实完整的事件机制是：捕获阶段--目标阶段--冒泡阶段。
默认的呢，是事件触发是从目标开始往上冒泡。
当咱们加了这个.capture之后呢，咱们就反过来了，事件触发从包含这个元素的顶层开始往下触发。

<div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
          obj3
          <div @click="shout(4)">
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3

从上面这个例子咱们点击obj4的时候，就能够清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，所以是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，所以是先4而后冒泡到3~

  • .passive

当咱们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，可是在移动端，会让咱们的网页变卡，所以咱们使用这个修饰符的时候，至关于给onscroll事件整了一个.lazy修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会当即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的状况 -->
<div v-on:scroll.passive="onScroll">...</div>
  • .native

咱们常常会写不少的小组件，有些小组件可能会绑定一些事件，可是，像下面这样绑定事件是不会触发的

<My-component @click="shout(3)"></My-component>

必须使用.native来修饰这个click事件（即<My-component @click.native="shout(3)"></My-component>），能够理解为该修饰符的做用就是把一个vue组件转化为一个普通的HTML标签，
注意：使用.native修饰符来操做普通HTML标签是会令事件失效的

鼠标按钮修饰符

刚刚咱们讲到这个click事件，咱们通常是会用左键触发，有时候咱们须要更改右键菜单啥的，就须要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

  • .left 左键点击
  • .right 右键点击
  • .middle 中键点击
<button @click.right="shout(1)">ok</button>

键值修饰符

其实这个也算是事件修饰符的一种，由于它都是用来修饰键盘事件的。
好比onkeyup，onkeydown啊

  • .keyCode

若是不用keyCode修饰符，那咱们每次按下键盘都会触发shout，当咱们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表

<input type="text" @keyup.keyCode="shout(4)">

为了方便咱们使用，vue给一些经常使用的键提供了别名

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift

能够经过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

咱们从上面看到，键分红了普一般用的键和系统修饰键，区别是什么呢？
当咱们写以下代码的时候,咱们会发现若是仅仅使用系统修饰键是没法触发keyup事件的。

<input type="text" @keyup.ctrl="shout(4)">

那该如何呢？咱们须要将系统修饰键和其余键码连接起来使用，好比

<input type="text" @keyup.ctrl.67="shout(4)">

这样当咱们同时按下ctrl+c时，就会触发keyup事件。
另，若是是鼠标事件，那就能够单独使用系统修饰符。

<button @mouseover.ctrl="shout(1)">ok</button>
      <button @mousedown.ctrl="shout(1)">ok</button>
      <button @click.ctrl.67="shout(1)">ok</button>

大概是什么意思呢，就是你不能单手指使用系统修饰键的修饰符（最少两个手指，能够多个）。你能够一个手指按住系统修饰键一个手指按住另一个键来实现键盘事件。也能够用一个手指按住系统修饰键，另外一只手按住鼠标来实现鼠标事件。

  • .exact (2.5新增)

咱们上面说了这个系统修饰键，当咱们像这样<button type="text" @click.ctrl="shout(4)"></button>绑定了click键按下的事件，惊奇的是，咱们同时按下几个系统修饰键，好比ctrl shift点击，也能触发，可能有些场景咱们只须要或者只能按一个系统修饰键来触发（像制做一些快捷键的时候），而当咱们按下ctrl和其余键的时候则没法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写之后你仍是能够按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，可是不能按下ctrl + shift +普通键来触发。

<button type="text" @click.ctrl.exact="shout(4)">ok</button>

而后下面这个你能够同时按下enter+普通键来触发，可是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~

<input type="text" @keydown.enter.exact="shout('我被触发了')">

v-bind修饰符

  • .sync(2.3.0+ 新增)

在有些状况下，咱们可能须要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，由于子组件能够修改父组件，且在父组件和子组件都没有明显的改动来源。咱们一般的作法是

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

如今这个.sync修饰符就是简化了上面的步骤

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

这样确实会方便不少，可是也有不少须要注意的点

  1. 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称彻底一致(如上例中的myMessage，不能使用my-message)
  2. 注意带有 .sync 修饰符的 v-bind 不能和表达式一块儿使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，相似 v-model。
  3. 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是没法正常工做的，由于在解析一个像这样的复杂表达式的时候，有不少边缘状况须要考虑。
  • .prop

要学习这个修饰符，咱们首先要搞懂两个东西的区别。

Property：节点对象在内存中存储的属性，能够访问和设置。
Attribute：节点对象的其中一个属性( property )，值是一个对象。
能够经过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，经过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的全部属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

其实attribute和property两个单词，翻译出来都是属性，可是《javascript高级程序设计》将它们翻译为特性和属性，以示区分

//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index

从上面咱们能够看到若是直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
为了

  • 经过自定义属性存储变量，避免暴露数据
  • 防止污染 HTML 结构

咱们可使用这个修饰符，以下

<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
  • .camel

因为HTML 特性是不区分大小写的。

<svg :viewBox="viewBox"></svg>

实际上会渲染为

<svg viewbox="viewBox"></svg>

这将致使渲染失败，由于 SVG 标签只认 viewBox，殊不知道 viewbox 是什么。
若是咱们使用.camel修饰符，那它就会被渲染为驼峰名。
另，若是你使用字符串模版，则没有这些限制。

new Vue({
  template: '<svg :viewBox="viewBox"></svg>'
})

最后

不知道有没有漏的，若是有漏的麻烦在评论区告知一声，有建议或者意见也能够提一下，谢谢~

联系我们 沪ICP备13005482号-10