Vue.component组件
// js
Vue.component("greeting", { // 将greeting当做一个标签使用，组件
template: // 模板里面有且只有一个根标签
`<p>
{{name}}: 大家好，给大家介绍一下我自己
<button @click="changeName">改名</button>
</p>`,
data: function() { // 写成函数形式，
return { // 返回对象
name: "mandy"
}
},
methods: {
changeName: function() {
this.name = "Cindy"
}
}
})
new Vue({
el: "#vue-app-one",
});
new Vue({
el: "#vue-app-two",
});// html
<body>
<h1>初始vue组件</h1>
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
<script src="app.js"></script>
</body>页面展示：
注意：
如果将data放在组件外面，相当于挂载全局，访问时，点击其中一个按钮，两个实例都会发生改变；
var data = {
name: "mandy"
}
Vue.component("greeting", { // 将greeting当做一个标签使用，组件
template: // 模板里面有且只有一个根标签
`<p>
{{name}}: 大家好，给大家介绍一下我自己
<button @click="changeName">改名</button>
</p>`,
data: function() {
// return { // 返回对象
// name: "mandy"
// }
return data;
},
methods: {
changeName: function() {
this.name = "Cindy"
}
}
})
new Vue({
el: "#vue-app-one",
});
new Vue({
el: "#vue-app-two",
});
展示效果：
