Optimizing your App and Using Components to Display Data Chapter 3if(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.