<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <mycom></mycom> <counter></counter> </div> <template id="temp"> <div> <input type="button" value="+1"@click = "INCREMENT" > {{COUNT}} </ div > </ Template > </ body > < Script the src = "the node_modules \ VUE \ dist \ vue.js" > </ Script > < Script > // assembly not the same as the data and examples, examples of the data is an object, and data components is a method and returns an object Vue.component ( " MYCOM " , { Template: " <H3> {} {MSG }, which it is a component </ H3> " , // referenced by the same instance of data:function () { return{ // return the object is to distinguish the individual data components, the different components returned because the address does not match the object it will not affect the MSG: " Hello " // data component definitions } } }) // add a value function Vue.component ( " counter " , { Template: " #temp " , Data: function () { return { COUNT: 0 } }, Methods: { INCREMENT () { this.count++ } } }); let vm = new Vue({ el: "#app", data: { } }); </script> </html>
Renderings
