<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="firstVue"> <p>{{msg}}</p> <button-demo></button-demo> <child v-bind:message="msg"></child> <button-counter></button-counter> </div> </body> <script type="text/javascript"> Vue.component('button-demo',{ template:'<button>Hello button-demo!</button>' }); //注册了'button-demo'以后,<button-demo></button-demo>就等价于<button>Hello here!</button> // 组件 child Vue.component('child', { // 声明 props props: ['message'], template: '<div><span>{{ message }}</span></div>' }); //定义button-counter组件 Vue.component('button-counter',{ //定义数据 data:function(){ return { count: 0 } }, //定义方法 methods:{ clickAdd: function(){ this.count++ } }, template :'<button @click="clickAdd">You clicked me {{count}} times</button>' }); var myVue = new Vue({ el: "#firstVue", data:{ msg:"hello world" } }) </script> </html>