组件中的data和methods_html-js-css

概述<!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></m

<!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全部内容，希望文章能够帮你解决组件中的data和methods所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1034805.html