vue学习（1）---template

template的使用

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

template都是用于组件中。

其余写法：
若是将template用div替换，发现是能够用的。

注意：组件必须有且仅有一个根元素。

组件的data必须是函数

好处：本身维护本身的，以避免一个改动致使其余组件变更。互不影响。

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

data和props

一、data就是固定的值，能够在组件中进行变更。
二、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>