.vue文件解析

.vue文件简述

.vue文件相当于一个组件，通常由三部分组成，这三部分包含了组件的html-js-css集合，有利于文件的整合

1. <template>标签
2. <script>标签
3. <style>标签

<template>标签：

首先，template下必须有唯一的子节点；而template则是html5标签中的一个，简单的说，<template>标签不会被浏览器解析渲染，只是用来存储将来要在浏览器渲染的内容

template标签介绍

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<style>标签

<style>标签有两个属性：module和scoped。表示css模块和css作用域，通常会写上scoped，表示该css判断只对当前组件及子组件生效

<script>标签

ES6语法。import和export分别表示引入模块和导出模块，每个文件中import和export可以有多个，但是export default只能有一个。export default中包含所有想要开放的数据和接口