vue（二）vue组件-JZTXT

单文件组件

在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，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