Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Optimizing your App and Using Components to Display Data Chapter 3

if(typeof field === 'number') {
query.replace(this.currency, '');
try {
visible = eval(field + query);
} catch(e) {}
} else {
field = field.toLowerCase();
visible =
field.includes(query.toLowerCase());
}
}
}
return visible;
}
}
});

Creating Vue components


Now we're confident our code is cleaner, we can move on to making Vue components for
the various parts of our app. Put aside your code for now and open a new document while


you get to grips with components.


Vue components are extremely powerful and a great addition to any Vue app. They allow
you to make packages of reusable code that include their own data, methods, and


computed values.


For our app, we have the opportunity to create two components: one for each person and


one for the filtering section of our app. I would encourage you to always look at breaking


your app into components where possible—this helps group your code into related


functions.


Components look like mini Vue instances as each one has its own data, methods, and
computed objects—along with some component-specific options that we will cover shortly.

Free download pdf