Vue.js模板和插值

Vue.js使用的模板语言是HTML的超集。任何HTML都是有效的Vue.js模板,除此之外,Vue.js还提供了两个强大的功能:插值和指令。

Vue.js使用的模板语言是HTML的超集。

任何HTML都是有效的Vue.js模板,除此之外,Vue.js还提供了两个强大的功能:插补指令

这是有效的Vue.js模板:

<span>Hello!</span>

可以将该模板放入显式声明的Vue组件中:

new Vue({
  template: '<span>Hello!</span>'
})

或者可以将其放入单个文件组件

<template>
  <span>Hello!</span>
</template>

第一个示例非常基础。下一步是使其输出部分组件状态,例如名称。

这可以使用插值来完成。首先,我们向组件添加一些数据:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

然后我们可以使用双括号语法将其添加到模板中:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

这里一件有趣的事。看看我们刚刚用过的name代替this.data.name

这是因为Vue.js进行了一些内部绑定,并允许模板像使用本地属性一样使用该属性。很方便。

在单个文件组件中,将是:

<template>
  <span>Hello {{name}}!</span>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

我在导出中使用了常规函数。为什么不使用箭头功能?

这是因为data我们可能需要在组件实例中访问一个方法,如果this没有绑定到该组件,因此无法使用箭头功能。

我们可以使用箭头函数,但是那时候我需要记住要切换到常规函数,以防我使用this。我认为最好安全一点。

现在,回到插值。

{{ name }}让人想起Moustache / Handlebars模板插值,但这只是视觉上的提醒。

尽管在那些模板引擎中它们是“哑巴”,但在Vue中,您可以做更多的事情,它更加灵活。

您可以使用任何JavaScript表达式在插值中,但仅限于一个表达式:

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue提供对模板中某些全局对象的访问,包括Math和Date,因此您可以使用它们:

{{ Math.sqrt(16) * Math.random() }}

最好避免在模板中添加复杂的逻辑,但事实是Vue可以为我们提供更大的灵活性,尤其是在尝试时。

我们可以先尝试将表达式放入模板中,然后再将其移动到计算的属性或方法中。

任何插值中包含的值都将在其依赖的任何数据属性发生更改时进行更新。

您可以使用v-once指示。

结果总是被转义,因此输出中不会包含HTML。

如果您需要HTML代码段,则需要使用v-html指令代替。

免费下载我的Vue手册


更多vue教程: