首页 > 其他 > 详细

组件中的data和methods

时间:2019-09-15 15:31:53      阅读:76      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--第一部分-->
<mycom1></mycom1>



<!--第二部分-->
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>

<hr>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>

//第一部分

//1.组件可以有自己的data数据
//2.组件的data和实例的data有点不一样,实例中的data可以为一个对象,但是组件中的data必须是一个方法
//3.组件中的data除了必须有一个方法之外,这个方法内部,还必须返回一个对象才行
Vue.component(‘mycom1‘,{
template:‘<h1>你好{{msg}}</h1>‘,
data:function () {
return{
msg:‘这是组件的中data定义的数据‘
}
}
})



//第二部分
var dataObj = { count: 0 }
Vue.component("counter",{
template:"#tmpl",
data:function () {
return{
count:0
}
},
methods:{
increment(){
this.count++;
}
}
})

var vm=new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>

组件中的data和methods

原文:https://www.cnblogs.com/cycczh/p/11522748.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!