Vue.js Essentials - 3 Course Bundle

Install a production-ready Vue build with npm i -s vue@2.5.17, locate the Vue module in node_modules, and load node_modules/vue/dist/vue.js using a script tag with type text/javascript above your custom script.

Include Vue in your project and create your first Vue instance with new Vue and a configuration object. Mount it to the element with id app using the el property.

Add a data property to the Vue config and set total to 0. Render total with interpolation using curly braces so the page updates as the value changes.

Add a cart button to update the total reactively using Vue's v-on click handler, then refactor the logic into the addToCart method that uses this.total.

Learn how Vue's v-for iterates arrays, updates the DOM efficiently when items change, and uses a unique key bound with v-bind to ensure correct item removal.

Learn how Vue.js enables reactivity by observing data changes and automatically rerendering the template. See how interpolation updates to display new values without explicit instructions.

Learn how the addToCart method updates the total and pushes products into the cart array, with each product priced at 9.99, and verify state using Vue Devtools.

Explore conditional rendering in Vue using v-if and v-else to hide the cart when empty and show cart contents and total when items exist, with styling classes cart-total and empty-cart.

Increment the cart item's qty when addToCart is called for the same product. Loop through the cart to check ids and add a new item only if not found.

Add quantity controls to the cart in a Vue.js app by wiring plus and minus buttons with v-on:click to inc and dec methods, passing the item.

Implement inc and dec logic for the cart by incrementing item quantity and total price, then removing the item when quantity reaches zero using indexOf and splice.

Add a search bar to the product list, prevent the form's default submit behavior with v-on and prevent modifiers, and prepare to query the API with AJAX.

Add a text input for search, bind it with v-model to a new search data property, and prepare to send the typed term in an AJAX call to the API.

Learn how to integrate the vue-resource library to perform http requests in Vue, using this.$http with get, post, and put, and handle responses with promises.

Make a get request with Vue Resource to fetch poster objects via /search?q= and the user's search term. Handle the response with then to inspect status and API data.

Replace dummy items by loading real products from the response body into the Vue instance, update onSubmit to set this.products, and hint users with search terms cat, dog, and flower.

Display the Vue.js product thumbnail and price by binding product.thumb to an image and using a currency filter on product.price, arranged in left image and right price columns.

Add a dynamic search results message above the product list using products.length, and update the template to display lastSearch after ajax submit.

Add a loading indicator in Vue by introducing a loading boolean, clearing results on submit, and showing 'Loading...' with v-if during simulated AJAX delay.

Explore the Vue lifecycle from reactivity setup to dom mounting, and define created and mounted hooks in the Vue config to run code at the right moment.

Add a fade effect to cart items rendered with v-for using transition-group, render as a ul, reuse the fade name, and place the no-items message at the top.

Apply scroll loading to render search results on demand, loading four items at a time from the ajax response using slice, and store all results in a non-reactive results array.

Detect when the user reaches the bottom using an invisible sensor element and the scrollmonitor library, then load the next four items.

Implement a Vue scroll monitor with an appendResults method to copy results to products and log 'Append results', while using beforeUpdate and updated to manage the watcher safely.

Fix search results in the Vue.js essentials course by using results.length for the top message, show 'No more items' only when results.length > 0, and clear results on empty searches.

Learn how a Vue.js app delays rendering while scripts load, and implement a v-cloak based loading indicator to hide unparsed templates on slow connections.