vue组件
1.组件化思维
组件化针对的是页面中的整个完整的功能模板划分 (项目的分工)
2.组件的概念( 一个文件 )
组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体
优点:代码复用,便于维护
划分组件的原则:复用率高的,独立性强的
3.Vue中如何定义, 使用, 操作组件
组件
(1). Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中 options
(2). Vue.component() 为什么要执行这个方法呢?
组件的表现形式是标签,组件要想合法化, 必须注册
(1).vue.js文件中暴露出一个Vue的构造器函数, 这个函数的作用,是用来实例化出来一个实例, 那么这个实例也是一个组件, 我们称之为 ‘根实例’
(2). 我们从vue detools中我们发现这个实例的表现形式是一个标签
(3). Vue为了扩展功能, 给了一个方法 , 这个方法叫 extend
(4). 我们对比 Vue vs Vue.extend() 我们发现这两个方法输出结果都是两个构造器函数, 并且很相似
(5). 那么我们进一步得到一个结果: 使用方法一致吗?
new Vue.extend() 报错 不需要进行实例化 , 它希望组件的表现形式应该是标签
要想像标签一样使用, 必须准守 h5 的标准 , 也就是说组件必须合法 , 要想合法, 必须注册(登记)
组件使用前必须注册
4.组件的注册有两种方式
1. 全局注册
简写: Vue.component(组件的名称,options )
2. 局部注册
new Vue({
components: {
组件名: 组件的配置项
}
})
组件命名建议使用两种方式
使用 kebab-case
举例
Vue.component('header-title'{})
使用 PascalCase
举例:
Vue.component('MyComponentName',{/*...*/})
5.组件的嵌套
(1).全局组件嵌套
HTML:
<div id="app">
<Father></Father>
</div>
script:
Vue.Compontent('Father',{
template: '<h3> father <Son></Son></h3>'
})
Vue.Compontent('Son',{
template: '<h3> son</h3>'
})
new Vue({
el:'#app'
}).
2.局部组件嵌套
HTML:
<div id="app">
<Father></Father>
</div>
script:
new Vue({
el:'#app',
compontents:{
'Father':{
template:'<div>father <Son></Son></div>'
compontents:{
'Son':{
template:'<h3>son</h3>'
}
}
}
}
})
6.组件外用:组件里的template是存放代码区,然而代码多的话,视图会难看,所以外用一下
代码:
html:
<div id="app">
<Hello></Hello>
</div>
<template id="Hello">
<div class="content">
<ul>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</template>
script:
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el: '#app',
})
7.组件模板的根元素唯一:
(1). 组件的template如果body里面的话,一定记住要放在 #app 的div外
(2). 组件的template在body中使用的话, 是不会解析的, 但是组件内的template是会解析的
(3). 组件的模板中的直接子元素必须有一个, 如果你要有多个, 必须使用v-if v-else-if
8.组件的data选项
根实例中的data选项是一个对象,但是组件中的data选项是一个函数,为什么?
解释:
函数的作用:
(1).函数有独立作用域
(2).函数可以有return 返回值。
组件的data选项必须有return 返回值,并且返回值是一个对象
组件的数据在组件的模板中使用
示例:
html:
<div id="app">
<Hello></Hello>
</div>
<template>
<div>
{{ msg }}
</div>
</template>
script:
Vue.compontent('Hello',{
template:'#Hello',
data(){
return{
msg:'hello'
}
}
})
new Vue({
el:'#app'
})