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