Chuyển sang Vue, chúng ta vẫn sử dụng lại demo ở bài trước nhưng chúng ta sẽ chuyển qua dùng Vuejs. bạn nào chưa xem thì thì quay lại xem bài Xây dựng ứng dụng đầu tiên chỉ bằng JavaScript . Mình sẽ comment tất cả mã code trong file app.js và nhận xét nó sau.

/* Xây dựng lại ứng dụng với Vue */


/* Xây dựng ứng dụng đầu tiên chỉ bằng JavaScript */
/*
    const buttonEl = document.querySelector('button');
    const inputEl = document.querySelector('input');
    const listEl = document.querySelector('ul');

    function addGoal() {
        const enteredValue = inputEl.value;
        const listItemEl = document.createElement('li');
        listItemEl.textContent = enteredValue;
        listEl.appendChild(listItemEl);
        inputEl.value = '';
    }

    buttonEl.addEventListener('click', addGoal);
*/

Bây giờ đoạn code sẽ không có bất kỳ tác dụng nào nữa. Mình không xóa nó để chúng ta vẫn có thể xem nó và so sánh nó. Bởi vì bây giờ chúng ra muốn sử dụng Vue.

Để làm được điều đó, trước hết chúng ta cần thêm Vue. Chúng ta cần import Vue vào website. Chúng ta có thể làm điều này từ vuejs.org và trên trang  liên kết "Cài đặt", điều này sẽ đưa bạn đến tài liệu chính thức nơi bạn tìm thấy hướng dẫn về cách tạo một dự án Vue.

Nhân tiện đây, nói chung, tài liệu chính thức của Vuejs là thực sự tốt. Vì vậy, ngoài việc tham gia series này, mình chỉ có thể khuyên bạn cũng nên đi sâu vào tài liệu chính thức sau khi trải qua series này để tìm hiểu sâu hơn hoặc làm mới các khái niệm nhất định.

Khi bạn vào trang Quick Start các bạn sẽ tìm thấy các cách khác nhau tạo một dự án Vue. Chúng ta sẽ tìm hiểu về những cách khác nhau trong suốt series này, nhưng ở bài demo này cách dễ nhất là không cài đặt các gói (package) từ npm, hay yarn, như nó đã được đề cập trên trang hướng dẫn.

Chúng ta sẽ làm điều này sau, nhưng thay vào đó, cách dễ nhất để bắt đầu là chỉ cần import vào package Vue từ CDN vào trang của bạn. Vì ở ví dụ này mình chỉ muốn trình bày bao quan trước và sau đó chúng ta sẽ đi sâu vào từng thành phần sau. Để import được CDN và cách sử dụng các bạn tham khảo đoạn code sau:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Bước tiếp theo chúng ta có thể copy thẻ script CDN của Vue và để nó vào cuối file .html.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Bạn nên đảm bảo rằng liên kết CDN ở đây kết thúc bằng vue@3 hoặc vue@next, mà đã cung cấp cho bạn phiên bản 3. Vì vậy, trước khi chúng ta thực thi bên app.js, thêm script tag CDN của Vue phía trên, hoặc phía dưới file .html điều đó sẽ cho phép script của bạn sử dụng được Vue.

Như vậy là chúng ta đã xong việc import CDN để có thể sử dụng Vue trong project của chúng ta. Và bây giờ chúng ta sẽ cùng nhau triển khai demo bằng Vue trong app.js.

Với Vue, chúng ta có thể giải quyết vấn đề tương tự trong demo trước.Trong script Java thông thường, mà chúng ta đã sử dụng ở demo trước đây, chúng ta sử dụng cái gọi là phương pháp tiếp cận mệnh lệnh (imperative approach). Có nghĩa là chúng ta xác định từng bước, từng bước, sẽ được thực thi bởi trình duyệt, các bạn có thể xem comment bên dưới, chúng ta đã xác định từng bước một.

const buttonEl = document.querySelector('button'); // Get access to the button
const inputEl = document.querySelector('input'); // Get access to the input element
const listEl = document.querySelector('ul'); // Get access to the list element

//create a function
function addGoal() {
  const enteredValue = inputEl.value; // get access to the entered value
  const listItemEl = document.createElement('li'); // create a list item element
  listItemEl.textContent = enteredValue; // add the text content
  listEl.appendChild(listItemEl); // append this list item
  inputEl.value = ''; // clear the value
}

// add a click event handler to the button and execute this function
buttonEl.addEventListener('click', addGoal);

Bạn có thấy một pattern(mô hình)? Chúng ta xác định từng bước. Với Vue, chúng ta có một cách tiếp cận hoàn toàn khác. Ở đó, chúng ta xác định kết quả cuối cùng mong muốn và dữ liệu chúng ta sẽ cần trong ứng dụng Vue của mình và chúng ta sẽ để Vue tìm ra những gì cần được tạo hoặc được thêm hoặc thay đổi trong Dom tại thời điểm đó.

