v-on的事件修饰符
v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
-
.stop阻止冒泡。本质是调用 event.stopPropagation()。 -
.prevent阻止默认事件。本质是调用 event.preventDefault()。 -
.capture添加事件监听器时，使用 capture 模式。 -
.self只有当事件是从侦听器绑定的元素本身触发时，才触发回调。 -
`
.{keyCode | keyAlias}只当事件是从侦听器绑定的元素本身触发时，才触发回调。 -
`
.native监听组件根元素的原生事件。 - 阻止默认行为：
- <!-- 阻止表单中submit的默认事件 -->
- <form @submit.prevent action="http://www.baidu.com">
- <!-- 执行自定义的click事件 -->
- <input type="submit" @click="mySubmit" value="表单提交">
- </form>
插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。
v-text是纯文本，而v-html会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
v-cloak
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过v-cloak隐藏元素，当加载完毕后，再显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
/*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: ‘#div1‘,
data: {
name: ‘hello1 smyhvae22‘
}
});
</script>
</html>
v-if和v-show的区别：
v-if和v-show都能够实现对一个元素的隐藏和显示操作。但是v-if是添加/删除DOM元素，而v-show是在这个元素上添加/移除style="display:none"属性