DANH MỤC: Vue.js

Bài 1: Vuejs là gì? Viết chương trình đầu tiên


Tiếp theo với series javascript framework, hôm nay chúng ta sẽ tìm hiểu về vuejs một framework khá là nổi trong thời gian gần đây.

1, Vue.js là gì?

-Vue (phát âm là /vjuː/, giống view) là một progressive framework dùng để xây dựng giao diện người dùng ( UI ). Không giống các monolithic framework. Core của Vue chỉ tập trung vào lớp view mà và nó rất dễ để làm quen hay tích hợp với các thư viện hoặc các project có sẵn.Hơn nữa, Vue lại chứa đựng một sức mạnh rất lớn trong việc xây dựng Single-Page Applications khi được kết hợp với công cụ build và các thư viện/component được xây dựng bởi cộng đồng.

-Và Vue.js cũng hỗ trợ hầu hết các trình duyệt hiện nay. Nên các bạn có thể hoàn toàn yên tâm khi học Vue.js nhé!

2, Kiến thức cần có để học vue.js.

-Như ở trên mình đã nói vue.js là một javascript framework nên bắt buộc nếu muốn học được vue.js thì bạn phải có kiến thức của javascript. Và một điều nữa vì vue.js xử lý phần front-end lên tiếp đó các bạn cần phải có kiến thức của HTML,CSS.

-Vậy chúng ta đi đến kết luận để học được vue.js thì cần phải biết những cái sau:

  • HTML.
  • CSS.
  • JAVASCRIPT.

3, Nhúng core vue.js.

-Đầu tiên để sử dụng được vue.js thì chúng ta cần phải nhúng core của nó vào bằng 2 cách sau:

CDN

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

Dẫn file local

-Các bạn download vue.js tại đây. Sau đó dẫn link đến tệp tin vue.js của bạn.

VD:

<script src="dist/vue.js"></script>

4, Viết chương trình đầu tiên.

-Sau khi đã nhúng được core của vue.js thì chúng ta tiếp tục viết chương trình đầu tiên.

Đầu tiên các bạn tạo cho mình 2 file index.htmlapp.js ở dùng cấp thư mục.

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>test Vuejs</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="app">
		{{ message }}
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="app.js"></script>
</html>

app.js

var app= new Vue({
        el: '#app',
        data: {
      	  message:'helloworld!'
  	    }
})  

Xem Kết Quả

-Các bạn chạy lên và xem thử kết quả nhé! (thông số bên trong thì mình sẽ giải thích ở các bài tiếp theo).

5, Lời kết.

-Như vậy hôm nay mình đã giới thiệu với mọi người về vuejs là gì và viết chương trình đầu tiên với vuejs. Hy vọng qua bài hôm nay các bạn sẽ thích vuejs.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia