<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修饰符</title>
<style>
*{margin: 0;padding: 0;}
body{padding-left: 10px;}
h1{color: red}
h4{color: #000000}
p{margin-top: 10px}
</style>
<script src='vue.js'></script>
</head>
<body>
<div id='app'>
<h1>一、v-model的修饰符</h1>
<h4>.lazy</h4>
<input type="text" v-model.lazy='input_lazy'>
<br>
<p>input_lazy:{{input_lazy}}</p>
<p>.lazy 当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化<br>
而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。<br>即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。
</p>
<h4>.number</h4>
该修饰符用来将输入内容自动转换成数值。<br>
<input type="text" v-model.number='input_number'>
<p>input_number:{{input_number}}</p>
<p>.number 当开始输入数字时，属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符，属性值将不再变化。<br>
而当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，所以属性值将实时更新成相同的字符串。<br>
即使后面输入数字，也将被视作字符串。</p>
<h4>.trim</h4>
该修饰符用来自动过滤字符串前后的空字符。<br>
<input type="text" v-model.trim='input_trim'>
<p>input_trim:{{input_trim}}</p>
<p>.trim Vue会自动过滤掉前后的多个空格，最终属性值是前后没有空字符的字符串。</p>
<h1>二、v-on的修饰符</h1>
绑定的事件修饰符可以改变事件的触发方式。<br>
<h4>.stop</h4>
<p>该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法</p>
<div @click.stop='div_click'>
<button @click.stop='stop_click'>StopPropagation</button>
</div>
<p>.stop: <span >{{xsf}}</span></p>
<p>.stop 按照事件冒泡原理，点击按钮时，从当前触发的元素开始，沿着它的父元素一直到根元素，都会依次触发 click 事件。<br>但是应用了 .stop 修饰符后，将只会触发当前元素的 click 事件，并阻止事件向上冒泡。</p>
<h4>.prevent</h4>
该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法<br>
<form @submit.prevent='form_submit'>
<button type="submit">preventDefault</button>
</form>
<p>.prevent: <span v-html='xsf1'></span></p>
<p>.prevent 当点击提交按钮时，会触发绑定的事件，并且阻止表单提交并刷新当前页面的默认行为。</p>
<h4>.self</h4>
该指令只当事件是从事件绑定的元素本身触发时才触发回调 只当事件在该元素本身（而不是子元素）触发时触发回调<br>
<div @click.self='div_click' style="display:inline-block; 80px; background-color:red;">
<button @click='stop_click'>self</button>
</div>
<p>.self: <span>{{xsf}}</span></p>
<p>因为 div_click 事件被修饰符绑定，只有在直接点击到父元素 div ，即红色区域内，事件才会被触发。<br>
即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。</p>
<h4>.once</h4>
该修饰符表示绑定的事件只会被触发一次<br>
<button @click.once='once_click'>once</button>
<p>once: <span>{{xsf2}}</span></p>
<p>.once 多次点击按钮。只有在第一次点击时，事件才会触发。</p>
<h1>键值修饰符</h1>
该修饰符可以用来监听键盘事件<br>
通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听<br>
<input type="text" @keyup.enter="enter_click" />
<p>keygen: <span>{{xsf3}}</span></p>
也可以自定义按键名称<br>
<input type="text" @keyup.ent='ent_click' />
<p>自定义按键名称：<span>{{ xsf4 }}</span></p>
</div>
<script>
Vue.config.keyCodes.ent = 13;
var vm = new Vue({
el: "#app",
data: {
input_lazy : "",
input_number : "",
input_trim: "",
xsf: "",
xsf1: "",
xsf2: 0,
xsf3: "",
xsf4: "",
},
methods: {
div_click: function(){
this.xsf = 'div_click'
},
stop_click: function(){
this.xsf = 'stop_click'
},
form_submit: function(){
this.xsf1 = "阻止默认行为成功"
},
once_click: function(){
this.xsf2+=1
},
enter_click: function (ev) {
this.xsf3 = "你按的是回车"
},
ent_click: function(){
this.xsf4 = '你按的是自定义按键'
}
}
})
</script>
</body>
</html>