Diễn đàn Nhật Bản - diendannhatban.info

NHÀ PHÁT TRIỂN - DEVELOPERS - 技術開発 => FRAMEWORK - SDK => VueJS => Tác giả chủ đề:: admin trong Chủ nhật, 20/05/2018, 11:23:13 pm

Tiêu đề: [Căn bản] Tạo ứng dụng "Hello World" với front-end framework VueJS
Gửi bởi: admin trong Chủ nhật, 20/05/2018, 11:23:13 pm

Mục tiêu:
- Trả lời câu hỏi Vuejs là gì?
- Tạo ứng dụng Vuejs đơn giản

1 Vuejs là gì? tham khảo thêm https://vuejs.org/

(https://user-images.githubusercontent.com/1205620/40280367-ef54c88e-5c8c-11e8-8bf7-97233838bf1b.png)

Vue (phát âm / vjuː / hay là / viu /) là một front-end framework để phát triển ứng dụng web. Không giống như các front-end framework khác, Vue được thiết kế rất đơn giản và dễ hiểu từ cấp thấp đến cao. Thư viện cốt lõi chỉ tập trung vào phần View nên dễ dàng tích hợp với các thư viện khác hoặc các dự án hiện có. Mặt khác, Vue cũng hoàn toàn có khả năng cung cấp các ứng dụng phức tạp hơn khi sử dụng kết hợp với các công cụ hiện đại và thư viện hỗ trợ bên ngoài.

2. Tạo ứng dụng Vuejs đơn giản

(https://user-images.githubusercontent.com/1205620/40280371-00d89838-5c8d-11e8-9165-d01dab5a28af.png)

Cách dễ nhất để thử Vue.js là sử dụng ví dụ JSFiddle Hello World. Hoặc, bạn có thể tạo tệp tin index.html và bao gồm Vue với link liên kết đến thư viện của VueJS

Code: Bạn không thể xem liên kết này. Đăng ký hoặc Đăng nhập

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HTML

Code: Bạn không thể xem liên kết này. Đăng ký hoặc Đăng nhập

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

<div id="app">
  <p>{{ title }}</p>
</div>

JAVASCRIPT

Code: Bạn không thể xem liên kết này. Đăng ký hoặc Đăng nhập

new Vue({
  el: '#app',
  data: {
    title: 'Hello World!'
  }
})

(http://)

Code: https://jsfiddle.net/diendannhatban/n12aqq5w/