作者:李大雷
https://segmentfault.com/a/1190000016786254
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~
<div> <input type='text' v-model='value'> <p>{{value}}</p> </div>
<div> <input type='text' v-model.lazy='value'> <p>{{value}}</p> </div>
<input type='text' v-model.trim='value'>
<div @click='shout(2)'> <button @click='shout(1)'>ok</button> </div> //js shout(e){ console.log(e) } //1 //2
<div @click='shout(2)'> <button @click.stop='shout(1)'>ok</button> </div> //只输出1
.prevent
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent='onSubmit'></form>
<div class='blue' @click.self='shout(2)'> <button @click='shout(1)'>ok</button> </div>
//键盘按坏都只能shout一次 <button @click.once='shout(1)'>ok</button>
<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
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive='onScroll'>...</div>
<My-component @click='shout(3)'></My-component>
<button @click.right='shout(1)'>ok</button>
<input type='text' @keyup.keyCode='shout(4)'>
//普通键 .enter .tab .delete //(捕获“删除”和“退格”键) .space .esc .up .down .left .right //系统修饰键 .ctrl .alt .meta .shift
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
<input type='text' @keyup.ctrl='shout(4)'>
<input type='text' @keyup.ctrl.67='shout(4)'>
<button @mouseover.ctrl='shout(1)'>ok</button> <button @mousedown.ctrl='shout(1)'>ok</button> <button @click.ctrl.67='shout(1)'>ok</button>
<button type='text' @click.ctrl.exact='shout(4)'>ok</button>
<input type='text' @keydown.enter.exact='shout('我被触发了')'>
.sync(2.3.0+ 新增)
//父亲组件 <comp :myMessage='bar' @update:myMessage='func'></comp> //js func(e){ this.bar = e; } //子组件js func2(){ this.$emit('update:myMessage',params); }
//父组件 <comp :myMessage.sync='bar'></comp> //子组件 this.$emit('update:myMessage',params);
Property:节点对象在内存中存储的属性,可以访问和设置。 Attribute:节点对象的其中一个属性( property ),值是一个对象。 可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取,通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。 在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。
//这里的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
<input id='uid' title='title1' value='1' :index.prop='index'> //input.index === this.index //input.attributes.index === undefined
<svg :viewBox='viewBox'></svg>
<svg viewbox='viewBox'></svg>
new Vue({ template: '<svg :viewBox='viewBox'></svg>' })
联系客服