You can read Part 1 from here https://devworx.digit.in/etc/getting-started-vue-js-1104381.html
HANDLING INPUT AND EVENTS
Respond to user inputs is the core part of any UI framework and Vue offers a simple but flexible way to do that. Let’s see how, in just a few lines of code, you can build a functioning GitHub user search app with Vue here: http://dgit.in/GHSrcApp.
This code should introduce you toa few new things. First, the v-model directive – this binds the input ele-ment’s value to the query property.
Any changes made to the text input are reflected in the query property, and any changes made in the property are reflected in the text input in the UI. The @click you’ll see in the code is shorthand for v-on:click, and is Vue’ssyntax for attaching an event handler.You can handle any event with this syntax of @event or v-on:event, and the corresponding method will be called with details about the event.You might have noticed @keyup. enter on the text input element. This tells Vue that we only care about the keyup event if enter was pressed. Nor-mally, out code would need to checkif the enter key was pressed on each keyup event, but Vue can just do this for us.
There are many other such modi-fiers that Vue provides, such as click.
ctrl to check if ctrl was pressed while clicking, or submit.prevent to prevent refreshing the page after form submit.Also these event handlers are bound to search which is a method we need to define. You can see our search method defined inside methods. Our search code is quite straightforward,it is using the new JavaScript fetch API to get users matching our query using GitHub’s API. The response is
then being converted to JSON and the returned items are saved on to the users property.
COMPONENTS
As applications become more complex,it becomes important to break down apps into smaller components, and Vue supports doing with a component system that lets you create customHTML tags that can have their very own attributes.
We’ll start by taking our user details list element and putting it into its own component called “github-user” here: http://dgit.in/UsrDtls You’ll notice instead of using new Vue({…}) here we are using Vue.component where the first parameter is the name we are giving to the component and the second parameter sets up options for the component.
Inside props we can provide a list of all the properties that can be passed to this new component. Code
that uses this component can pass in a user property. If we wanted we could instead ask for the avatar url, html url,user login, and user type as separate props in the code.The template is a copy of what
we’ve seen before but with the loop removed, since this component is for a single user. Our main app can now use this component instead of the li tag as follows:
you’ll see here is that data is a function that returns and object with the required properties. Since a component can have multiple instances, a single data object would mean that all component in-
stances will share the same data state! This is obviously not what you’d want. Using a function instead creates a new copy of your data for each instance. We’ve also introduced the new $emit method here inside search. This is how your own custom components can create your own custom events.The component using this search-bar can just listen for the search event using @search without caring about how it’s triggered. You’ll notice that we’ve added what seems like an unnecessary div around the input and button tags, however this is required by Vue for the component to work. A component needs to return a single element no matter what it is in the code.Let’s see what our main code looks like once we use both these components here: http://dgit.in/Codecomp.
Put the above code and both the component definitions in your JavaScript file and you will see the app
works as expected but now it’s a lot more modular. Our main code no longer needs to store the query, instead it gets query as a parameter with the search event emitted by the search-bar. This is
pretty useful.
COMPUTED PROPERTIES
This is a small but clever feature of Vue that let’s you create properties that are calculated from other properties. For instance you ask users for the temperature in Fahrenheit and havea computed property that automatically converts it to Celsius. Here is a
minimal example of that in work:
Vue({
…
data: {
temp_f: 0
},
computed: {
temp_c: function() {
return (this.
temp_f – 32) / 1.8;
}
}
});
Any time you make a change to the temp_f property temp_c will auto-
matically be updated. While this particular example only goes one way, it’s possible to create computed properties that go in both directions.
PARTING WORDS
Vue.js is a great little framework that packs a huge punch in a pretty small package. It leverages your existing knowledge of HTML tags and how they work instead of having you learn yet another API for building UIs. There is still a lot more depth to Vue than what you have seen here. For instance Vue has:
• Watcher function that run when a
property is changed
• A JavaScript-based API for creating
UIs
• Support for creating custom v-xyz
directives
• Mixins and Plugin support
• Support for Server-side rendering
There are also a number of other addon packages available for Vue that add support for managing global state, routing and a whole lot more. If you’re looking to build a brand new web app, and want a framework with a good features, and small size that’s actively maintained and has a good community
around it, Vue is a good bet to make.
