Vue 入门 --- 单文件组件

一、单文件组件 .vue 文件

Vue 自定义了一种 .vue 为后缀名的文件格式，可以把 html, css, js 写到一个 .vue 文件中，从而实现了对一个组件的封装，

一个 .vue 文件就是一个单独的组件。浏览器根本不认识 .vue文件，所以需要对该文件进行解析。在 webpack 构建中，需要安装 vue-loader 对 .vue 文件进行解析。在 sumlime 编辑器中，我们书写 .vue 文件，可以安装 vue syntax highlight 插件，增加对文件的支持。

现在来看一下 .vue 文件长啥样。

在《Vue 入门 --- 安装与构建》#111 中我们用 vue-cli 重新构建一个 vue 项目，在新建项目的过程中，命令行中会询问你几个问题，当询问是否安装 vue-router 时，这里先选择否。项目完成后，我们看到 src 目录下有一个componet 目录，里面有一个 Hello.vue 文件，这里对 template 里面的内容做了一些删减。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

可以看到，在 .vue 文件中:

template 中都是 html 代码，它定义了在页面中显示的内容，由于里面还有变量，也可以说定义了一个模版
script 中都是 JavaScript 代码，它定义这个组件中所需要的数据和及其操作
style 里面是 css 样式，定义这个组件的样式，scoped 表明这里写的 css 样式只适用于该组件，可以限定样式的作用域。

二、组件需要的数据

在不使用 .vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动 vuejs 项目，Vue 构造函数接受一个对象，这个对象有一些配置属性 el, data, component, template 等，从而对整个 Application 提供支持。

new Vue({
  el: '#app',
  data: {
        msg: "hello Vue"     
  }  
})

在 .vue 文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象，它们都是定义组件所需要的数据 data, 以及操作数据的方法等，更为全面的一个 export default 对象，有methods, data, computed, 这时可以看到, 这个对象和 new Vue() 构造函数中接受的对象是一模一样的。但要注意 data 的书写方式不同。在 .vue 组件, data 必须是一个函数，它 return一个对象，这个返回的对象的数据，供组件使用。

Reference

Vue 单文件组件

felix-cao / Blog