vue组件

vue组件实际上就是自定义标签

组件是vue可重复使用的实例

也就是说，当你定义好一个组件之后，你可以将其当做一个html的标签使用

<div id="app">
    <br>
    <qinjiang></qinjiang>
    <br>
</div>
<div id="buttonnew">
    <newbutton></newbutton>
</div>

    Vue.component('qinjiang',{
        template:'    <span title="66">\n        鼠标悬停查看信息\n    </span>',

    })
    Vue.component('newbutton',{
        data:function (){
            return{
                count:0
            }
        },
        template: '<button v-on:click="count++">you clicked me {{count}} time</button>'
    })
    new Vue({
        el:"#buttonnew"
    })

　　new Vue({
   　　 el:"#app"
　　})

结果

你可以将组件进行任意次数的复用：

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

 

data 必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例

关于如何在自定义的组建中，调取已有vue对象属性值的方法

以下是代码显示

<div id="app">
    <br>
    <qinjiang v-for="(value,name,index) in message" v-bind:zihan="value" v-bind:name="name" v-bind:index="index"></qinjiang>
    <br>
</div>

    Vue.component('newbutton', {
        data:function () {
            return{
                count: 0
            }
        },
        template: '<button v-on:click="count +=1">you clicked me {{count}} time</button>'
    })
    new Vue({
        el: "#app",
        data:{
            // items:['狗蛋','猪蛋','钢蛋']
            message:{
                one:'狗蛋',
                two:'猪蛋',
                three:'钢蛋',
            }
        }
    })

由于刚开始学，这部分也比较绕脑，现在重新复盘一下

首先，自定义的标签必须要在已定义的vue对象中才能被识别

也就是说

当你想要使用自定义标签时，你要在一个已经被定义的vue对象中使用，在上述代码中也就是

<div id="app">以及el: "#app",

其次，从代码中可以看出，自定义标签与vue对象是平级的存在，也就是说，自定义标签无法直接调用vue对象中的属性内容，

因此，我们需要将我们想用的内容绑定到自定义标签上，然后在自定义标签内，接收绑定的数据，从而实现数据调取

以这行代码为例：

<qinjiang v-for="(value,name,index) in message" v-bind:zihan="value" v-bind:name="name" v-bind:index="index"></qinjiang>

 可以看到，我们的原意是用for循环将message的内容遍历出来，因为我们的自定义标签是写在被定义vue的div中的，所以for循环可以读取到message

在从message提取到 value name index数据之后，下面我们要做的便是将这三个数据绑定在自定义标签中，也就是v-bind:zihan="value"等操作了，

将数据绑定到自定义标签之后，数据只能用props进行接收，props是一个数组，可以一次性接收很多数据，

最后将我们的数据写到template模板里，这样自定义标签就能读取到已定义vue对象中的属性了

 

在模板中常用的属性有

data，注意data必须是一个函数

props：用来存放被定义的数据

template：定义的模板