Program:
index.html:
index.js:
Output:
index.html:
<!DOCTYPE html> <html> <body> <div id="ad"> <mycomponent></mycomponent> </div> <div style="margin-top:500px;"></div> <link rel="stylesheet" type="text/css" href="./style.css"> <script src="https://unpkg.com/vue"></script> <script type="text/javascript" src="./index.js"> </script> </body> </html>
index.js:
Vue.component('mycomponent',{
template: "<p> This is my component {{ name }} - {{ temperature }} <button v-on:click='changeTemp()'> Click Here </button></p>",
data: function(){
return{
name: 'John',
temperature: 100,
}
},
methods:{
changeTemp: function(){
this.temperature = this.temperature+10;
}
}
})
var app = new Vue({
el: '#ad',
data: {
},
});
Output:
