Skip to content

Latest commit

 

History

History
149 lines (112 loc) · 3.39 KB

vue-single-file-components.md

File metadata and controls

149 lines (112 loc) · 3.39 KB

Vue 单文件组件

学习 Vue 如何帮你创建单个文件,这个文件负责处理与单个组件有关的所有内容,主要负责外观和行为。

Vue 组件可以像这样声明在 Javascript 文件(.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 使得这些非常容易,并且支持开箱即用。没有 webpack 设置,就不能使用 .vue 文件,因此,它们并不适用于仅在页面上使用 Vue 的程序,而不是完整的单页应用程序(SPA)。

由于单文件组件依赖 webpack ,我们可以放心使用现代的 Web 功能。

你的 CSS 可以用 SCSS 或者 Stylus 定义,模板可以用 Pug 构建,要实现这些,你要做的就是在 Vue 中声明你将要使用哪种预处理器语言。

这里是支持的预处理器:

  • TypeScript
  • SCSS
  • Sass
  • Less
  • PostCSS
  • Pug

我们可以使用现代 Javascript(ES6-7-8)而不用考虑目标浏览器,使用 Babel 集成及 ES 模块,因此我们也可以使用 import/export 语句。

我们可以使用 CSS Modules 来限定 CSS 的作用域。

谈到 CSS 作用域,单文件组件通过使用 <style scoped> 标签使其变得非常容易,而且也不会污染其它组件。

如果你省略 scoped ,你定义的 CSS 将会是全局的。但是加上 scoped ,Vue 会自动为组件添加一个特定的 class ,在程序中是唯一的,因此可以确保 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>

注意我是怎么在组件的 Javascript 中设置数据的:

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

其他常见的方式是:

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

或者:

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

不同之处在于它使用了箭头函数。在我们访问组件的方法时,箭头函数时可用的,但是因为我们需要用到 this ,并且这个属性没有绑定到使用箭头函数的组件。所以必须使用常规函数而不是箭头函数。

你可能也会看到:

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

这个使用了 CommonJS 语法,并且可以适用,尽管推荐使用 ES 模块语法,因为它是 Javascript 标准。