- Full-Stack Vue.js 2 and Laravel 5
- Anthony Gore
- 184字
- 2021-07-02 19:57:18
The Vue instance
Looking at ourapp.jsfile, let's now create ourroot instanceof Vue.js by using thenewoperator with theVueobject.
app.js:
var app = new Vue();
When you create a Vue instance, you will usually want to pass in a configuration object as an argument. This object is where your project's custom data and functions are defined.
app.js:
var app = new Vue({ el: '#app' });
As our project progresses, we'll be adding much more to this configuration object, but for now we've just added theelproperty that tells Vue where to mount itself in the page.
You can assign to it a string (a CSS selector) or an HTML node object. In our case, we've used the#appstring,which is a CSS selector referring to the element with the appID.
index.html:
<p id="app"> <!--Mount element--> </p>
Vue has dominion over the element it mounts on and any child node. For our project so far, Vue could manipulate thepwith theheaderclass, but it could not manipulate thepwith thetoolbarID. Anything placed within this latterp will be invisible to Vue.
index.html:
<body> <p id="toolbar">...</p> <p id="app"> <!--Vue only has dominion here--> <p class="header">...</header> ... </p> <script src="node_modules/vue/dist/vue.js"></script> <script src="app.js"></script> </body>
From now on, we'll refer to our mount node and its children as ourtemplate.