Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue.js in Action: displaying a product on your webstore with Vue.js


Published on

Web pages are rich with data and graphics, and it's challenging to maintain a smooth, quick user experience. Vue.js in Action teaches you to build fast, flowing web UI with the Vue.js framework. This slide deck excerpt shows you how to display a product on your webstore using Vue.js.

Get Vue.js in Action for 42% off with code slhanchett at:

Published in: Software
  • Be the first to comment

  • Be the first to like this

Vue.js in Action: displaying a product on your webstore with Vue.js

  1. 1. Displaying a Product on your Webstore with Vue.js Save 42% off Vue.js in Action with code slhanchett at
  2. 2. Getting started with Vue.js If you aren’t familiar with Vue.js have a look at this article. Find the source code for the chapter here. And find the Vue.js devtools extension for Chrome here. If this isn’t your first time around a Vue instance, jump to the next slide!
  3. 3. Displaying a product Let’s say that you’re building a webstore and you’re at the point where you want to display products. You can display products in one of several ways: in a list, in a grid, as a featured product, and on an individual product page. For now, let’s focus on displaying a single product.
  4. 4. Adding product data to our Vue instance data: { sitename: "Vue.js Pet Depot", product: { ❶ id: 1001 ❷ title: "Cat Food, 25lb bag", ❷ description: "A 25 pound bag of <em>irresistible</em>, ❷ organic goodness for your cat.", ❷ price: 2000, ❷ image: "images/products/1001/fullsize.png" ❷ } }, ❶ An object for our product data ❷ The product’s attributes are properties of our product object
  5. 5. Adding product data to our Vue instance Adding a product object to our data option is relatively straightforward. • The id property is used to uniquely identify a product. • Although the title and description properties are both strings, the description contains some HTML markup. • The price property represents the cost of our product as an integer, which simplifies some calculations we’ll be doing. • The image property provides a path to our product’s primary image file.
  6. 6. Marking up the product view We’ve got our data in place, so now we can focus on adding the product markup to our HTML. Just below the header element, we’ll add a main element that acts as the primary container for the content of our application. The main element, <main>, is a new addition to HTML5, meant to contain the primary content of a webpage or application.
  7. 7. Marking up the product view The product layout uses two columns so that the product image is displayed to the side of the product information. Our stylesheet (chapter-02/app.css) already has all the column styles defined, so we just need to include the appropriate classnames in our markup.
  8. 8. Adding product markup <main> <div class="row product"> <div class="col"> <figure> <img v-bind:src="product.image"> ❶ </figure> </div> <div class="col col-expand"> <h1 v-text="product.title"></h1> ❷ <p v-text="product.description"></p> ❷ <p v-text="product.price" class="price"></p> ❷ </div> </div> </main> ❶ The product’s image path is bound using a v-bind directive ❷ Other product properties are displayed using text interpolations
  9. 9. Adding product markup One thing you might have noticed from the previous slide is the use of JavaScript dot notation in the data bindings. Because product is an object, we must provide each binding with the entire path to a property.
  10. 10. Adding product markup Most of the properties of our product data—title, description, and price—are bound using text interpolations, the same way we bound the sitename property in the header. However, the product’s image path introduces an attribute binding.
  11. 11. Adding product markup We use the v-bind directive because element attributes cannot be bound using simple text interpolations. Any valid element attribute can be bound using the v-bind directive, but it is important to note that there are special cases for styles, classnames, and some other scenarios.
  12. 12. Checking our progress Let’s head over to Chrome, reload the page, and confirm that the product information is displayed as designed. The next slide shows our product display, but you might notice some issues that need to be addressed.
  13. 13. Our product display
  14. 14. Addressing issues It looks like we’ve got a couple of things to work on: 1. The product description is being output as a string, and not interpreting the HTML embedded in the description’s value. 2. The product’s price is displayed simply as a string representation of the integer 2000, and not as a well- formatted dollar figure.
  15. 15. Adding product markup – HTML interpolation <main> <div class="row product"> <div class="col"> <figure> <img v-bind:src="product.image"> </figure> </div> <div class="col col-expand"> <h1 v-text="product.title"></h1> <p v-html="product.description”></p> ❶ <p v-text="product.price" class="price"></p> </div> </div> </main> ❶ Using an HTML interpolation to output the product description as HTML, not plain text
  16. 16. Using v-html binding Reloading the app in Chrome should now render the value of our product description as HTML, and the emphasis tag should italicize the word “irresistible.”
  17. 17. Formatting the product price with an output filter The last thing we need to do is to display our product’s price in a familiar format, not as a raw integer. Output filters let us apply formatting to a value before it is displayed in our markup. The general format of an output filter is {{ property | filter }}. In our case, we want to format the product’s price to look like $20.00, rather than 2000.
  18. 18. Writing the filter function Output filters are just functions that receive a value, perform some formatting task, and return the formatted value for output. When used as part of a text interpolation, the value passed to the filter is the property we are binding to. All of our output filters reside in the filters object of the options we pass to our Vue instance, so that’s where we’ll add our price formatter.
  19. 19. var webstore = new Vue({ el: '#app', data: { … }, filters: { ❶ formatPrice: function(price) { ❷ if (!parseInt(price)) { return ""; } ❸ if (price > 99999) { ❹ var priceString = (price / 100).toFixed(2); ❺ var priceArray = priceString.split("").reverse(); ❻ var index = 3; ❻ while (priceArray.length > index + 3) { ❻ priceArray.splice(index+3, 0, ","); ❻ index += 4; ❻ } ❻ return "$" + priceArray.reverse().join(""); ❼ } else { return "$" + (price / 100).toFixed(2); ❽ } } } }); Writing the filter function ❶ The filters option contains output filters ❷ formatPrice takes formats a price value ❸ If we can’t get an integer, return immediately ❹ Format values $1,000 and up ❺ Convert value to decimal ❻ Add commas every three places ❼ Return the formatted value ❽ If less than $1,000, just return a formatted decimal value
  20. 20. Checking our progress That should do the trick! Flip back over to Chrome, refresh and, et voilà, we’ve got a formatted price.
  21. 21. Testing different values We can see how our filter is applied to different product price values in real time if we tinker with our data in the console. To try different values, open the console and set the value of product.price with a statement like app.product.price = 3500. Go ahead an try out as many values as you like to ensure that the formatting is working properly.
  22. 22. Our product display
  23. 23. That’s all for now! We hope that you found this presentation informative and enjoyable! For more info, download the first chapter of Vue.js in Action here. Save 42% off Vue.js in Action with code slhanchett at