<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识组件</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app-one">
<greeting></greeting>
</div>
<div id="app-two">
<greeting></greeting>
</div>
<script src="v组件.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
v组件.js
// var data={
// name:"Bukcy";
// }
Vue.component("greeting",{
template:`
<p>
{{name}}:大家好
<button v-on:click="changeName">改名</button>
</p>
`,
// 在这块data属于一个方法
data:function(){
return{
name:"小王"
}
},
methods:{
changeName:function(){
this.name="Herry";
}
}
})
new Vue({
el:"#app-one"
});
new Vue({
el:"#app-two"
});