vue组件中的data与methods
程序员文章站
2022-04-14 20:45:30
效果图 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<mycom></mycom>
<counter></counter>
</div>
<template id="temp">
<div>
<input type="button" value="+1" @click="increment">
{{count}}
</div>
</template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
//组件中的data和实例中的不一样，实例中的data是一个对象，而组件中的data则是一个方法并且返回一个对象
vue.component("mycom", {
template: "<h3>{{msg}}，这是一个组件</h3>", //引用时与实例一致
data: function () {
return { //返回对象是为了区分各个组件中的数据，因为不同组件返回的对象的地址都不一致所以不会产生影响
msg: "hello" //组件中定义的数据
}
}
})
//添加一个增值函数
vue.component("counter", {
template:"#temp",
data: function () {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
});
let vm = new vue({
el: "#app",
data: {
}
});
</script>
</html>
效果图