开发者学堂课程【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)
此时刷新,得到执行结果:
//如果要使用组件,直接,把组件额名称,以 HTML 标签的形式,引入到网页中,即可
我们要把模板对象注册为一个真正具有名称的一个组件,可以引用这种组件,可以利用条件形式。
三、总结
这就是创建组件的第一种方式,通过 vue.extend 来创建组件,这个流程分为两步:
1. 第一步:
直接调用 vue.extend 里面的配置对象,此时 component 就是组建展示的具体内容,这是 vue.extend 会返回一个组件的模板对象,然后再调用 Vue.component ,此时会把模板对象注册为一个真正具有名称的组件,之后在页面中可以直接引用这个名称。
2. 第二步:
如果使用 Vue.component 定义全局组件的时候,组建名称使用了驼峰,命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用-链接;
如果不使用驼峰,则直接拿名称来使用即可。
以上就是我们创建组件的第一种方式。