后端开发教程 - Java、Spring Boot 实战 - msg200.com
初学者 Vue.js 实践（第 3 部分）
简单的 if-else
v-if 和 v-show
开发工具
结论
欢迎回来！上次我们讲解了监听第一个用户事件以及响应这些事件的方法。今天你将学习指令和条件渲染。
简单的 if-else
无论使用哪种框架，条件渲染都是任何程序员都掌握的最重要的工具之一。根据条件或值显示或隐藏应用程序部分的功能是学习条件渲染以及 Vue指令 的绝佳起点。
我们将继续在之前的示例上进行构建。如果您忘记了或者正在赶上进度，以下是我们目前所掌握的内容：
<html>
<head>
<title>Vue 101</title>
</head>
<body>
<h1>Hello!</h1>
<div id="app">
<p>My local property: {{ myLocalProperty }}</p>
<hr>
<button @click="buttonClicked">Click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
myLocalProperty: 'Im a local property value'
},
methods: {
buttonClicked() {
const newText = 'The new value is: ' + Math.floor( Math.random() * 100 );
this.myLocalProperty = newText;
}
}
});
</script>
</body>
</html>
到目前为止，我们已经成功地将本地属性输出到我们的应用程序中，并且还监听用户在一个简单按钮上的点击。
让我们更进一步了解我们的条件渲染。
让我们改变按钮点击，以便它们像我们一直在做的那样生成一个随机数，但不是输出一个连接的字符串，而是切换显示几个<p>元素的结果。
这将需要一些重构，所以首先让我们改变我们的buttonClicked方法来只计算这个新数字，我们将它存储在一个名为的新属性上randomNumber。
<script>
const app = new Vue({
el: '#app',
data: {
myLocalProperty: 'Im a local property value',
randomNumber: 0 // 1
},
methods: {
buttonClicked() {
this.randomNumber = Math.floor(Math.random() * 100); // 2
}
}
});
</script>
让我们快速看一下。
- 我们添加了一个新的本地属性
randomNumber，默认值为 0。 - 我们删除了旧代码，不再使用前一个字符串上的随机值，而是将其暂时存储在我们的
randomNumberprop 中。
我们希望根据计算结果显示/隐藏内容randomNumber，因此我们添加两个新<p>元素。一个仅在大于或等于 50 时显示。randomNumber另一个在小于 50 时显示。
<div id="app">
<p>My local property: {{ myLocalProperty }}</p>
<hr>
<button @click="buttonClicked">Click me</button>
<hr>
<!-- 1 -->
<p v-if="randomNumber >= 50">randomNumber is >= 50!</p>
<!-- 2 -->
<p v-else>Sorry, randomNumber is only <b>{{ randomNumber }}</b></p>
</div>
我们添加了一个<hr>用于区分清晰和分离的元素，然后是两个<p>元素。
让我们详细看看每个元素。
首先，v-if="randomNumber >= 50"。所以，v-if是一个 Vue指令。不要太纠结于这个术语的定义，它只是意味着它是一个“特殊”的值，我们可以将它放在 Vue 知道如何读取和解释的 HTML 元素中。事实上，你之前已经使用过指令了。还记得v-on:click和 吗@click？它们也是指令！
抛开理论不谈，v-if它告诉 Vue仅当我们在元素内部声明的条件为true时才显示此元素。在本例中，“Vue：仅当大于或等于 50 时才显示此<p>元素”。randomNumber
其次，只要有v-if指令，就可以有else分支。但需要注意的是， else 分支v-else 仅v-if适用于紧跟在包含（或第三个 option ）的元素之后的元素v-else-if。正如你对任何 if - else 语句的预期，包含 的元素将在第一个分支不成立v-else的任何其他分支上渲染。非此即彼。
继续刷新你的页面index.html，然后点击按钮几次。你会看到<p>标签会根据 的值进行响应式渲染randomNumber。
v-if 和 v-show
如果你好奇地打开开发工具，点击鼠标时会注意到一件非常重要的事情。它v-if不是一个display: block/hiddenCSS 开关，而是在条件值发生变化时渲染或销毁元素。如果你想要一个可见性切换指令，那就先试试切换它，v-if看看v-show会发生什么！
v-else 你可能会注意到，包含声明语句的块不再显示。这是因为v-show是一个独行侠，只能单独工作。那么使用 有什么好处呢v-show？
使用时可能需要考虑性能成本，v-if因为 Vue 必须重新渲染 DOM（不用担心，它非常智能地知道需要添加/删除哪些部分），但这比应用/删除 cssdisplay属性更为繁琐。
底线：如果你只需要在应用中切换几次小/中型部分，例如菜单栏，v-if通常就可以了。但是，如果你要切换标签页或页面的大块内容，那么v-show性能方面可能更便宜，因为你的标记不必每次都重写。
（PS：在我们继续之前，请将指令设置回，v-if否则您将收到控制台错误，因为下面v-else它是未配对的。）
开发工具
如果您希望知道一种方法来找出哪个值在randomNumber我们的>= 50条件下被随机化，而不必<p>使用我们的信任在标签内呈现它，{{ }}那么 Vue 有一个很棒的工具可以完成这项工作。
继续安装Chrome Vue Devtools或Firefox Vue Devtools。
由于有些人可能使用该file://协议直接在浏览器上打开文件，如果您在 Chrome 中没有看到该扩展程序正常工作，请首先按照以下说明操作：
"To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel."
Right-click the Vue icon on the extensions toolbar, click on manage extensions and then toggle the allow access switch.
将它们添加到您最喜欢的浏览器中后，继续打开它们（通过“检查”或通过浏览器菜单打开您的开发工具，然后导航到开发窗格上的“Vue”选项卡），index.html您会注意到有很多好东西可以玩。
您应该看到的屏幕如下所示：
您会注意到右上角有一个带有一些图标的工具栏，这些图标是我们查看Vuex时会看到的，您现在可以放心地忽略它们。
然而，此屏幕中最重要的是组件树。开发工具将允许您检查为页面创建的每个组件、其属性（数据），以及稍后在状态管理中查看它们如何与页面交互。（如果现在看不懂，也不用担心）。
单击该<Root>组件，您将看到以下内容：
注意我们的两个本地属性，myLocalProperty和randomNumber。
单击你的<button>几次，看看开发者工具如何通过显示randomNumber值的变化来响应。
现在，这看起来可能不是特别令人印象深刻，但是当我们开始构建现实世界的应用程序，甚至在您的实际工作项目中，这个工具将成为您的第一信息来源，所以一定要花一些时间来玩它！
例如，使用本地存储的一个巧妙之处在于，您可以手动修改值来测试应用程序的不同状态。将鼠标悬停在要修改的属性上，您将看到一个编辑按钮，以及（如果是数字属性）一个 + 和 - 按钮来增加或减少值。
结论
我们已经讲解了设置、事件、属性和条件渲染等基础知识，现在你就可以开始创建一些真正有趣且响应式的应用程序了。然而，这仅仅是 Vue 强大功能的冰山一角，接下来的内容只会更加精彩有趣。
敬请期待第 4 部分！
文章来源：https://dev.to/marinamosti/hands-on-vue-for-beginners-part-3-2pd6