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 选项必须是一个函数