指令和修饰符
v-on:
修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
.stop
调用 event.stopPropagation()
阻止向上冒泡
点击子级,不会触发父级的点击事件<div class="app" @click.stop></div> <div class="app" @click.stop="handle"></div>
.capture
(en:捕获,捕捉) 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。<div class="app" @click.capture="handle"></div>
.self
只有当自身被触发(如点击)时才会生效.(例如子元素被点击不会触发父元素)<div class="app" @click.self="handle"></div>
.keyCode
(如 .13 => .enter)<input @keyup.enter="handle" /> <!-- 等同于 --> <input @keyup.13="handle" />
.navive
自定义组件直接触发(如点击)是无效的,只能通过子组件向父组件传递事件的方式,或者添加.native
修饰符<div class="app" @click="handle"> <!-- 子组件如果不加上 .native ,click事件无效 --> <custom-div @click.native="handleComponent"></custom-div> </div> <script> new Vue({ el:'.app', components:{ 'custom-div':{ template:` <div class="component"></div> `, } }, }) </script>
v-bind
修饰符:
- prop - 被用于绑定 DOM 属性 (property)。(差别在哪里?)
- camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
.sync
是一个语法糖,作用(双向绑定的另一种方式)
https://www.jianshu.com/p/6b062af8cf01<cpt :title.sync="title"></cpt> <!-- => --> <cpt :title="title" @update:title="(val) => title = val"></cpt>
/*需要显式触发 update 事件*/ this.$emit('update:foo', newValue)
v-model
https://www.jianshu.com/p/3dbbbc7a259c
修饰符:
lazy - 取代 input 监听 change 事件
<!-- 默认的v-model是没输入一个字符自动更新一次msg --> <!-- .lazy => 当 input 失去焦点或者按下enter键后才更新msg --> <input type="text" v-model.lazy="msg">
number - 输入字符串转为数字
<input v-model.number="age" type="number">
trim - 输入首尾空格过滤
<input v-model.trim="age" type="number">