js
Vue.component("greeting",{
template:`
<p>
{{name}}：大家好，给大家介绍我的女朋友：关晓彤
<button v-on:click='changeName'>改名</button>
</p>
`,
data:function(){
return{
name :"鹿晗"
}
},
methods:{
changeName:function(){
this.name = "我";
}
}
})
new Vue({
el:"#vue-app-one"
});
new Vue({
el:"#vue-app-two"
});
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="vue-app-one"> <greeting></greeting> </div> <div id="vue-app-two"> <greeting></greeting> </div> </body> <script type="text/javascript" src='app.js'></script> </html>
我：大家好，给大家介绍我的女朋友：关晓彤 改名
鹿晗：大家好，给大家介绍我的女朋友：关晓彤 改名