1904173

Having finished with the getting started video at vuejs.org, I began the next exploration with the free Vue Mastery introductory course containing 11 lessons, each a downloadable video. In this first part of the post I will summarize the first seven lessons.

Lesson 1 - Vue instance

This showed how the Vue object was declared, with the el element pointing to the HTML container where Vue will be put to work. Discussed Vue expressions and its reactivity feature, which means when a Vue variable changes value, the new value will automatically appear wherever the variable is referenced in the HTML, and vice versa, just like with AngularJS. The following are examples of Vue expressions.

{{product}}
{{product+"?"}}
{{firstName+" "+lastName}}
{{clicked ? true : false}}
{{message.split(" ").reverse().join(" ")}} 

Lesson 2 - Attribute binding

<img v-bind:src="image"> The HTML attribute src is here bound to the Vue expression consisting of the variable image: When the variable changes, the HTML attribute will also change. “v-bind” can be omitted, leaving just the colon, so v-bind:src is the same as :src. Examples of other HTML attributes that can be bound are alt, href, title, class, style, disabled.

Lesson 3 - Conditional rendering

<p v-if="inStock"> Renders the p element if variable inStock has a value of true.

<p v-if="onhand>10"> Here a logical expression is used instead.

<p v-else-if="onhand<=10&&onhand>0"> If the former expression is false this one is evaluated next.

<p v-else> If prior expressions are false this one is taken.

In all these the p element will be created in the DOM if the expression is true, deleted from the DOM if false. v-show is similar except the element is just hidden or shown rather than being deleted or created.

Lesson 4 - List rendering

<li v-for="detail in details">{{detail}}</li>
<p v-for="variant in variants" :key="variant.variantID">{{variant.variantColor}}</p>
The v-for directive renders lists. From the way it works, it appears to duplicate the HTML element where it’s specified as many times as the contents of an array. The array is represented as the second variable after in while the one before in represents the current array cell value.

Lesson 5 - Handling events

v-on:click="addToCart" v-on: which may be abbreviated to @ binds an expression to an event, in this case the button click event. The expression can be something like cart+=1 or a method call as in this case. For method calls, parentheses are only necessary when arguments are being passed. Examples of other events are mouseover, submit (for a form), keyup.enter (for an input box, the .enter being a modifier specifying that Enter key is required). The methods are defined using the methods attribute of the Vue instance:

  methods:{
    addToCart(){this.cart+=1},
    updateProduct(image){this.image=image}
  } 

Lesson 6 - Class and style binding

Style binding
Styles can be bound collectively using a Vue object variable, or individually. For instance in <span :style="boxStyle">...</span> the variable boxStyle would have been created as an object as in boxStyle: {backgroundColor:"red", color:"white"} Here, the color properties are either camel-cased or quoted when not, and comma is used for separation instead of semicolon. When there are more than one variables to be bound, an array is used as in :style="[boxStyle, textStyle]" Here is an example of binding the style individually: <span :style="{backgroundColor:'red'}"> The constant 'red' could also be represented by a Vue variable which would not be quoted. Vue expressions need to be quoted only when being assigned or bound to HTML attributes.

Class binding
Vue class binding adds a class when an expression evaluates to true.

Lesson 7 - Computed properties

computed is an object attribute of the Vue instance consisting of functions that compute and return values. The computed values are cached until any dependent variable changes, so are more efficient than using methods for the same purpose. Although they are functions, to use them in expressions the parentheses are optional unless when arguments are needed. For example:

  computed:{
    title(){return this.brand+" "+this.product},
    image(){return this.variants[this.selectedVariant].variantImage},
  }

By the conclusion of this lesson, the course application now looks like this (see above).

And the Vue instance declaration looked like this:

 var app=new Vue({  el: '#app',
  data: {
    brand:'Vue Mastery',
    product:'Socks',
    selectedVariant:0,
    details: ['80% cotton','20% polyester','Gender-neutral'],
    variants: [
      {variantID: 2234, variantColor: 'green', variantImage: '../vmSocks-green-onWhite.jpg', variantQuantity:10},
      {variantID: 2235, variantColor: 'blue', variantImage: '../vmSocks-blue-onWhite.jpg', variantQuantity:0}
    ],
    cart: 0
  },
  methods:{
    addToCart(){this.cart+=1},
    updateProduct(variantIndex){this.selectedVariant=variantIndex}
  },
  computed:{
    title(){return this.brand+' '+this.product},
    image(){return this.variants[this.selectedVariant].variantImage},
    inStock(){return this.variants[this.selectedVariant].variantQuantity}
  }
 })