携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

Vue组件化开发

• 组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体
  • 可提高功能的复用性与可维护性，更好地专注于业务逻辑
• 组件使用时为自定义HTML标签，通过组件名作为自定义标签名
• 组件基础
  • 本质上，组件是可复用的Vue实例，所以它们可与new Vue接收相同的选项，例如data、methods以及生命周期钩子等
  • 仅有的例外是像el这样根实例特有的选项（代表的是挂载元素，需要在根实例挂载到页面中）
  • 需学习的内容：
    • 组件命名规则
    • template选项
    • data选项
• 全局注册组件
  • 全局注册的组件在注册后可以用于任意实例或组件中
  • 注意：全局注册必须设置在根Vue实例创建之前
• 组件命名规则
  • 第一种命名规则：kebab-case:'my-component'
  • 第二种命名规则：PascalCase:'MyComponent'
  • 注意：无论采用哪种命名方式，在DOM中都只有kebab-case可以使用
• template选项
  • 用于设置组件的结构，最终被引入根实例或其他组件中
  • 注意：图中使用转义符进行换行处理。只能有一个根元素，不能有多个根元素存在，比如图中只能有一个div标签。标签中可以使用插值表达式和指令操作
• data选项
  • 用于存储组件的数据，与根实例不同，组件的data选项必须为函数，数据设置在返回值对象中
• 为什么data选项要采用函数形式设置？
  • 这种实现方式是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝，不相互影响。即在html结构中，多次使用该组件创建实例，单独改变某个组件实例的内容，不会相互影响

本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!