最近，我开始学习vuejs，本文是我学习时一系列笔记的一部分。在此中，我将介绍如何在使用VUEJS时在HTML中显示值。另外，我将介绍如何控制HTML属性。
初始申请
对于启动应用程序，我将使用上一篇文章中的简单应用程序。
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>Hello world!</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// script.js
Vue.createApp({
data() {
return {
message: "Hello world"
}
}
}).mount("#app")
我不会详细介绍上述代码，因为它在上一篇文章中涵盖了上述代码。我唯一要注意的是，它使用CDN来加载VueJS库。另外，在应用程序数据中，有一个称为消息的变量，而HTML中包含文本的硬编码字符串！
。在HTML中显示值
使用VUEJS在HTML中显示值时，您需要做的就是将表达式放置在双卷发支架（{{ EXPRESSION }}）的内部以及打开和关闭HTML标签之间。您可能会注意到我使用了术语表达式。我这样说的原因是因为您可以在卷曲支架之间几乎放置任何有效的JavaScript表达。
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{ "Hello world" }}</div>
<div>{{ 1 + 3 }}</div>
<div>{{ Math.round(3 + Math.random() * 5) }}</div>
<div>{{ (() => "Function result")() }}</div>
<div>{{ true ? "true expression" : "false expression" }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
在上面的代码示例中，显示了不同的硬编码值。如您所见，有一个字符串，数字，数学功能的结果，甚至是自我启动功能。这使我回到了我上面使用的另一个术语。几乎所有有效的JavaScript表达式。只要结果是一定的值，就可以将其放在卷曲括号内。您可以放置像变量分配之类的东西。
通常，您不想仅在HTML中显示一些硬编码值。您将拥有一些可能要显示的应用程序变量。这是非常相似的方式。您需要做的就是在相同的卷发支架之间使用一个变量名。
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
应用程序变量也可以在HTML内部的表达式中使用。
显示复杂的结构
并非所有值都是原始人。也有数组和对象。如果您尝试显示这些内容，Vue将尝试将它们串起并这样显示。如果您选择渲染一个包含数字一到三的数组，则结果将为[1，2，3]。
显示方法结果
可能需要运行一些逻辑并在HTML中显示其结果。该逻辑不应在卷曲支架之间的HTML中。这就是为什么在初始化应用程序时，在初始化对象内部的应用程序时，您可以添加包含所有方法的方法属性。然后，只要使用他们的名字并在双卷发支架之间调用它们，就可以显示其结果。
// script.js
Vue.createApp({
data() {
return {
exampleName: "John",
}
},
methods: {
getMessage: () => "Hello method",
getNameGreeting: function(){ return `Hello ${this.exampleName}` }
}
}).mount("#app")
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{getMessage()}}</div>
<div>{{getNameGreeting()}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
您可能会在上面的示例中注意到getName -Greeting方法使用此关键字访问数据值。在应用程序构建期间，VUEJS可以使用它访问应用程序数据。要注意的重要一点是，如果要访问数据，则不能将方法定义为匿名函数。
控制HTML属性
通常，您可能需要使用一些应用程序数据来控制HTML属性。最简单的示例是设置链接HREF属性。在这种情况下，您可以使用双卷发支架。但是，Vuejs确实给我们的是可用于此的特殊属性。在这种情况下，这是一个v绑定属性，然后添加由Colon分隔的HTML属性名称。传递给它的值是引号内放置的表达式或变量名称。
// script.js
Vue.createApp({
data() {
return {
linkValue: "https://www.google.com",
}
}).mount("#app")
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<a v-bind:href="linkValue">Google</a>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
本文中使用的代码可以在我的GitHub repository中找到。