Vue.js模板和插值

Vue.js uses a templating language that’s a superset of HTML.

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

Any HTML is a valid Vue.js template, and in addition to that, Vue.js provides two powerful things: interpolation and directives.

任何HTML都是有效的Vue.js模板，此外，Vue.js还提供了两个强大的功能： 插值和指令 。

This is a valid Vue.js template:

这是有效的Vue.js模板：

<span>Hello!</span>

This template can be put inside a Vue component declared explicitly:

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

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

or it can be put into a Single File Component:

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

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

This first example is very basic. The next step is making it output a piece of the component state, for example, a name.

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

This can be done using interpolation. First, we add some data to our component:

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

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

and then we can add it to our template using the double brackets syntax:

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

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

One interesting thing here. See how we just used name instead of this.data.name?

这里一件有趣的事。 看看我们如何使用name代替this.data.name ？

This is because Vue.js does some internal binding and lets the template use the property as if it was local. Pretty handy.

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

In a single file component, that would be:

在单个文件组件中，将是：

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

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

I used a regular function in my export. Why not an arrow function?

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

This is because in data we might need to access a method in our component instance, and we can’t do that if this is not bound to the component, so arrow functions usage is not possible.

这是因为在data我们可能需要访问组件实例中的方法，并且如果this方法未绑定到组件，则无法执行该操作，因此无法使用箭头函数。

We could use an arrow function, but then I would need to remember to switch to a regular function in case I use this. Better play it safe, I think.

我们可以使用箭头功能，但是如果我使用this ，那么我需要记住要切换到常规功能。 我认为最好安全一点。

Now, back to the interpolation.

现在，回到插值。

{{ name }} reminds of Mustache / Handlebars template interpolation, but it’s just a visual reminder.

{{ name }}使人联想到Moustache / Handlebars模板插值，但这只是视觉上的提醒。

While in those templating engines they are “dumb”, in Vue, you can do much more, it’s more flexible.

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

You can use any JavaScript expression inside your interpolations, but you’re limited to just one expression:

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

{{ name.reverse() }}

{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue provides access to some global objects inside templates, including Math and Date, so you can use them:

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

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

It’s best to avoid adding complex logic to templates, but the fact Vue allows it gives us more flexibility, especially when trying things out.

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

We can first try to put an expression in the template, and then move it to a computed property or method later on.

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

The value included in any interpolation will be updated upon a change of any of the data properties it relies on.

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

You can avoid this reactivity by using the v-once directive.

您可以通过使用v-once指令来避免这种React。

The result is always escaped, so you can’t have HTML in the output.

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

If you need to have an HTML snippet you need to use the v-html directive instead.

如果需要HTML片段，则需要使用v-html指令。

翻译自: https://flaviocopes.com/vue-templates/