组件中的data和methods

最新推荐文章于 2021-07-25 16:08:15 发布

auckwk4686

最新推荐文章于 2021-07-25 16:08:15 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cycczh/p/11522748.html

版权

<!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>

转载于:https://www.cnblogs.com/cycczh/p/11522748.html

auckwk4686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件中的data和methods

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js"></script></head>&lt...
复制链接

扫一扫