Vue-组件化
以下均为自用学习笔记
一、定义vue组件
什么是组件，组件的出现是为了拆分vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就可以去调用什么样的组件即可。
组件化和模块化的不同：
模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证功能模块职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
二、 全局组件定义的四种方式
1、使用vue.extend 来创建全局的vue组件
// 1.1 使用vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template:'<h3>这是使用Vue.extend 创建的组件</h3>'
// 通过template 属性指定了组件要展示的HTML结构
})
// 1.2 使用Vue.component(‘组件的名称’，创建出来的组件模板对象)
// Vue.component('mycom1',com1)
// 如果使用Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，
// 需要把大写驼峰改为小写的字母，同时两个单词直接要用 ‘-’ 链接；
// 如果不使用驼峰，则直接拿名称来使用即可；
Vue.component('mycom1',com1)
// vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引人它的，
// 第二个参数，Vue.extend 创建的组件，其中template就是组件将来要展示的内容；
Vue.component('mucom1',Vue.extend({
template:'<h3> 这是使用Vue.extend 创建的组件 </h3>'
}))
2、直接创建
<body>
<div id="app">
<com1></com1>
</div>
<script>
Vue.component('com1',{
// 注意不论是哪种方式创建的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
template:'<div><h3> 这是一个h3的标签 </h3></div>'
})
var vm = new Vue({
el:'#app',
data:{
},
mathods:{
}
})
</script>
</body>
3、在外部定义template 结构
<body>
<template id="tmp1">
<div >
<h1>这是一个temp元素，在外边定义的组件结构，这个方式有代码只能提示高亮</h1>
<h4>好的不错</h4
最低0.47元/天 解锁文章
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
