如何在 Vue 中使用模板

Posted on by

在 Vue 中，模板是我们创建可重用组件的主要方式。我们可以使用模板来获取数据，并将其转化为用户可以看到的屏幕上的真实元素。在本文中，我们将介绍模板在 Vue 中的工作方式，以及一些您可能不知道的关于模板的内容。

在 Vue 中创建模板#

每个 Vue.vue文件都必须有一个<template>标签。<template>标签本身只是用于构建我们的组件的所有 HTML 的容器。当一个.vue文件被渲染时，所有<template>的标签都会被移除。Vue 中一个非常基本的模板如下所示：

<template>
    <h2></h2>
    <p>Welcome to my website!</p>
</template>
<script>
    export default {
        data() {
            return {
                title: "Hello!"
            }
        }
    }
</script>

在上面的示例中，我们有一个<template>部分，其中包含该组件的所有 HTML。其中，我们使用花括号来识别将来自我们的 Javascript 实例的内容。所以当我们说Vue 会title在我们的 Vuedata()或 props 中寻找，并使用它。因此，在本例中，将呈现为“Hello！” .

至少使用一个标签

<template>标签中至少要有一个 HTML 标签，否则 Vue 会抛出错误。如果我们愿意，我们也可以<template>在标签中使用标签。<template>

如何在 Vue 模板中使用 HTML#

有时我们想在模板中使用从 Javascript 生成的 HTML。如果我们对 HTML 使用相同的方法，则 HTML 将完全呈现为字符串。因此，我们必须使用v-bind属性。下面的示例将从 中获取 HTML title，并将其呈现在我们的<h2>标签中：

<template>
    <h2 v-html="title"></h2>
    <p>Welcome to my website!</p>
</template>
<script>
    export default {
        data() {
            return {
                title: "<span>Hello!</span>"
            }
        }
    }
</script>

小心使用 HTML

由于v-bind可能被恶意使用，请确保您使用的 HTML 是由您生成的，而不是由用户生成的。

如何在 Vue 模板中使用 Props#

Props 的工作方式与 Vue 中的完全相同data()。如果你有来自道具的信息，你仍然可以在你的<template>. 因此，您可以直接在模板中引用道具。

例如，如果我们期望title来自一个名为 的道具title，我们的代码将如下所示：

<template>
    <h2> </h2>
    <p>Welcome to my website!</p>
</template>
<script>
    export default {
        props: [ 'title' ]
    }
</script>

在 Vue 模板中使用 Javascript 表达式#

我们也可以直接在 Vue 中使用 Javascript 表达式，使用花括号表示法。注意：我们只能在大括号中使用一个表达式，因此请坚持使用ternary操作或函数。诸如if()声明之类的东西将不起作用。

这是一个三元运算符的示例，如果title设置为 54，则返回“Hi”，否则返回“Bye”。

<template>

</template>
<script>
    export default {
        data() {
            return {
                title: 53
            }
        }
    }
</script>

我们也可以通过这种方式运行 Javascript 中的函数。methods如果它们在我们的 Javascript 部分中，则可以调用这样的函数：

<template>

</template>
<script>
    export default {
        data() {
            return {
                date: "11 Feb"
            }
        },
        methods: {
            myFunction: function(date) {
                return date;
            }
        }
    }
</script>

在Vue中将多个属性绑定到模板#

有时，我们希望将数据绑定到属性。但是，如果我们有一个名为 的数据属性title，并且我们编写了< input value="title" />，它就行不通了！

相反，我们必须编写<input v-bind:value="title" />，以便 Vue 知道它title来自我们的 Javascript。我们可以将其缩短为:value="title". 我们的最终代码将如下所示：

<template>
    <input :value="title" />
</template>
<script>
    export default {
        data() {
            return {
                title: "Some Value"
            }
        }
    }
</script>

在 Vue 模板属性中使用 Javascript

单行 Javascript 也可以使用:attribute语法在 Vue 模板属性中使用。例如，如果设置为粗体input-one，下面的代码将显示为类。否则会显示。typeinput-two

<template>
    <input :class="(type == 'bold') ? 'input-one' : 'input-two'" />
</template>
<script>
    export default {
        data() {
            return {
                type: "bold"
            }
        }
    }
</script>

Vue 模板中的动态属性#

也可以使用 .vue 动态生成 Vue 中的属性:[]。我们放在方括号中的任何内容都将被评估为 Javascript。例如，如果我们编写以下代码：

<template>
    <input :[someAttribute]="someValue" />
</template>
<script>
    export default {
        data() {
            return {
                someAttribute: 'value',
                someValue: 'My Value'
            }
        }
    }
</script>

然后我们生成的 HTML 将是<input value="My Value" />. 同样，我们可以计算属性本身。在下面的示例中，生成的 HTML 看起来像<input data-value="My Value" />.

<template>
    <input :['data-' + someAttribute]="someValue" />
</template>
<script>
    export default {
        data() {
            return {
                someAttribute: 'value',
                someValue: 'My Value'
            }
        }
    }
</script>

在Vue中将多个属性绑定到HTML#

有时，我们希望将多个属性绑定到一个 HTML 标签，所有这些属性都存在于我们的 Javascript 中。例如，输入可能具有值、类型、id 和名称，所有这些都包含在我们的 Javascript 中。在这种情况下，我们可以使用v-bind, 自动将所有这些属性直接绑定到输入：

<template>
    <input v-bind="allTheAttributes" />
</template>
<script>
    export default {
        data() {
            return {
                allTheAttributes: {
                    value: 'Some Value',
                    name: 'main-input',
                    id: 'main-input',
                    type: 'text'
                }
            }
        }
    }
</script>

这段代码将被 Vue 翻译成以下内容：

    <input type="text" name="main-input" id="main-input" value="Some Value">

结论#

总之，Vue 模板是一种将数据和 Javascript 直接添加到 HTML 中的强大方法，因此您可以反应性地向用户显示它。在本文中，我们介绍了：

  • 如何在 Vue 中使用带有大括号的模板
  • 如何将 HTML 添加到 Vue 模板中
  • Vue中如何将多个属性绑定到一个HTML标签
  • 如何在 Vue 模板中动态创建属性名称
  • 如何将 Javascript 表达式直接添加到 Vue 模板中

更多 Vue 内容，请点击这里。

推荐阅读：