Learning VueJS Through A Course From Udemy


Learning VueJS through a course from Udemy

Section 2

Create and Connect A Vue Application then declare data and bind output data to HTML file

  • {{ }} This is called Interpolation

  • html file :

<section id="user-goal">
  <h2>My Course Goal</h2>
  <p>{{ goal1 }}</p>
  • javascript file :
const app = Vue.createApp({
  data() {
    return {
      goal: "Finish this Course",
      vueLink: "https://v3.vuejs.org",


Interpolation but working with link tag for HTML : v-bind

  • Assume we have vueLink return on data from createApp like above, This HTML code won’t output vueLink like you do above :
<p>Learn more <a href="{{ vueLink }}"></a></p>
  • This is where we use v-bind method :
<p>Learn more <a v-bind:href="vueLink"></a></p>

Declare methods (functions) with VueJS App and use it inside interpolation

  • There is another options for createApp from VueJS allow users to declare an object that contains funtions (yes plural) and you can also call it in interpolation like this :
const app.createApp({
    data() {
        return {
            goal1: 'Try to finish this course !',
            goal2: 'Smile',
            vueLink: 'https://v3.vuejs.org/'
    methods() {
        aFunction() {
            return 'haha'
<div id="example">{{ aFunction() }}</div>

Adding HTML Elements instead of texts or functions into interpolation using v-html

const app = Vue.createApp({
  data() {
    return {
      html: "<h1> Ops </h1>",
<p id="test" v-html="html"></p>
  • Code above will return HTML element if you want to output HTML Elements instead of texts or functions by using v-html.

  • v-html is also used to return functions if you want

Adding eventListener with Vue using v-on:(event)

  • HTML Code :
<section id="events">
  <h2>Events in Action</h2>
  <button v-on:click="add(1)">Add</button>
  <button v-on:click="remove">Remove</button>
  <p>Result: {{ counter }}</p>
  • Javascript Code :
const app = Vue.createApp({
  data() {
    return {
      counter: 0,
  methods: {
    add(num) {
      return (this.counter = this.counter + num);
    remove() {
      return (this.counter = this.counter - 1);
  • We use v-on:(events) like v-on:click to add Cick event through VueJS. We can have many different events.

  • v-on:click=“” for click event

  • v-on:input=“function($event, arguments)” for onChange of input element

  • v-on:submit.prevent=“” for form submission

  • v-once for making sure that the data in their won’t change

  • v-model for two-way binding of input element

Computed and Watch Options on Vue.createApp

  • we use computed when we need a state that related to other states.
  • we use watch the same way we user useEffect in React but watch only triggers when the value we set up change.

Shorthand for v-bind: and v-on:

  • v-bind:class => :class
  • v-on:click => @click

Binding dynamic classes with VueJS

<section id="styling">
    :class="{active: dynamicStyle[0]}"
  • We won’t go into javascript file because the logic there is simple. It is just for turning dynamicStyle value from false to true and the opposite.

  • What we learn here are dynamic binding classes from VueJS :

    • class will decide what class this div will always have
    • :class stands for v-bind:class. This is used for binding new class based on the codition. In this case, dynamicStyle is that condition.
    • @click is for onCLickHandler

Download Details:

Author: Tris-909

Source Code: https://github.com/Tris-909/VueJS

#vue #vuejs #javascript

Learning VueJS Through A Course From Udemy
8.15 GEEK