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>