Vue从零开始总结22

组件数据调用相关问题：组件里面无法调用实例中的数据。

为了解决这个问题我们直接在组件内部收集数据

当你在组件内部写data:{}的时候，发现报错了。提示它必须是一个函数并且需要返回一个实例也就是对象。

那么我们就这么写data(){ return{message:'我是这么用的'} }

别看data（）是个函数，但在理解它的存在的时候，我们需要把它看成java中的类

我们每引用同一个组件时，就会分配不同的内存，也就是说这些对象互不干涉

<cpn></cpn>

<template id="test">

<h2>当前计数为：{{count}}</h2>

<button @click="increase"></button>

<button @click="decrease"></button>

</template>

Vue.component('cpn',{

template:'#test',

data(){

return {count:0}

},

methods:{

increase(){

this.count++;

},

decrease(){

this.count--;

}

}

})

效果如图：