Intro to VUE Flashcards
What is the Vue instance?
The Vue instance is the root of the application and is created when we pass options to it
<pre><code><span>var</span> app = <span>new</span> <span>Vue</span>({options})
</code></pre>
Just like it sounds, this object has a variety of optional properties that give the instance the ability to store data and perform actions.
How do we plug the Vue instance into our HTML?
by providing the vue instance with an setting the el: with the id of an element
<pre><code><span>el:</span> <span>'#app'</span>
</code></pre>
How do we add data that we can use in our HTML through the Vue instance?
By placing a data property in the vue instance
<pre><code><span>data</span>: {
<span>product</span>: <span>"Socks"</span>
}
</code></pre>
How do we display the data passed in the Vue instance to the HTML?
By using an “expresssion”
<pre><code><span> <span><<span>h1</span>></span></span><span>{{ product }}</span><span><span><span>h1</span>></span></span>
</code></pre>
What is server-side routing?
Server-side routing means that the user clicks on a link, the client then sends a request to the server which sends a response with an HTML page. This happens every time you click a link, navigate to a different page, etc
What is client-side routing?
As with server-side routing, the client sends a request and the server sends a response back with HTML, the difference is that the server also sends back additional HTML that might not be used unless the user takes additional action. Basically, it sends additional HTML that the client can use if needed, with no need for another request.
What is the Vue router?
The Vue-router is Vues official routing solution
How do you add a route?
You import the view or component
<pre><code> <span>import</span> About <span>from</span> <span>'./views/About.vue'</span>
</code></pre>
You then add a route object
<pre><code> {
<span>path</span>: <span>'/about'</span>,
name: <span>'about'</span>,
component: About
}
</code></pre>
you then add a named route to the view file
<pre><code> :to=<span>"{ name: 'about' }"</span>>About
</code></pre>
What are dynamic routes?
Dynamic routes are routes that we want to contain dynamic information.
For example /users/user-name
or users/:id
etc
How do we add dynamic routes?
First
<pre><code><span>// this object needs to be after other event/ routes</span>
{
<span>path</span>: <span>'/event/:id'</span>, <span>// We add /:id</span>
<span>name</span>: <span>'event-show'</span>,
<span>component</span>: EventShow,
<span>props</span>: true <span>// We add the props to the route object</span>
}
</code></pre>
Next we add the params to the link
<pre><code>// Then we <span>add</span> <span>the</span> <span>params</span> <span>to</span> <span>the</span> link
to=<span>"{ name: 'event-show', params: { id: '1' } }"</span>>First Event
</code></pre>
Finally we need to pass the props in the show component
<pre><code> <span><<span>script</span>></span><span>
<span>export</span> <span>default</span> {
<span>props</span>: [<span>'id'</span>]
}
</span><span><span>script</span>></span>
</code></pre>
What are Vue components?
Vue Components are the building blocks of a Vue app. Just like Lego
What is the anatomy of a Vue component?
We have three main sections
- Template / The skeleton
- Script / The brains
- Style / The color/shape
What does scoped mean in the style tag of the component?
It means that all the styling in the component will only affect the current component.
What are nested components?
Often, components are nested within other components. We call this a parent-child component relationship. This nesting can go deeper than just one level, which means we can have a parent-child-grandchild relationship, and so on,, like Russian nesting dolls.
How do we add a new component?
<p>with </p>
<pre><code><span>import</span> EventCard <span>from</span> <span>'@/components/EventCard.vue'</span>
</code></pre>
<p>and add the component </p>
<pre><code><span>components:</span> {
EventCard
}
</code></pre>
<p>Then we can use it in our template with </p>
<pre><code><span></span>
</code></pre>
