vue组件基础笔记一
1、Vue里面组件的扩展功能是通过 Vue.extend() 来做扩展的。
2、组件的扩展中的options和 new Vue( options )使用一致 Vue.extend()不进行实例化 也就是不用 new Vue.extend()
3、全局注册：
const Hello = Vue.extend({
// template选项是为了确定一个模板，模板中写的就是jsx
template: '<div> Hello Component</div>'
})
Vue.component('Hello',Hello)// Vue.component(组件的名称，组件配置)
全局简写：
// Vue.component('Hello',options)
Vue.component('Hello',{
template: '<div> Hello Component </div>'
})
4、局部注册：
const Hello = Vue.extend({
// template选项是为了确定一个模板，模板中写的就是jsx
template: '<div> Hello Component</div>'
})
new Vue({
el: '#app',
components: {
// 组件名称：组件的选项
'Hello': Hello
}
})
局部注册简写:
new Vue({
el: '#app',
components: {
'Hello': {
template: '<div> 局部注册 </div>'
}
}
})
5、组件的命名
- 一个单词，只要首字母大写就可以了
- 如果是两个以上单词，每个单词首字母大写，但是记得使用的时候，写成小写带横杠 HeadTitle head-title
- 组件名称可以直接定义为小写带横杠
- 案例
<div id="app">
<Hello></Hello>
<head-title></head-title>
<banner-list></banner-list>
</div>
Vue.component('Hello',{
template: '<div> Hello </div>'
})
Vue.component('HeadTitle',{
template: '<div> 头部标题 </div>'
})
Vue.component('banner-list',{
template: '<div> banner </div>'
})
new Vue({
el: '#app'
})
6、组件的规则
<body>
<div id="app">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- <Hello></Hello> -->
<tr is = "Hello"></tr>
</table>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
我们的html中有些标签是特殊的，它规定了它的父子级，这类型标签有
ul li
ol li
dl dt dd
select option
table tr td
这类型的直接父子级关系的标签，是不能直接用组件代替的，如果代替了，那么父级会将组件排斥在外面
解决： is属性
is属性的作用就是将一个绑定的容器解析为一个组件的模板
*/
Vue.component('Hello',{
template: `
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
`
})
new Vue({
el: '#app'
})
7、动态组件
<keep-alive> //keep-alive,就相当于用完app之后，不关闭，切换到后台，用的时候，直接从后台调用
<component v-bind:is="currentTabComponent"></component> //通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
</keep-alive>
8、template标签
<div id="app">
<template> //如果在实力范围内书写template标签，那么将来template标签是不会在渲染中出现的
{{ info }}
</template>
<Hello></Hello>
</div>
<template id="hello"> //template标签在实例范围外是直接显示的
<div>
<p> Hello 模板 </p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
组件的模板可以放在实例范围外书写，但是不好的一点就是这个template标签将来还会存在
后期我们可以解决这个问题
*/
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app',
data: {
info: '你猜我国庆布不布置作业？'
}
})
9、data选项
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<!-- 唯一根元素 -->
<p> {{ money }} </p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
1. 组件是一个独立的个体，那么它应该拥有属于它自己的数据
2. 组件的数据是要有独立作用域的，不容易被外界干扰
3. 除了根实例以外，组件的data选项都是一个函数
4. 为什么data选项要返回一个对象？
- 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置
5. 组件的数据在组件的模板中相当于全局变量
*/
Vue.component('Hello',{
template: '#hello',
data () {
return {
money: 2000
}
}
})
new Vue({
el: '#app'
})
10、组件的嵌套
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
father
<Son></Son>/* 组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可*/
</div>
</template>
<template id="son">
<div>
son
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son'
})
new Vue({
el: '#app'
})
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
