Vue组件

学前端真的泰裤辣！！！

于 2023-05-12 20:35:51 发布

阅读量103

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_64344470/article/details/130649765

版权

组件化与模块化的不同
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

高内聚，低耦合：尽可能地将模块内部的联系降到最低，同时尽可能地提高模块内部的内聚度。

为什么组件中的data属性必须定义为一个方法，并返回一个对象？数据隔离（重点）

一、全局定义

<html>标签不区分大小写

在app中直接写标签名就可以了
component第一个参数是标签名，第二个extend()的变量名

在app中直接写标签名就可以了
第一个参数还是标签的名字，第二个参数是一个对象。对象中的是template变量

第一个参数：标签名
第二个参数：{template:id}对象

注意：在模板中只能有一个div，也就是说，只能在这个div的子级添加标签。而不能在平级添加其他标签

script默认的type类型是javascript类型的，一般默认就是此类型，所以可以省略
当我们把type类型改成x-template类型就可以使用它下的标签了

私有定义同样也是放在单独得el下，与data和methods同级同样私有定义只能在id为当前得标签中使用，别得都无法使用

组件同Vue实例一样，同样拥有Vue中得各个方法，但有一些用法不同于实例化
data需要将其写为一个方法，并且把值写入对象返回出去
不能用html已有得标签名，关键字。因为html会将标签解析为小写，所以不能用大写

同时：可以用v-if来控制一个模板得删除：可以同时触发销毁前和销毁后

在父组件在写入component标签，在标签中写入:is属性=三目运算符来实现切换

用transition标签包裹模板，并为他得style设置六种状态（多用于切换）

关注