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