Quasar Framework: Tutorial part 3 — Vue.JS events, loops, inputs and routing (2/2)
Let’s have a coffee together and continue towards learning loops, events and conditional statements in Vue…
I guess after learning this part of tutorial, one can develop a medium level static APP (doesn’t include network call). Many may think that, why need to learn conditional statements and loops, I have heard about that 1000 times during schools 😄 But believe me, this is gonna be different and more interesting. It’s like for loop inside HTML element!! Wait, what?
Let’s make a list first:
- Loops & Conditions implementation
- Events (Button click event, mouseup/mousedown event)
- Routing & Navigation
Loops & Conditions
The best part of Vue I liked the most is their ease of implementation loops and conditions in html. How? Give me an example.
We were using this,
Now we can do this,
v-for property of vue is responsible for running the iteration over the arrays that reside in data part of Vue instance. Here, in the example, when we use v-for in <li></li> element, the element will print as many times the number of data are present in the array and display the containing message. That means we do not need to worry about appending HTMLs in DOM. Easy ! Easy ! Easy !
Next, conditional rendering, Show me the simplest way, so long ago,
we were using this,
And now we are using vue awesomeness
And
Also
Quite simple. No? This way we can choose what html part of the template we want to display and what to hide from the UI. v-if can access the values from data, methods, props, and computed property of Vue component and it will re-render if any value or return value changes of them.
Event
Simply we calls it as actions. When user clicks upon some button or provide some input to textboxes, we need some event to notify the app that something is happened and user has interacted with the UI elements.
Earlier, we were using this,
Now, we are using,
or
We can either use v-on:click or @click both are same. @click is shorthand property of v-on:click. Same way we can use,
- onmouseup =>
@mouseup - onkeyup =>
@keyup - onmousemove =>
@mousemove
Inputs
Inputs are very much useful while collecting data from the user.
Left side shows HTML and JS code that we were using in general, and at right side, it’s VueJS that uses v-model to bind the variable with the input. Now whenever the value of v-model changes, it will also write the content inside the div below. That’s happening because Vue supports two way data binding, so at the same time changing the content it will also reflect to every place where txtInput is used. We can follow way for checkbox, radiobutton and select tags.
We have another vue properties v-text and v-html ,
v-textis used to lazy load content into the elementv-htmlis used to display html content in the element
Routing
Vue routing is a huge concept that probably we can not cover all the things in this part. Vue uses vue-router library to support routing feature in the Vue application. Consider only two things, that we need to first define the router and the provide the link to that routing that matches the URL.
When we setup vue-router , we can access Vue Instance property $router from the Vue component and make a call to routes, that will match the URL reside in routes list.
We can also pass props to route component while calling push or replace like this,
Thinking by yourself? Why didn’t I adopt Vue little early? 😃 Thanks for keep reading, let’s just have a look at references,
References
- Vue-Events: https://vuejs.org/v2/guide/events.html
- Vue conditions & loops: https://vue-native.io/docs/conditional.html
- Vue inputs: https://vuejs.org/v2/guide/forms.html
- Vue routing: https://router.vuejs.org/installation.html
Contact
Email : Jaldhi Bhatt (bhattjaldhi27@gmail.com)
