VUE INSTANCE¶
‘’Here is the link for slides of vue.js course’’¶
All Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
1.In order to create this pen, what we have here is div id app. And then we have mustache templates that say text, nice to meet Vue. And then we’ve got in our JavaScript tab here, new Vue and the element that we’re using is app, which establishes a relationship with this div id = app.
2.You can call that whatever you want, like I could call it like robotface here, and then robotface over here, and that would still work. All the styling fell off of it, but you kinda get the picture. Then, we have this data object. That data object is what we’re using in the Vue Instance to manage the state of the application. So things that we need to adjust, part of the reactivity system. this text establishes a relationship in the HTML outputted through this mustache template tags and that string will then be outputted there as well. So it establishes a relationship between this mustache tags and that hello world and that’s really all you need in order to, To get going.
Note
It can be any css type selector but generally IDs are prefered by people who only want one instance of that.
3.So if we have this Hello World and I opened it in the debug window. I can go over to my Vue Inspector, and then click on this Root, and see that text over here(elements). So if I’m looking at it in the Vue DevTools, what I will see, instead of seeing all of the elements like you see over here. That’s like all of that *outputted elements and bill elements for the page*. We have in the Vue DevTools exactly what’s going on, so that root is that Vue Instance itself and we see that text in the Hello World.
