app.js
//全局变量
let data = {
name: '心怡',
wechart: '18665816519'
}
//创建全局组件
Vue.component("Greeting", {
//html模板
template: `<p> 这是全局组件，可以在任何实例的容器中使用 我的名字是: {{ name }}，我的微信是：{{ wechart }}
<button @click='changeName'>改名</button>
</p>
`,
data() {
return data; //这个变量即上面所定义的，data变量
},
//属性，方法等
methods: {
changeName() {
this.name = "唐太宗"
}
}
})
const one = new Vue({
el: '#vue-app-one',
})
const two = new Vue({
el: '#vue-app-two',
})
index.html
<body>
<h1>多个vue实例对象</h1>
<div id="vue-app-one">
<h1>APP One</h1>
<Greeting />
</div>
<div id="vue-app-two">
<h2>App Two</h2>
<Greeting />
</div>
<script src="app.js"></script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
