vue学习（1）—template

template的使用
template中只能有一个根元素；错误使用：

template都是用于组件中。
其他写法：如果将template用div替换，发现是可以用的。

注意：组件必须有且仅有一个根元素。
组件的data必须是函数
好处：自己维护自己的，以免一个改动导致其他组件变动。互不影响。
data: function () {
return {
count: 0
}
}

data和props
1、data就是固定的值，可以在组件中进行变动。2、props可以给子组件传递数据。（data）:点击的时候改变了title值，但是不可以在引用组件的时候，给title赋值。
<script>
Vue.component(‘first-com’,{
data:function(){
return{
title:0
}
},
template:'<div v-on:click=”title++”>{{title}}</div>’
});
new Vue({
el:’#app’
})
</script>

（props）:（父向子传值）
<script>
Vue.component(‘first-com’,{
props:[‘title’],
template:'<div>{{title}}</div>’
});
new Vue({
el:’#app’
})
</script>

注意：props中的属性要有单引号。
使用方法：
<div id=”app”>
<first-com title=”123″></first-com>
<first-com title=”ddd”></first-com>
</div>