Vue.js单个文件组件

了解Vue如何帮助您创建一个文件，该文件负责与单个组件有关的所有事情，集中负责外观和行为

可以在JavaScript文件中声明Vue组件（.js）像这样：

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

或者：

new Vue({
  /* options */
})

或者可以在.vue文件。

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

JavaScript逻辑
HTML代码模板
CSS样式

全部都放在一个文件中，因此它的名称为单个文件组件。

这是一个例子：

<template>
  <p>{{ hello }}</p>
</template>
<script>
export default {
data() {
return {
hello: ‘Hello World!’
}
}
}
</script>
<style scoped>
p {
color: blue;
}
</style>

由于使用了webpack，所有这些都是可能的。 Vue CLI使得此操作非常容易，并且开箱即用。.vue如果没有webpack设置，则无法使用这些文件，因此，它们非常不适合仅在页面上使用Vue而又不是完整的单页面应用程序（SPA）的应用程序。

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

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

支持的预处理器列表包括

打字稿
SCSS
萨斯
较少的
的CSS
哈巴狗

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

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

说到对CSS进行范围界定，单一文件组件使编写不会出现的CSS绝对容易泄露通过使用其他组件<style scoped>标签。

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

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

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

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

这也适用于您的CSS：

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

注意我如何使用

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

在组件的JavaScript中设置数据。

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

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

（以上等同于我们之前所做的工作）

或者：

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

这是不同的，因为它使用箭头功能。箭头函数很好，直到我们需要访问组件方法为止，因为我们需要使用this并且此类属性未使用箭头功能绑定到组件。所以必须使用常规的功能而不是箭头功能。

您可能还会看到

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

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

免费下载我的Vue手册

Vue.js单个文件组件

了解Vue如何帮助您创建一个文件，该文件负责与单个组件有关的所有事情，集中负责外观和行为

更多vue教程：