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教程: