组件定义方式的复习|学习笔记

简介: 快速学习组件定义方式的复习

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

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


组件定义方式的复习

复习组件定义的方式

1.<script>

//定义组件的时候,如果要定义全局的组件,Vue.component(组件的名称,组件的模板对象)

只是在创建模版对象的时候,定义各不相同,例如:

<script>

//定义组件的时候,如果要定义全局的组件,Vue.component(组件的名称,{})

<script>

//定义组件的时候,如果要定义全局的组件,Vue.component(组件的名称,Vue.extend({}))

其实在本质上,定义的时候,都是通过 Vue.component 来定义。这也是最简单的定义方式。

2.<template>

</template>

<script>

//定义组件的时候,如果要定义全局的组件,Vue.component(组件的名称,Vue.extend({template: ‘’

}))

//通过对象字面量的形式,定义了一个 组件模板对象

3. var login = {

temlate:<h1>1234</h1>

}

//通过 Vua.component 把组件模型对象,注册为一个全局的Vue组件,同时,为这个组件起了一个名称,可以让我们通过标签形式,在页面中直接引入这个组件

//Vue.component(mylogin,login)

image.png

右键浏览,可以得到以上执行结果。没有报错。

以上是先定义一个组件模版对象,再吧组件模版对象通过 Vue.component 注册为一个全局的Vue组件既然可以定义为全局的,也可以定义为私有的。此时代码如下:

//创建Vue实例,得到 ViewModel

var vm =new Vue({

el: #app,

data: {}

components: {

//‘组件的名称’:组件的模板对象

//‘mylogin’:login

login

}

});

</script>

</body>

此时执行也可以得到正确的执行结果。

如此可以总结:

如果只想拿到一个组件模版对象,而并不想起名字,可以采用第一种简单的代码方式;如果想要既拿到一个模版对象,又拿到一个可以用标签来引用的组件,则组要通过 Vue.component 来实现。

相关文章
|
机器学习/深度学习 算法 数据库
KNN和SVM实现对LFW人像图像数据集的分类应用
KNN和SVM实现对LFW人像图像数据集的分类应用
291 0
DDR3L内存,12800S/12800R/12800L分别是什么意思?
DDR3L内存,12800S/12800R/12800L分别是什么意思?
1677 0
|
JavaScript
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
560 0
Vue子组件监听父组件的事件
|
安全 Linux 应用服务中间件
[笔记]CentOS7 vsftpd安装及配置使用
[笔记]CentOS7 vsftpd安装及配置使用
1059 0
|
6月前
|
安全 前端开发 Android开发
拥抱国产化:转转APP的鸿蒙NEXT端开发尝鲜之旅
本文将要分享的是转转APP在开发全新鸿蒙NEXT端所遇到的一些问题,对比了鸿蒙开发和 Android、iOS 的不同,总结了这次开发过程中的一些经验等等。希望能带给你启发。
158 0
|
关系型数据库 MySQL 数据库
卸载云服务器上的 MySQL 数据库
卸载云服务器上的 MySQL 数据库
514 0
|
机器学习/深度学习 人工智能
【AI大模型】深入Transformer架构:编码器部分的实现与解析(下)
【AI大模型】深入Transformer架构:编码器部分的实现与解析(下)
|
云安全 人工智能 安全
AI时代云安全新范式,阿里云安全能力全线升级!
AI时代,云安全面临着新的挑战,不仅要持续面对以往的传统问题,更需要全新理念落地于产品设计、技术演进、架构设计,才能实现效果、性能、和成本的最优解。
504 6
|
NoSQL 网络协议 Unix
1)Redis 属于单线程还是多线程?不同版本之间有什么区别?
1)Redis 属于单线程还是多线程?不同版本之间有什么区别?
298 2