先写一个例子
创建一个HelloWorld.html文件，开始写入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
title: 'Hello World'
}
}
})
</script>
</body>
</html>在浏览器运行此文件，可以看到Hello World成功显示出来。
v-if, v-show 指令
v-if的使用
用来判断是否加载html的DOM，v-if 的使用方法并不复杂，只需要挂在元素上即可，与之配套的有 v-else-if 和 v-else，这两个只能个 v-if 配套使用。
创建一个v-if.html文件，开始写入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-if="isShow">isShow 为 true，所以我要显示出来</div>
<div v-else>isShow 为 false，所以我要隐藏起来</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
isShow: true
}
}
})
</script>
</body>
</html>在浏览器运行此文件，可以看到isShow 为 true，所以我要显示出来。如果将 isShow 的值修改为 false，则显示出isShow 为 false，所以我要隐藏起来。
v-show的使用
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
创建一个v-show.html文件，开始写入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-show="isShow">isShow 为 true，所以我要显示出来</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
isShow: false
}
}
})
</script>
</body>
</html> 在浏览器运行此文件，可以看到页面一片空白什么都没有。但是，当打开浏览器调试界面按F12时，可以看到有以下代码出现：
<div style="display: none;">isShow 为 true，所以我要显示出来</div>由此可以看出，其实内容已经加载出来了，只是使用了 css 中的 display: none; 给隐藏了。
v-if 和 v-show 的区别
v-if在切换中将组件上的事件监听器和子组件销毁和重建。v-show调整了dispaly属性，可以使客户端操作更加流畅。v-show有更高的初始渲染开销，而v-if有更高的切换开销。
简单点理解就是：v-if被判定为假时，Vue不会做任何事情，而v-show不管为真假，Vue都会进行DOM渲染。
