vuejs_intro.md

VueJS intro

Clone the dom-intro repository in your projects folder into a folder called vuejs-intro

git clone https://github.com/codex-academy/dom-intro vuejs-intro

Remember to link this to a repository of your own later.

Reference VueJS

Add a reference to VueJS in the index.html file:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

See more here: https://vuejs.org/v2/guide/installation.html

Calculate bill

Create a new Vue instance for calculate bill in calculate-bill.js in the js folder:

let calculateBill = new Vue({
  el: '.calculateBill'
  
});

Add a className of calculateBill to the div that contains the Calculate Bill widget so that you can reference it in the Vue instance above.

Create a new method to calculate the bill called calculate:

let calculateBill = new Vue({
  el: '.calculateBill',
  // add this
  methods : {
    calculate : function() {
      alert('Lets calculate!');
    }
  }
});

And link it to the calculate button in the HTML at line 63 using the v-on:click directive:

  <button class="button-primary calculateBtn" on type="button" name="button" v-on:click="calculate">Calculate</button>

Save your changes and refresh the browser. Clicking on the Calculate button will now display an alert saying Let's calculate!.

Binding data to the screen

Add a new data property to you Vue Object instance

let calculateBill = new Vue({
  el: '.calculateBill',
  // add this
  data : {
    billTotal : 12.25
  },
  methods : {
    calculate : function() {
      alert('Lets calculate!');
    }
  }
});

Reference the new billTotal in your html on line 67 like this:

<span class="total ">R<span class="billTotal" >{{billTotal}}</span> </span>

Save and refresh - you should see a total amount of 12.25 now. If you change the amount in the Vue instance save and refresh you will see a different amount on the screen.

Binding text entered

let calculateBill = new Vue({
  el: '.calculateBill',
  data : {
    billTotal : 12.25,      
    // add this
    billString: ''
  },
  methods : {
    calculate : function() {
      alert('Lets calculate!');
    }
  }
});

Bind the textarea to the textBill data property in Vue like this on line 62 in the html:

  v-model="billString"

The line should look like this:

<textarea name="name" rows="20" cols="40" class="billString" class="billString" v-model="billString" ></textarea>

Change the calculate method to display the total length of the text enteres in the billString

calculate : function() {
  alert('Lets calculate : ' + this.billString.length);
}

Try it out.

Calculate the total

Now you have everything needed to calculate the total. Ensure billTotal is initialized to 0 instead of 12.25.

Change the calucate function to return the total cost for the bill string entered:

calculate : function() {
    let billParts = this.billString.split(',');
    let totalBill = 0;
    // calculate the totalBill
    
    // display the total bill on the screen by setting the total value to billTotal
    this.billTotal = totalBill;
}

If all went well the total should be display when the calculate button is clicked now.

Total without clicking a button

Change the widget to display the total as soon as values are entered into the billString textarea by making billTotal a computed value.

Try this:

let calculateBill = new Vue({
  el: '.calculateBill',
  data : {
    // remove this
    // billTotal : 12.25,      
    billString: ''
  },
  computed : {
    // add this
    billTotal : function () {
      let billParts = this.billString.split(',');
      let totalBill = 0;
      // calculate the totalBill
    
      // return the total bill on the screen by setting the total value to billTotal
      return totalBill;
    }
  },
  
  methods : {
    // remove this
    // calculate : function() {
      // calculate logic moves into - billTotal
    // }
  }
});

You should note that nothing needs to change in the html as it's still using the {{billTotal}} binding it's just how that is calculated in the Vue component.

Text input bill

For the text input bill widget create a new Vue instance called textInputBill in the text-bill.js file. Add a class to the div at line 71 in the index.html:

        <div class="six columns box textInputBill">

Add:

• a data section in the Vue instance,
• add two variables callTotal, smsTotal to it,
• and also one computed section with a function for grandTotal - this should return the is the sum of this.callTotal + this.grandTotal,
• bound all these variable to the screen using {{}} tags.
• Next add a methods section add a method called add,
• bind it to the Add button using v-on:click,
• add a variable for the billType in the data section,
• bind it to the billType text box using v-model="billType",
• add logic to the add method to add the correct amount to either callTotal or smsTotal.
• The grandTotal value should update automatically.

Note: that v-model will ensure that a value entered in the text box will be bound to the reference variable your VueJS instances data section. You can see more here.

Radio button bill

This widget is very similar to Text Input bill the only difference is that it's using radio buttons.

Bill with settings

For this component use all the skills together that you learnt above.

Commit to GitHub

Remove the existing repo it references like this:

If you do a, git remote -v you will see the github repo is referencing to a codeX repository.

To change that to a repo of your own remove the existing remote origin and add a new one.

git remote remove origin

Add a new one using:

git remote add origin <your GitHub repo url>