Vue.js单个文件组件

A Vue component can be declared in a JavaScript file (.js) like this:

可以在JavaScript文件( .js )中声明Vue组件，如下所示：

Vue.component('component-name', {
  /* options */
})

or also:

或者：

new Vue({
  /* options */
})

or it can be specified in a .vue file.

或者可以在.vue文件中指定。

The .vue file is pretty cool because it allows you to define

.vue文件非常酷，因为它允许您定义

• JavaScript logic
  JavaScript逻辑
• HTML code template
  HTML代码模板
• CSS styling
  CSS样式

all in just a single file, and as such it got the name of Single File Component.

所有这些都在一个文件中，因此它的名称为Single File Component 。

Here’s an example:

这是一个例子：

<template>
  <p>{{ hello }}</p>
</template>

<script>
export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}
</script>

<style scoped>
  p {
    color: blue;
  }
</style>

All of this is possible thanks to the use of webpack. The Vue CLI makes this very easy and supported out of the box. .vue files cannot be used without a webpack setup, and as such, they are not very suited to apps that just use Vue on a page without being a full-blown single-page app (SPA).

由于使用了webpack，所有这些都是可能的。 Vue CLI使得此操作非常容易，并且开箱即用。 .vue文件必须在没有webpack设置的情况下才能使用，因此，它们非常不适合仅在页面上使用Vue而又不是完整的单页应用程序(SPA)的应用程序。

Since Single File Components rely on Webpack, we get for free the ability to use modern Web features.

由于单个文件组件依赖Webpack，因此我们免费获得了使用现代Web功能的功能。

Your CSS can be defined using SCSS or Stylus, the template can be built using Pug, and all you need to do to make this happen is to declare to Vue which language preprocessor you are going to use.

您可以使用SCSS或Stylus定义CSS，可以使用Pug构建模板，而要做的就是向Vue声明要使用哪种语言预处理器。

The list of supported preprocessors include

支持的预处理器列表包括

• TypeScript

  打字稿

• SCSS
  SCSS
• Sass
  萨斯
• Less
  减
• PostCSS
  PostCSS
• Pug
  哈巴狗

We can use modern JavaScript (ES6-7-8) regardless of the target browser, using the Babel integration, and ES Modules too, so we can use import/export statements.

无论目标浏览器是什么，我们都可以使用现代JavaScript(ES6-7-8)，也可以使用Babel集成，还可以使用ES模块，因此我们可以使用import/export语句。

We can use CSS Modules to scope our CSS.

我们可以使用CSS模块来定义CSS范围。

Speaking of scoping CSS, Single File Components make it absolutely easy to write CSS that won’t leak to other components, by using <style scoped> tags.

说到对CSS进行范围界定，通过使用<style scoped>标记，单个文件组件使编写不会泄漏到其他组件CSS绝对容易。

If you omit scoped, the CSS you define will be global. But adding that, Vue adds automatically a specific class to the component, unique to your app, so the CSS is guaranteed to not leak out to other components.

如果省略scoped ，则定义CSS将是全局的。 但除此之外，Vue会自动向组件添加特定于您的应用程序的特定类，因此可以确保CSS不会泄漏到其他组件。

Maybe your JavaScript is huge because of some logic you need to take care of. What if you want to use a separate file for your JavaScript?

也许您JavaScript庞大，因为您需要注意一些逻辑。 如果要为JavaScript使用单独的文件怎么办？

You can use the src attribute to externalize it:

您可以使用src属性将其外部化：

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

This also works for your CSS:

这也适用于您CSS：

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Notice how I used

注意我如何使用

export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}

in the component’s JavaScript to set up the data.

在组件JavaScript中设置数据。

Other common ways you will see are

您将看到的其他常见方式是

export default {
  data: function() {
    return {
      name: 'Flavio'
    }
  }
}

(the above is equivalent to what we did before)

(以上等同于我们之前所做的工作)

or:

要么：

export default {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

this is different because it uses an arrow function. Arrow functions are fine until we need to access a component method, as we need to make use of this and such property is not bound to the component using arrow functions. So it’s mandatory to use regular functions rather than arrow functions.

这是不同的，因为它使用箭头功能。 在需要访问组件方法之前，箭头函数是可以的，因为我们需要利用this方法，并且使用箭头函数不会将此类属性绑定到组件。 因此，必须使用常规函数而不是箭头函数。

You might also see

您可能还会看到

module.exports = {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

this is using the CommonJS syntax, and works as well, although it’s recommended to use the ES Modules syntax, as that is a JavaScript standard.

尽管建议使用ES Modules语法，但这是使用CommonJS语法的，并且也可以正常工作，因为这是JavaScript标准。

翻译自: https://flaviocopes.com/vue-single-file-components/