<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var data = { counter: 0 } Vue.component("simple-counter" , { template: '<button v-on:click="counter += 1">{{counter}}</button>', data: function(){ return{ counter: 0 } } }); new Vue({ el: '#app' }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <child message="hello" my-message="gunduzi"></child> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component('child' , { props: ['message','myMessage'], template: '<div><span>{{message}}</span> <span>{{myMessage}}</span></div>' }); new Vue({ el:'#app' }); </script> </body> </html>