vue组件化开发

组件化开发介绍

• 1.组件本质：一个自定义的标签

  • 普通标签：只有html结构

  • 组件：有html结构，css样式，js业务逻辑

• 2.组件作用：复用

  • 把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

  • ==一个组件相当于一个vue实例

     

    组件三个组成部分

    组件 == .vue文件(代码) == vue实例 (内存中) == 页面盒子(html+css+js一起) == 自定义html标签

    一个组件(.vue文件)由三个标签组成

    1. <template>标签,这里写组件的html结构

    注意点： 一个template只能有一个子元素，vue会自动把<template>里面的根元素作为当前组件(vue实例)的挂载点

    1. <script>标签，这里写组件的js代码

    注意点： 以前vue实例的代码写在 export default { } 里面。 它的本质是一个ES6模块化语法，作用就是让组件可以实现复用（导入导出到其他组件）

    注意点 : 组件里面的data必须是一个函数， 这个函数返回值就是之前vue实例的data对象

    原因： 组件基础 — Vue.js

    1. <style>标签，这里写组件的css代码

  • 为什么组件中的data必须是一个函数呢？

    • 风格指南 — Vue.js

  • 1.单文件组件 ： 把每一个组件放到一个独立的文件里

    • 好处：(1)便于维护 (2)便于复用

      • 之前的学习中，当一个页面非常复杂的时候，我们需要把所有的结构都写在一个html中，非常的不便于维护

      • vue提供了一个专业的工具来帮我们将每一个组件放到一个独立的文件中管理

  • 2.组件文件的后缀名是.vue文件

  • 3.这个.vue文件主要由三个部分组成

    • template

      • 这里写组件的HTML结构模板

    • script

      • 这里写组件的js业务逻辑。组件中的data、methods、计算属性，声明周期钩子等都写在这里

    • style

      • 这里写组件的css样式

  • 4.小提示 ： 快速生成组件三大部分的快捷键:<vue>