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>