vue學習 十 實例化多個Vue對象 和 組件的使用

實例化多個Vue對象和一個其實都是一樣的格式，如下：

代碼是沒有截屏到的部分

然後想通過第二個Vue對象來改變第一個Vue中的數據也是可以的，通過one.name的方式來實現

<div id="app-one">
	 <h3>{{name}}</h3>
	 <p>{{test}}</p>
</div>
	
<div id="app-two">
	 <h3>{{name}}</h3>
	 <p>{{test}}</p>
	 <button v-on:click="changeName">修改one內容</button>
</div>

組件的使用：（很重要的東西吧！！！） 

// 定義一個名爲 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 寫法就是按照這個來寫的，然後你就可以在div中使用和複用新定義的標籤了，注意一個組件的 data 選項必須是一個函數