组件-创建组件的方式1|学习笔记

简介: 快速学习组件-创建组件的方式1

开发者学堂课程【Vue.js 入门与实战:组件-创建组件的方式1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8174


组件-创建组件的方式1


内容介绍:

一、使用 Vue.extend 来创建全局的Vue组件

二、使用 Vue.component ('组件的名称',创建出来的组件模板对象)

三、总结

 

如果要使用组件,直接把组件的名称以 HTML 标签的形式引入到页面中即可。

 

一、使用 Vue.extend 来创建全局的 Vue 组件:

var com1=Vue.extend({  template: '

这是使用Vue.extend创建的组件

' //通过template属性,指定了组件要展示的HTML结构

 

二、使用 Vue.component ('组件的名称',创建出来的组件模板对象)

Vue.component ( ' myCom1',com1)

此时刷新,得到执行结果:

image.png

//如果要使用组件,直接,把组件额名称,以 HTML 标签的形式,引入到网页中,即可

我们要把模板对象注册为一个真正具有名称的一个组件,可以引用这种组件,可以利用条件形式。

 

三、总结

这就是创建组件的第一种方式,通过 vue.extend 来创建组件,这个流程分为两步:

1. 第一步:

直接调用 vue.extend 里面的配置对象,此时 component 就是组建展示的具体内容,这是 vue.extend 会返回一个组件的模板对象,然后再调用 Vue.component ,此时会把模板对象注册为一个真正具有名称的组件,之后在页面中可以直接引用这个名称。

2. 第二步:

如果使用 Vue.component 定义全局组件的时候,组建名称使用了驼峰,命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用-链接;

如果不使用驼峰,则直接拿名称来使用即可。

以上就是我们创建组件的第一种方式。

相关文章
|
3月前
|
监控 数据可视化 索引
四个组件配置说明
官方文档!!!!!!!!! 1.在Filebeat中配置info.log日志文件的路径,以及要将日志发送到Logstash的地址和端口,可以在Filebeat的配置文件 filebeat.yml中添加如下配置: Copy filebeat.inputs: - type: log paths: - /usr/logs/info.log fields: log_type: info output.logstash: hosts: ["localhost:5044"] 这里使用filebeat.inputs指定要监控的日志文件路径
49 5
|
4月前
|
开发框架 JavaScript 前端开发
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
|
4月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
236 1
|
4月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
114 0
|
6月前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
96 0
|
6月前
|
前端开发 JavaScript
uniapp 创建组件
uniapp 创建组件
uniapp 创建组件
|
移动开发 开发框架 JavaScript
什么是组件,以及前端各种框架组件的使用方法
什么是组件,以及前端各种框架组件的使用方法
451 1
|
JavaScript 开发者
组件-创建组件的方式3|学习笔记
快速学习组件-创建组件的方式3
组件-创建组件的方式3|学习笔记
|
前端开发 开发者
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记
快速学习评论列表案例-将评论列表组件和评论项组件抽离为单独的组件
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记
|
XML 前端开发 JavaScript
创建组件的第一种方式并为组件传递 props 数据|学习笔记
快速学习创建组件的第一种方式并为组件传递 props 数据
117 0
创建组件的第一种方式并为组件传递 props 数据|学习笔记