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

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

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

相关文章
|
5月前
|
前端开发 Python
前端知识(十七)——入口函数和特定函数的区别
前端知识(十七)——入口函数和特定函数的区别
32 0
|
2月前
|
安全 编译器 C++
【C/C++ 基础知识 】 C++ 初始化大全:选择最适合您需求的方式
【C/C++ 基础知识 】 C++ 初始化大全:选择最适合您需求的方式
82 2
|
10月前
Threejs入门进阶实战案例(6):对象的通用属性/函数
Threejs入门进阶实战案例(6):对象的通用属性/函数
30 0
|
5月前
|
前端开发 数据处理
【前端学习】—多种方式实现数组拍平(十一)
【前端学习】—多种方式实现数组拍平(十一)
|
7月前
|
设计模式 安全 C++
C++进阶 特殊类的设计
C++进阶 特殊类的设计
23 0
|
8月前
|
缓存 JavaScript 前端开发
【Vue】模板语法,插值、指令、过滤器、计算属性及监听属性(内含面试题及毕设等实用案例)上篇
Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML,并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。 在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。
|
10月前
|
JavaScript 前端开发
Dom实操(第二十二课)表格静态创建到动态创建的过程
Dom实操(第二十二课)表格静态创建到动态创建的过程
48 0
|
12月前
|
编译器
十二章-类设计回顾-重要知识点
十二章-类设计回顾-重要知识点
59 0
|
编译器 Scala 开发者
函数使用注意事项和细节2|学习笔记
快速学习函数使用注意事项和细节2。
51 0
|
移动开发 前端开发 JavaScript
自己平时会使用的一个自定义前端结构
这个结构我是根据一些前端技术整合到一起,方便我平时测试一些看到的前端技术,例如CSS、JS等,将理论上升到验证的阶段。
自己平时会使用的一个自定义前端结构