参考网站
https://blog.csdn.net/liyuxing6639801/article/details/71697071
.native修饰符
在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
1给普通的HTML标签监听一个事件,之后添加 .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")
}
}
})
结果
.sync修饰符(转自https://www.jianshu.com/p/6b062af8cf01)
.sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。
这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走)
示例代码如下:
<comp :foo.sync="bar"></comp>
会被扩展为(先赋值在监听):
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
更多的都在这里http://vuejs.org/v2/guide/forms.html#lazy
1、number
<input v-model="msg" number>失效
<input v-model.number="msg" type="number">
2、lazy
<input v-model="msg" lazy>失效
<input v-model.lazy="msg">
3、trim
<input v-model.trim="msg">
4、debounce
2.0以上版本中取消了debounce,具体改变如下:http://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed