一、修饰符
修饰符有五种类型:
二、表单修饰符
1.trim
trim:去除数据头尾的空格
<input type="text" v-model.trim="value">
2.lazy
lazy:光标离开标签的时候,会赋值给变量,也就是在change
事件之后再进行信息同步
<input type="text" v-model.lazy="name">
3.number
number:将数据转化成数字类型,当无法被parseFloat解析时返回原值(即字符串中的首个字符为数字时即可返回数字,否则返回原值)
例:
- 输入1323dsdhd,返回1323;
- 输入 asdd414,返回 asdd414
<input type="text" v-model.number="num">
三、事件修饰符
1.stop
stop:阻止冒泡,相当于调用event.stopPropagation()
<div @click="shout(2)">
<button @click.stop="shout(1)">按钮</button>
</div>
此例中不加stop会执行1,2,加上stop阻止冒泡,只执行1,不会执行2
2.prevent
prevent:阻止默认事件,相当于调用event.preventDefault()
<a href="https://www.baidu.com" @click.prevent="shout(3)">百度</a>
此例中点击a标签不会跳转到百度,而是执行shout(3)
3.self
self:当event.target为自身元素时触发
<div @click.self="shout(2)">
<button @click="shout(1)">按钮</button>
</div>
此例中只执行shout(1),不执行shout(2)
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
<div @click="shout(3)">
<div @click.self.stop="shout(2)">
<button @click="shout(1)">按钮</button>
</div>
</div>
此代码执行1,执行3,因为阻止了2自身的执行
<div @click="shout(3)">
<div @click.stop.self="shout(2)">
<button @click="shout(1)">按钮</button>
</div>
</div>
此代码只执行1,因为阻止了全部冒泡
4.once
once:绑定了事件以后只能触发一次,第二次就不会触发,但仍然有冒泡
<div @click="shout(3)">
<div @click="shout(2)">
<button @click.once="shout(1)">按钮</button>
</div>
</div>
第一次点击按钮时,执行1,2,3;第2次及以后点击时执行2,3,不再执行1了。
5.capture
capture:使事件触发从包含这个元素的顶层开始往下触发
<div @click.capture="shout(3)">
<div @click="shout(2)">
<button @click="shout(1)">按钮</button>
</div>
</div>
点击按钮,先执行3,再执行1,再执行2
<div @click.capture="shout(3)">
<div @click.capture="shout(2)">
<button @click="shout(1)">按钮</button>
</div>
</div>
点击按钮,先执行3,再执行2,再执行1
6.passive
passive:passive 会告诉浏览器你不想阻止事件的默认行为,可以不用去查询程序有没有阻止默认事件,提早告诉,提高性能。
<div class="div_wrapper" @scroll.passive="shout(5)"></div>
注意:不要把 .passive
和 .prevent
一起使用,因为.prevent
将会被忽略,同时浏览器可能会向你展示一个警告。passive
会告诉浏览器你不想阻止事件的默认行为。
7.native
native:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加 native事件是无法触发的。
<my-component v-on:click.native="doSomething"></my-component>
四、鼠标键盘按钮修饰符
1.鼠标按钮修饰符
针对的就是左键、右键、中键点击,对应的鼠标键点击才会触发函数
-
left 左键点击
-
right 右键点击
-
middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
2.键盘按钮修饰符
-
普通键(enter、tab、delete、space、esc、up...)
-
系统修饰键(ctrl、alt、meta、shift...)
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout(1)">
还可以通过以下方式自定义一些全局的键盘码别名:
Vue.config.keyCodes.f2 = 113
五、v-bind修饰符
1.sync
作用:sync修饰符是一个语法糖,类似v-model,它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动,因此不能直接在子组件里面修改父组件传过来的数据,我们一般$emit。
sync修饰符其实是做了两步动作:
1、声明传的数据visible
2、声明@update:visible事件
注意:
-
使用
sync
的时候,子组件传递的事件名格式必须为update:value
,其中value
必须与子组件中props
中声明的名称完全一致 -
注意带有
.sync
修饰符的v-bind
不能和表达式一起使用 -
将
v-bind.sync
用在一个字面量的对象上,例如v-bind.sync=”{ title: doc.title }”
,是无法正常工作的
原始写法$emit:
<!-- 父组件 -->
<template>
<div id="app">
<button @click="visible=true">显示</button>
<my-alert :visible="visible" @close="closeAlert"></my-alert>
</div>
</template>
<script>
import myalert from './components/myalert'
export default {
name: 'App',
components:{'my-alert': myalert},
data(){
return {
visible:false
}
},
methods:{
closeAlert(value){
this.visible = value
}
}
}
</script>
<!-- 子组件 -->
<template>
<div class="cont" v-show="visible">
<h2>这是一个对话框</h2>
<button @click="closeAlert">关闭</button>
</div>
</template>
<script>
export default {
name: "myalert",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
closeAlert(){
this.$emit('close',false)
}
}
}
</script>
一个数据就要带一个自定义事件才能实现双向绑定,为了避免乱起名引起的混乱,事件名我们最好约定一下规则。
因为是修改visible这个数据,因此事件我们统一就叫@update:visible
<!-- 父组件 -->
<template>
<div id="app">
<button @click="visible=true">点击</button>
<my-alert :visible="visible" @update:visible="value => visible=value"></my-alert>
</div>
</template>
<script>
import myalert from './components/myalert'
export default {
name: 'App',
components:{'my-alert': myalert},
data(){
return {
visible:false
}
}
}
</script>
<!-- 子组件 -->
<template>
<div class="cont" v-show="visible">
<h2>这是一个对话框</h2>
<button @click="closeAlert">关闭</button>
</div>
</template>
<script>
export default {
name: "myalert",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
closeAlert(){
this.$emit('update:visible',false)
}
}
}
</script>
这么写还是太麻烦了,但有了统一的规则,系统就可以帮我们自动生成不必要的代码,这就是sync修饰符的作用,它让写法更为简洁:
<!-- 父组件 -->
<template>
<div id="app">
<button @click="visible=true">点击</button>
<my-alert :visible.sync="visible"></my-alert>
</div>
</template>
<script>
import myalert from './components/myalert'
export default {
name: 'App',
components:{'my-alert': myalert},
data(){
return {
visible:false
}
},
}
</script>
<!-- 子组件 -->
<template>
<div class="cont" v-show="visible">
<h2>这是一个对话框</h2>
<button @click="closeAlert">关闭</button>
</div>
</template>
<script>
export default {
name: "myalert",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
closeAlert(){
this.$emit('update:visible',false)
}
}
}
</script>
2.prop
prop:设置自定义标签属性,编译后不会出现在html中,避免暴露数据,防止污染HTML结构
<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined
3.camel
camel:将命名变为驼峰命名法,只有props和.prop会默认将kebab-case转化为camelCase,剩下的作为attribute的不会。而.camel修饰符正是针对attribute的。如将view-Box
属性名转换为 viewBox。
data() {
return {
msgText: 'aaa'
}
}
<h2 :msg-text="msgText">原本</h2>
<!-- 编译后为<h2 msg-text="aaa">原本</h2> -->
<h2 :msg-text.camel="msgText">加camel修饰符</h2>
<!-- 编译后为<h2 msgtext="aaa">加camel修饰符</h2>,由于camel将msg-text转化为msgText,html中不区分大小写,所以会将大写都转化为小写,则最终结果为msgtext -->