v-model修饰符
<template>
<div id="demo14">
<p>-----------------模板语法之修饰符----------------</p>
<!-- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(),取消事件的默认动作。 -->
<form v-on:submit.prevent="onSubmit">
<input type="submit" value="submit">
</form>
<form v-on:submit="onSubmit">
<input type="submit" value="submit2">
</form>
<!-- 当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化 -->
<h2>v-model.lazy</h2>
<input type="text" v-model.lazy="input_lazy">
<h2>v-model.number</h2>
<input type="text" v-model.number="input_number">
<h2>v-model.trim</h2>
<input type="text" v-model.trim="input_trim">
</div>
</template>
<script>
export default {
data() {
return {
url: "https://www.baidu.com",
input_lazy: "",
input_number: "",
input_trim: ""
};
},
methods: {
onSubmit: function() {
console.log(this.url);
}
}
};
</script>
事件处理修饰符
<template>
<section>
<div id="demo23-1">
<p>-----------------事件处理之修饰符---------------------</p>
<!-- 阻止单击事件继续传播 ,将上面两个方法绑定到一组具有父子关系的元素上-->
<div @click="div_click">
<a v-on:click.stop="stop_click">click.stop</a>
</div>
<div @click="div_click">
<a v-on:click="stop_click">click without stop</a>
</div>
<!-- 提交事件不再重载页面 阻止表单提交并刷新当前页面的默认行为。-->
<form v-on:submit.prevent="form_submit">
<input type="submit" value="submit">
</form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThis">串联</a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
</div>
<p>------------------------------</p>
<div id="demo23-2" v-on:click.capture="doThis">test capture</div>
<p>------------------------------</p>
<!-- 该指令只当事件是从事件绑定的元素本身触发时才触发回调 -->
<div id="demo23-3" v-on:click.self="div_click" style="display:inline-block; 200px; background-color:red;">
<button type="button" @click="stop_click">Button</button>
</div>
<button type="button" @click.once="once_click">Onceclick</button>
<p>------------------------------</p>
<div id="demo24-4">
<!-- Enter -->
<input v-on:keyup.13="doThis">
<input type="text" @keyup.enter="enter_click" placeholder="enter_click">
<!-- Alt + C -->
<input @keyup.alt.67="doThis">
<!-- Ctrl + Click -->
<div @click.ctrl="doThis">doThis</div>
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="doThis">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="doThis">B</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="doThis">C</button>
</div>
</section>
</template>
<script>
export default {
data() {
return {
name: "Vue.js"
};
},
methods: {
doThis: function() {
alert("Hello " + name + " ！");
},
div_click() {
console.log("div click");
},
stop_click() {
console.log("stop click");
},
form_submit() {
console.log("form submit");
},
enter_click() {
console.log("enter click");
},
once_click() {
console.log("once click");
}
}
};
</script>
https://www.jianshu.com/p/60135bb32ebb vue常用修饰符