Vue学习之路---No.7（分享心得，欢迎批评指正）

老规矩，先回顾一下上回的重点：

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~~~~~~~~