Vue.js Modifiers Chain - vue.js

Question

I am new in Vue.js. I am reading docs, and can't understand one moment...
https://v2.vuejs.org/v2/guide/events.html
Order matters when using modifiers because the relevant code is
generated in the same order. Therefore using #click.prevent.self will
prevent all clicks while #click.self.prevent will only prevent clicks
on the element itself.
I can't understand what's mean'Therefore using #click.prevent.self will prevent all clicks while #click.self.prevent will only prevent clicks on the element itself.' Can anybody give an example with prevent default actions and show difference...
for example with links (#click.prevent.self="fn" or #click.self.prevent="fn" difference)
I know about event phases (capture, target and bubbling).
For example it can be useful in Bubbling phase:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
.root {
width: 300px;
height: 300px;
background: green;
text-align: center;
color: white;
}
.parent {
width: 200px;
height: 200px;
background: red;
text-align: center;
color: white;
margin: 50px
}
.child {
width: 100px;
height: 100px;
background: blue;
margin: 50px;
text-align: center;
color: white;
}
<div id="app">
<div class="root" v-on:click="log('root')">root
<div class="parent" v-on:click.self.stop="log('parent')">Parent
<div class="child" v-on:click="log('child')">Child
</div>
</div>
</div>
</div>
<script type="text/javasctipt">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
log(message) {
alert(message);
console.log(message)
}
}
})
</script>
If i click on child i'll get output:
child
root
Bubblig doesn't stopped! But if i click on parent bubbling stopped! It's helpful!
But can anybody show me examples and difference if i'll use prevent and self modifiers (with links, checkboxes or may be with another elements) ?
Thanks for advance!

Answer 1

You can check this example:
https://jsfiddle.net/50wL7mdz/39994/
If you use #click.prevent.self, you can't click on anything. It prevents all click.
If you use #click.self.prevent, it only prevents when you click on <a> element, we can still click on choose file to upload file

Answer 2

Example illustrates difference in chain order
<div id="app">
<a href="https://stackoverflow.com" #click.self.prevent target="_blank">Stackofervlow!
<span :style="{ background: 'yellow', width: '100px', height: '100px' }">span</span>
</a>
</div>
new Vue({
el: '#app'
});
#click.self.prevent
If you click on span, stackoverflow will open.
If you click on a, stackoverflow will not open.
#click.prevent
If you click on span, stackoverflow will not open.
If you click on a, stackoverflow will not open.