!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title script src="lib/vue-2.4.0.js"/script/headbody div id="app" !--第一部分-- mycom1/mycom1 !--第二部分-- counter/counter hr counter/counter hr counter/counter hr /div
<!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>