单文件组件
在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。
Vue单文件组件（.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板html、逻辑js和样式css封装在单个文件中
<template>...html content...</template>
<script>
...js content...
export default{
name:"mytemp"
}
</script>
<style>...css content...</style>
-
<template>可以包含任何合法的 HTML，以及一些 Vue 特定的语法。
-
<script>包含组件中所有的非显示逻辑，最重要的是，<script>标签需要默认导出一个 JS 对象。该对象是你在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含 template 模板的对象会被处理和转换成为一个有 render() 函数的 Vue 组件。
-
<style>组件中定义CSS样式 ，如果你添加了scoped属性（如<style scoped>），表示此样式只在当前组件中生效，组件样式全局通用就不用scoped
加载组件
-
引入组件：在script 中
import xxx from 'xxx' -
挂载组件：在script 中的
export default components:{xxx} -
显示组件：在template中
<xxx/>
如下加载一个myTemp.vue组件
<template>
<my-temp/> // 显示组件 <myTemp>也可以，不过更建议前一种写法
</template>
<script>
import myTemp from './components/myTemp.vue' // 导入组件
export default{
components:{
myTemp // 挂载组件
}
}
</script>
<style>...css content...</style>
组件生命周期
每个组件在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。8个生命周期函数：
-
创建时：beforeCreate、created
-
渲染时：beforeMount、mounted（网络请求一般放在mounted中）
-
更新时：beforeUpdate、updated
-
卸载时：beforeUnmount（卸载之前，把消耗性能的处理都删掉）、unmounted