Và để làm được điều đó, chúng ta cần để tạo Vue app, sẽ kiểm soát mã HTML của chúng ta. Và chúng ta thực hiện điều này bằng cách gọi Vue.

Vue.createApp({
  //do something here
});

là một đối tượng toàn cục (global) có sẵn trong Vue (Vue.createApp). Vì vậy, đối tượng Vue toàn cục này, chúng ta có thể gọi là createApp. CreateApp nhận một đối tượng (object), một đối tượng JavaScript, nơi chúng ta định cấu hình ứng dụng Vue này. Và khi mình đề cập đến cấu hình, ý mình là những thứ như cài đặt cho biết loại dữ liệu nào chúng ta sẽ sử dụng trong ứng dụng Vue của mình.

Ví dụ, trong bản demo này, mình dự định làm việc với một danh sách các mục tiêu (goals). Vì vậy, một phần dữ liệu mà chúng ta sẽ cần là danh sách các goals. Một phần dữ liệu khác mà chúng ta cần là những gì người dùng đã nhập vào input.

Và sau khi chúng ta xác định dữ liệu đó xong thì chúng ta phải đưa chúng vào đối tượng data và đối tượng này nằm trong (createApp).

Vue.createApp({
  data() {
    return {
     //thuộc tính
    };
  }
});

Trong Vue.js, đối tượng data được sử dụng để định nghĩa dữ liệu cho một component. data chứa các giá trị dữ liệu mà component sử dụng và hiển thị trong giao diện người dùng. Cụ thể, khi bạn định nghĩa một đối tượng data trong một component Vue, các thuộc tính của đối tượng đó sẽ trở thành các biến có thể được sử dụng trong template của component đó. Khi các giá trị của các thuộc tính này thay đổi, giao diện người dùng sẽ được tự động cập nhật để phản ánh các thay đổi này.

Chúng ta cũng cần nhớ thêm rằng, nếu bạn cảm thấy mọi thứ diễn ra quá nhanh, đừng lo lắng. Chúng ta sẽ đào sâu hơn vào tất cả các kiến thức cơ bản này trong mô-đun tiếp theo. Phần này chỉ mang tính chất tổng quan nhanh chóng để giúp bạn làm quen, đó cũng là lý do tại sao mình không đi sâu vào mọi khái niệm trong lúc này. Hãy yên tâm, chúng ta sẽ thực hiện điều đó trong các bài học sau.

Bây giờ, chúng ta cần quay lại một chút với đối tượng ở đây. Ở đây, chúng ta có thể thêm dữ liệu mà chúng ta muốn quản lý trong ứng dụng này, đó sẽ là một mảng các goals. Mảng này ban đầu sẽ là một cặp key và value, trong đó giá trị được khởi tạo của người dùng nhập vào sẽ là một chuỗi trống. Hai phần dữ liệu này sẽ là phần mà Vue sẽ theo dõi.

Vue.createApp({
  data() {
    return {
      goals: [], // danh sách các mục tiêu
      enteredValue: '' // lấy dữ liệu người dùng đã nhập vào input
    };
  }
});

Chúng ta có thể kết nối giá trị đã nhập với đầu vào bằng cách sử dụng một thuộc tính đặc biệt gọi là v-model. Điều này sẽ tạo một kết nối giữa đầu vào và giá trị đã nhập, giúp Vue tự động cập nhật đầu vào khi giá trị nhập thay đổi. Điều này giúp giảm bớt công việc quản lý đầu vào theo cách thủ công.

  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
         ...
      </div>
        ...
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
  </body>

Bây giờ, khi người dùng nhấn nút "Add goal", chúng ta muốn đảm bảo rằng chúng ta nhận được giá trị hiện đã nhập và thêm giá trị này vào mảng goals. Điều này có thể được thực hiện bằng cách thêm một phương thức có tên addGoal vào đối tượng chúng ta đang chuyển vào ứng dụng (createApp). Phương thức này sẽ được kích hoạt mỗi khi nút được nhấn và sẽ thêm giá trị đã nhập vào mảng goals. Và thay vì tiếp cận thủ công tạo ra phần tử button và thêm sự kiện click, như đã làm trước đó, chỉ với JavaScript, với Vue, chúng ta có thể chỉ cần thêm một thuộc tính đặc biệt khác của phần tử button là thuộc tính V-on. Sau đó, chúng ta thêm dấu hai chấm, và sau đó là tên của sự kiện mà chúng ta muốn, trong trường hợp này, chúng ta chỉ định tên của phương thức sẽ được kích hoạt (addGoal). Với điều đó, Vue sẽ đảm bảo rằng addGoal được thực thi bất cứ khi nào nút này được nhấp và sau đó nó sẽ tự động cung cấp cho chúng ta giá trị hiện đã nhập và thêm nó làm giá trị mới cho goals.

