Vue基础知识记录
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>
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"属性
v-show 不支持 <template> 元素，也不支持 v-else
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上
似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
|
尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
