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

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

开发者学堂课程【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 来实现。

相关文章
|
8月前
|
前端开发 Python
前端知识(十七)——入口函数和特定函数的区别
前端知识(十七)——入口函数和特定函数的区别
71 0
|
存储 编译器 C语言
C++入门第二篇---类和对象【1】&&C++语法细节补充
C++入门第二篇---类和对象【1】&&C++语法细节补充
69 0
|
8月前
|
缓存 监控 Java
Hysterix的概念、作用、使用方法
Hysterix的概念、作用、使用方法
75 0
|
8月前
|
算法 编译器 C++
【C++ 函数 基本教程 第二篇 】深度剖析C++:作用域与函数查找机制
【C++ 函数 基本教程 第二篇 】深度剖析C++:作用域与函数查找机制
77 0
Threejs入门进阶实战案例(6):对象的通用属性/函数
Threejs入门进阶实战案例(6):对象的通用属性/函数
60 0
|
8月前
|
前端开发 数据处理
【前端学习】—多种方式实现数组拍平(十一)
【前端学习】—多种方式实现数组拍平(十一)
|
设计模式 NoSQL Java
如何用最简单的方式解释依赖注入?
如何用最简单的方式解释依赖注入?
84 0
|
JavaScript 前端开发
Dom实操(第二十二课)表格静态创建到动态创建的过程
Dom实操(第二十二课)表格静态创建到动态创建的过程
91 0
|
编译器 C语言
【C】结构体+自定义类型知识点大全(基础,进阶,简洁,全面)(一)
【C】结构体+自定义类型知识点大全(基础,进阶,简洁,全面)