老规矩,先回顾一下上回的重点:
1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换;如果设置了value,那么将会切换value值
2.而多选框和单选框有相同的原理,只是多选框是以数组的方式返回值
3.option如果没有设置value,那么渲染的值就为option中的内容
4.各类修饰器,详情见上回分解
回顾完上期的重点,我们来看一下今天的内容,之前几期我们对vue的基础进行了详细的学习;现在我们来看一看组件的知识:
组件其实就是把交互功能模块独立出来,方便重复使用,形象一点说就好比是HTML中的公共样式;js中的方法。
进入正题,那么我们该如何写一个组件呢,上代码:
Vue.component ( ‘ my-component ’ ,{
template: ' <div> c总,不要翻水水a </div> '
})
new Vue({
el:' #nubiya ',
})
// 这就是一个最基本的组件;my-component是组件名;template后面跟的是组件需要渲染的内容
<div id=" nubiya ">
<template></template>
</div>
// =>
<div id=" nubiya ">
<div>c总,不要翻水水a</div>
</div>
需要注意的是:
vue组件要写在前面,vue实例化要写在后面,不然就会报错;同时,组件只在vue作用域内有效,也就是在id为 nubiya 的结构下。
上面我们所认识的是 全局组件,也就是说,不管有多少个vm,全局组件都会在这些vm中生效;比如说这样:
<div id=" nokia ">
<o-template></o-template>
</div>
<div id=" nokia2 ">
<o-template></o-template>
</div>
Vue.component( 'o-complate' ,{
template:' <div>c总,翻个香蕉船啊</div> '
} )
vm1=new Vue({
el:' nokia '
})
vm2=new Vue({
el:' nokia2 '
})
//那么将会输出两条一样的 " c总,翻个香蕉船啊 "
现在我们来讲一讲局部组件:
var huawei ={
template: ' <div>c总正在翻水水</div> '
}
vm = new Vue({
el:' oppo ',
components:{
' o-complate ':huawei
}
})
//可以看到这个地方,我们把o-complate放在了vm对象里面,那么o-complate只能在vm作用域内,也就是id为oppo的结构内;
//同时需要注意的是: 这个地方huawei其实就是一个参数对象。
这里需要插播一个小细节:
dom在组件中放的位置其实是有规定的;就像ul和li之间不能加其他标签一样,如果在组件中这样写:
<table>
<xiaomi></xiaomi>
</table>
//这样是会报错的;
不过vue也提供了一种方法:
<table>
<tr is=' xiaomi '></tr>
</table>
//is属性可以保留html原有标签和原本的属性。
现在来看一下,我们早有接触的data属性:
Vue.component(' meizu ',{
template: ' <div> abc </div> '
data:{
message:' hello world '
}
})
//这种写法,显然是错误的~~~
那么正确的应该怎样呢? 如下:
Vue.component( ' meizu ',{
template:' <div>abc</div> '
data:function(){
return {message:' hello '}
}
} )
//这里需要注意的是组件中的data必须要用回调函数
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
//注意:这个地方 3个button的点击事件是共享的,但是在某些时候,我们需要3个按钮独立,所以我们可以这样写:
data:function(){
return:{
counter:0
}
}
组件里的el属性也要用闭包+return的写法。它定义组件的有效作用域。
Vue.component('simple-counter', {
el:function(){
return '#example'
},
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})
OKOK~~~ JINTIANJIUDAOZHELILE~~~ goodnight~~~~~~~~