组件-创建组件的方式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 定义全局组件的时候,组建名称使用了驼峰,命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用-链接;

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

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

相关文章
|
JavaScript 数据安全/隐私保护
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1431 0
|
1月前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
20 0
|
1月前
|
前端开发 JavaScript
uniapp 创建组件
uniapp 创建组件
uniapp 创建组件
|
1月前
|
存储 JavaScript 前端开发
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
128 0
|
11月前
|
移动开发 开发框架 JavaScript
什么是组件,以及前端各种框架组件的使用方法
什么是组件,以及前端各种框架组件的使用方法
192 1
|
算法 芯片 开发者
2.2工作空间及组件:组件配置演示|学习笔记
快速学习2.2工作空间及组件:组件配置演示
82 0
2.2工作空间及组件:组件配置演示|学习笔记
|
JavaScript 开发者
组件-创建组件的方式3|学习笔记
快速学习组件-创建组件的方式3
53 0
组件-创建组件的方式3|学习笔记
|
前端开发 开发者
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记
快速学习评论列表案例-将评论列表组件和评论项组件抽离为单独的组件
61 0
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记
|
XML 前端开发 JavaScript
创建组件的第一种方式并为组件传递 props 数据|学习笔记
快速学习创建组件的第一种方式并为组件传递 props 数据
97 0
创建组件的第一种方式并为组件传递 props 数据|学习笔记
|
JavaScript 开发者
组件-创建组件的方式2|学习笔记
快速学习组件-创建组件的方式2
63 0