02——认识vue单页面代码书写规范

单页面组件，其实本质就是一个网页，只不过在vue里叫做 组件（目前大概可以理解为用vue写的页面都是组件）
为什么叫组件: 因为在vue中，一个网页是由N多个组件组成的（组成页面的原件）

和以前一样, 一个组件包括的三个部分：即结构（html），样式（css），逻辑（js）

结构（html）

template标签里面必须有且只能有一个根标签 （这是组件的规范）
这里就是写html结构的地方 也就是视图（view）为什么叫视图：最终被用户看到的东西，就是视图而其他的 model数据层 和 vm层都是看不见的（仅为理解）

<template>
  <div>
    <!-- view 视图层  这里是你的html代码 -->
  </div>
</template>

逻辑（js）

export  default ：这个的意思是 导出 默认（这个必须写）为什么要这样写：因为组件最终是要被其他页面来导入使用的，既然要被导入，那么他自己就先得被导出，如果不导出，别的页面就导入不了（从a房子出来 才能进入b房子）至于js里面导出写什么，这个后面再说，这里先看下大体的结构

<script>
export default {  //默认导出


    // 这里是你的js代码

}
</script>

样式（css）

只有一个要说的，因为css是没有作用域的，本身就是全局的，这样就会造成写的样式可能会冲突，为解决样式冲突的问题，vue中规定在style标签里面加上 scoped 代表样式只作用域本组件而不影响其他的组件。

<style scoped>
/* 这里是你的css代码 */
</style>

一个单页示例：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>