Jianghu Digital Platform
Login

Simpler Web Programming Method - VueJS

12002

1. Introduction to This Lesson

In this lesson, you will learn the following: first, understand what VueJS is, why to choose Vue, and the advantages of VueJS in programming. Then, through a simple example, you will learn how to write templates, variables, and functions in VueJS, thereby gaining a preliminary grasp of VueJS programming methods.

Through practical operation, you will rewrite a calculator's code using VueJS. The purpose of this is to experience the advantages of VueJS programming compared to the simple calculator code learned in Lesson 03.

If you want to write more complex page code with VueJS, you can further study the content in the extended reading to gain a deeper understanding of VueJS template syntax, computed properties, watch properties, and components among other topics.

2. What is VueJS?

In previous lessons, we wrote a simple calculator. When it was necessary to modify the HTML content, the traditional method was to manipulate the HTML tags directly. However, if there are many places on the page that need to change, this method can become very cumbersome. In fact, there are simpler programming methods, and VueJS is one of them.

VueJS is a front-end framework developed based on HTML, CSS, and JavaScript, essentially a toolkit that allows developers to bind data (variables) to templates. When the data changes, the webpage automatically updates without the need to manually manipulate the HTML code. VueJS simplifies the coding process and improves development efficiency.

3. Features and Advantages of VueJS

The principle of displaying dynamic data on the web is to fill dynamic data into specified positions in the template to display the final webpage content. VueJS accomplishes this process, but its template and script writing methods differ.

Open the Beginner's Tutorial Template Syntax,

002-06-Vuejs-Template-Syntax.png

Click "Try it out," and you will see the value of message displayed on the right side of the page.

002-06-Vuejs-Template-Syntax-Explanation.png

From the code on the left, observe the writing of VueJS templates and scripts:

Template:
{{ message }}: Displays the value of the variable message, which is 'Hello Vue.js!', without needing to write a statement to retrieve the variable's value.

Script: 

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

This code indicates that it is a script written in VueJS, where the variable message is defined with the value 'Hello Vue.js!'. var app = new Vue({ }) is called a Vue instance, which is the basic code block of VueJS.

Through experimentation, it is discovered that VueJS variables and templates are interconnected; when a variable changes, the webpage automatically updates without the need to manually manipulate the HTML code.

Continue to add an input box inside this code, and click "Run":

002-06-Vuejs-Template-Syntax-Add-Input-Box.png

When you enter new content on the page, your input will be immediately saved to the variable. v-model="message" indicates that the value of this input box is saved to the variable message, and the page updates automatically.

Next, continue to add a button and a function to this code:

002-06-Vuejs-Template-Syntax-Add-Button.png

After clicking the Click Me button, the value of the variable message is changed by the function changeMessage, and the value in the template {{ message }} changes accordingly, causing the page to update automatically.

From this example written in VueJS, we can summarize the features and advantages of VueJS:

It creates a relationship between the data in the variable and the content displayed on the page. When new content is entered on the page, it is synchronized and saved to the variable in the script; when the script variable changes, the content on the page changes accordingly.

4. Understanding VueJS Templates, Variables, and Functions

Learning to program with VueJS starts with the basic writing of templates, variables, and functions:

Writing VueJS Templates: {{}}

  • VueJS uses a pair of curly braces {{}} to represent templates, which are used to dynamically display data on the page.

  • Inside {{}} is a variable, which can be found in the VueJS variable data: {} (the writing of data: {} will be learned below). With VueJS, it is very convenient to control the content to be displayed through variables. For example:

<div id="app">  
  <input v-model="message"><br>  
  <p>{{ message }}</p>  
  <button v-on:click="changeMessage">Click Me</button>  
</div>

Here, {{ message }} indicates that the message variable inside {{}} can directly access the data in the variable.

Writing VueJS Variables: data

  • Inside the Vue instance var app = new Vue({}), the data: {} appears, which is the writing method for VueJS variables.
  • VueJS variables data: {}, where various variables are placed inside {}, do not need to be defined with var, and can be used directly. For example:
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
})

In data: {}, the variable message is defined, and it contains the string 'Hello Vue!'.

Writing VueJS Functions: methods

  • In the Vue instance, methods: {} is used to define functions, and multiple functions can be placed inside {}. When function() appears, it indicates that this is a function, for example:
var app = new Vue({
  el: '#app',
  methods: {
    changeMessage: function() {
      this.message = 'Button clicked to change message';
    }
  }
})

Here, the function name changeMessage is placed before function, followed by :, and then the function function() {}. The writing of function() {} is the same as in JavaScript.

5. Project: Rewrite Calculator with VueJS

Having understood the most basic programming methods using VueJS, now we will work on a project to rewrite a simple calculator code using VueJS, allowing for a deeper understanding of these writing methods through practical operation.

Before programming with VueJS, you need to include the pre-written VueJS library into your code, a practice known as referencing. If this line of code is not included, using VueJS syntax will result in an error. Referencing others' pre-written code is an essential skill for programmers. 

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

Copy the code below to generate a file in Vscode: 

<!DOCTYPE html>  
<html>  
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>  
  <div id="app">  
    <input v-model="x"><br>  
    <button @click="b()">=</button><input v-model="r"><br>  
    <button @click="a(1)">1</button>  
    <button @click="a(2)">2</button>  
    <button @click="a(3)">3</button><br>  
    <button @click="a(4)">4</button>  
    <button @click="a(5)">5</button>  
    <button @click="a(6)">6</button><br>  
    <button @click="a(7)">7</button>  
    <button @click="a(8)">8</button>  
    <button @click="a(9)">9</button><br>  
    <button @click="a('+')">+</button>  
    <button @click="a(0)">0</button>  
    <button @click="a('-')">-</button>  
  </div>  

<script>  
  new Vue({  
    el: '#app',  
    data: {  
      r: "",  
      x: ""  
    },  
    methods: {  
      a: function (x) {  
        this.r = this.r+x;  
      },  
      b: function () {  
        this.x = eval(this.r).toString();  
      }  
    }  
  })  
</script>  
</html>

Open the browser file to see the following page:

002-06-vuejs-calculator.png

Comparing the above code with the simple calculator code written in HTML and JavaScript in Lesson 04, what do you find?

  • The number of lines of code has decreased.
  • The script does not require statements to change HTML content, reducing the amount of code written.
  • The input box <input v-model="r"> directly displays the value of the variable r.

VueJS simplifies the complexity of the code, which is one of its advantages, making programming easier.

6. Extended Reading: Read Documentation, Self-learn VueJS Template Rendering

The simplest VueJS template syntax has been introduced above. To write richer pages, you need to understand more about template writing. VueJS refers to these writings as template syntax and template rendering.

Open the VueJS Official Website to see the left sidebar, which contains template syntax, conditional rendering, list rendering, etc., for learning more about template rendering content.

7. Extended Reading: Read Documentation, Self-learn Computed Properties, Watch Properties, and Components

VueJS's computed properties and watch properties can replace complex JavaScript logic, solving issues of repeated calculations and monitoring data changes, simplifying complex operations. Click on the following documents to learn about computed properties and watch properties.

VueJS components are one of the most powerful features of VueJS. Components can extend HTML elements, encapsulate reusable code, and reduce the amount of code written. Click on the following documents to learn about components.