<body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button v-on:click="addGoal">Add Goal</button> //event click addGoal
      </div>
      ...
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
 </body>

Vue.createApp({
  data() {
    return {
      goals: [], // danh sách các mục tiêu
      enteredValue: '' // lấy dữ liệu người dùng đã nhập vào input
    };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue); //thêm giá trị từ input vào mảng goals
      this.enteredValue = '';
    }
  }
});

Cuối cùng, chúng ta muốn hiển thị danh sách mục tiêu theo thứ tự. Với Vue, chúng ta chỉ cần sử dụng thuộc tính v-for để lặp qua mảng goals và tạo một mục danh sách cho mỗi goal. Điều này giúp chúng ta tự động cập nhật danh sách khi mảng thay đổi. Việc này đảm bảo rằng chúng ta có một hiển thị động của mục tiêu trong ứng dụng của mình. Để hiện thị được các goals chúng ta cần phải sử dụng cú pháp được hiểu bởi Vue đó là dấu ngoặc nhọn kép mở và đóng, và giữa chúng là goal.

<body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button v-on:click="addGoal">Add Goal</button>
      </div>
      <ul>
        <li v-for="goal in goals">{{ goal }}</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
 </body>

Ok vậy là xong các bước add goal và hiện thị goals sử dụng bằng Vue của chúng ta, khi bạn chạy trên thực tế nó vẫn chưa chạy được đâu bởi nó còn thiếu 1 yếu tố rất quan trọng đó là phương thức mount, Trong Vue.js, mount là một phương thức được sử dụng để "gắn" một instance Vue vào một phần tử trong DOM, để bắt đầu quản lý phần tử đó và các thành phần con của nó.

Chúng ta cần gọi mount và cho Vue biết phần nào của trang sẽ được kiểm soát bởi ứng dụng Vue đó. Và thật tiện lợi, chúng ta có một div ở đây, với id là "app".

<body>
    <div id="app">
     ...
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
 </body>

Vue.createApp({
 ...
}).mount('#app');

Ok vậy là kết thúc xây dựng lại ứng dụng với Vue, nhớ rằng Vue thực hiện nhiều công việc phức tạp sau cú pháp đơn giản này để quản lý kết nối và cập nhật tự động. Chúng ta sẽ khám phá thêm về điều này trong các bài học tiếp theo.

Full code:

app.js

Vue.createApp({
  data() {
    return {
      goals: [], // danh sách các mục tiêu
      enteredValue: '' // lấy dữ liệu người dùng đã nhập vào input
    };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue);
      this.enteredValue = '';
    }
  }
}).mount('#app');

.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button v-on:click="addGoal">Add Goal</button>
      </div>
      <ul>
        <li v-for="goal in goals">{{ goal }}</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Vue vs Vanilla JavaScript (just JavaScript)

Vanilla JavaScript đơn giản là cách gọi JavaScript nguyên bản, không có bất kỳ thư viện hoặc framework nào khác đi kèm. Thuật ngữ "vanilla" trong ngữ cảnh này được sử dụng để chỉ sự đơn giản, tự nhiên, không kèm theo bất kỳ điều gì thêm vào. JavaScript là ngôn ngữ lập trình phía client-side phổ biến được sử dụng để thêm tính năng tương tác vào các trang web, và khi được sử dụng mà không cần thư viện hoặc framework bổ sung nào, nó được gọi là Vanilla JavaScript.

Bây giờ chắc chắn có rất nhiều ma thuật trong đó vào lúc này. Nhưng điều quan trọng là với Vue, chúng ta chỉ tìm kết quả cuối cùng và chúng ta sử dụng các tính năng đặc biệt này trong mã HTML, để kết nối HTML với dữ liệu và logic được quản lý trong ứng dụng Vue. Và chúng ta sẽ tìm hiểu về rất nhiều tính năng mà Vue cung cấp cho chúng ta, cho phép tạo bất kỳ loại ứng dụng nào. Và có thể làm điều này và làm theo cách tiếp cận khai báo này, nơi chúng ta đã khai báo kết quả thay vì các bước để đạt được điều đó, cho phép chúng ta xây dựng các ứng dụng siêu lớn mà không gặp bất kỳ vấn đề nào.

Trong khi chỉ JavaScript, nếu chúng ta có một ứng dụng phức tạp hơn, sẽ nhanh chóng gặp vấn đề. chúng ta sẽ nhanh chóng đối mặt với các vấn đề ở đó trong các ứng dụng lớn hơn nếu chúng ta chỉ sử dụng JavaScript và việc viết một ứng dụng không có lỗi và mang lại hiệu suất tuyệt vời sẽ rất khó nếu chỉ sử dụng JavaScript. Với Vue, mọi việc sẽ trở nên dễ dàng. Và trong series, bạn sẽ tìm hiểu tất cả về Vue.