VueJS from Zero: Self Vue watcher for amelioration (Part 1)

This time

  • Little comparison between 3 JavaScript Frameworks
  • Little comparison between JavaScript and VueJS
  • First approach: Say ‘hello’ to some basic data-outputting syntaxes

This is not a full version including everything, but just like a small Vue watcher watching my amelioration studying - working with VueJS, and maybe helpful with someone.

A little Comparison between 3 JavaScript most popular Frameworks

VueJS

  • Complete component-based UI framework, includes most core features
  • A bit less popular than ReactJS and Angular

ReactJS

  • Lean and focus component-based UI library
  • Certain features (like routing) are added via community packages

Angular

  • Complete component-based UI framework, packed with features
  • Uses typescript
  • Can be overkill for small projects

A little comparison between JavaScript and VueJS

  • JavaScript: Imperative approach, means you have to declare every single step for solving problems, which should be executed by the browser
  • VueJS: Declarative approach, which means all you would do is defining the desired end result, the necessary data and leave it up to Vue to figure out what should be done by using special features (like Vue directives…)

Be patience if the following code and knowledge are weird and you cannot make them sticky in your head, the later articles will make things clearer, step by step

First approach: Ways of outputting data

  • Interpolation with the mustache syntax {{ … }}: the mustache syntax can be used for outputting data only between a pair of opening and closing HTML tags and nowhere else (otherwise use v-bind, detail later)
  // just normal HTML code with Vue built-in syntaxes
  <template>
    <div class="course-detail-header">
      // the 'course.title' is exactly value of the 'title' property of the 'course' object
      <h3>{{ course.title }}</h3>
    </div>
  </template>
  // import components, libraries, assets and other JavaScript logic here
  <script>
    export default {
      data() {
        return {
          course: { title: 'VueJS From Scratch' }
        }
      },
    }
  </script>
  • The ‘methods: {}’ property: where we declare functions, which should be called later to return a value, handle events or any necessary cases
  // just normal HTML code with Vue built-in syntaxes
  <template>
    <div class="course-detail-header">
      <h3>{{ course.title }}</h3>
      // click on this button will change the value of 'course.title' from 'VueJS From Scratch' to 'VueJS From Zero To Hero'
      <button
        @click="changeCourseTitle"
      >Change course title</button>
    </div>
  </template>
  // import components, libraries, assets and other JavaScript logic here
  <script>
    export default {
      data() {
        return {
          course: { title: 'VueJS From Scratch' }
        }
      },
      methods: {
        changeCourseTitle() {
          this.course.title = 'VueJS From Zero To Hero'
        },
      },
    }
  </script>
  • The ‘computed: {}’ property: a little bit same usage with the ‘methods: {}’ property at first glance, but totally different (more detail later)
  // just normal HTML code with Vue built-in syntaxes
  <template>
    <div class="course-detail-header">
      // same result as the first example, but in different syntax
      <h3>{{ courseTitle }}</h3>
    </div>
  </template>
  // import components, libraries, assets and other JavaScript logic here
  <script>
    export default {
      data() {
        return {
          course: { title: 'VueJS From Scratch' }
        }
      },
      computed() {
        courseTitle() {
          return this.course.title;
        },
      },
    }
  </script>
  • The ‘v-html’ directive: allow us to output raw html, but is not often used (so you can keep it out of your mind at the current time)

Next time we will get deeper into Vue, and the mist will gradually disapear

Next time

  • Vue components: Create your first Vue project, and make the above codes work
  • The ‘watch: {}’ property
  • When ‘methods’, ‘computed’ or ‘watch’?