Successfully reported this slideshow.
Your SlideShare is downloading. ×

[DevDay2019] Vue.js - By Nguyen Viet Cuong, Engineer at MTI Technology

[DevDay2019] Vue.js - By Nguyen Viet Cuong, Engineer at MTI Technology

In this topic he'll talk about Vue.js - the most popular Javascript Framework for front-end development. This topic will help the audiences have a basic knowledge about Vue.js and how to start and master it faster.

In this topic he'll talk about Vue.js - the most popular Javascript Framework for front-end development. This topic will help the audiences have a basic knowledge about Vue.js and how to start and master it faster.

More Related Content

More from DevDay.org

Related Books

Free with a 30 day trial from Scribd

See all

[DevDay2019] Vue.js - By Nguyen Viet Cuong, Engineer at MTI Technology

  1. 1. Hello “I am Cuong V.Nguyen Currently, I’m working as a full stack developer and a team leader at MTI Technology Danang About Me
  2. 2. AN OCI PRESENTATION 2020 2 SUBSIDARY OF NO. 1 CONTENT MOBILE APPLICATIONS IN JAPAN MTI TECHNOLOGY CO., LTD DA NANG BRANCH FINTECH ATHLETIC HEALTHCARE HEALTHCARE
  3. 3. What I Would Like To Share With You Today Vue.js – JavaScript Framework Source: https://vuejs.org
  4. 4. We’ll go through 1. What's Vue.js 2. Why Vue.js 3. What's Vue CLI 4. Install 5. Demo 6. Deployment Basic knowledge about Vue.js Environment Development Deployment
  5. 5. What's Vue.js? • Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. • Vue is also perfectly capable of powering sophisticated Single-Page Applications 1 Source: https://vuejs.org/v2/guide/ Vue.js – JavaScript Framework
  6. 6. Framework for building user interfaces. Angular React Vue.js What's Vue.js 1 Source: https://www.sitepen.com/blog/web-frameworks-user-interface-development/
  7. 7. Single-Page Applications What's Vue.js 1 Source: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
  8. 8. Why Vue.js? 2 Source: https://medium.com/@designforsustainability/the-why-will-guide-the-what-and-the-how-11523af97cf6 • Performance • Support • Document • Job
  9. 9. Why Vue.js? 2 Source: https://medium.com/@designforsustainability/the-why-will-guide-the-what-and-the-how-11523af97cf6 Vue was developed by ex-Google employee Evan You in 2014. First release in February 2014 Latest version 2.6.8 / March 1, 2019 MIT License Feb 2014 Evan You May 2014 Facebook Otc 2010 Google
  10. 10. Why Vue.js 2 Source: https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8 Performance
  11. 11. Why Vue.js 2 Source: https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ Support
  12. 12. Why Vue.js 2 Source: https://vuejs.org Document https://vuejs.org/v2/guide/ https://vi.vuejs.org/v2/guide/index.html  Detailed documents.  Easy to learn  Meets all things you need
  13. 13. Why Vue.js 2 Companies that use Vue.js
  14. 14. Why Vue.js 2 Source: https://www.itjobswatch.co.uk/jobs/uk/vue.js.do Job
  15. 15. What's Vue CLI (Standard Tooling for Vue.js Development) 3 Source: https://vuejs.org/v2/guide/ • Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow
  16. 16. What's Vue CLI (Standard Tooling for Vue.js Development) 3 Source: https://vuejs.org/v2/guide/ 1) Basic folder structure 2) Basic workflow 3) Configuration 4) Manage plugins, dependences 5) Provide services (run dev, build production… ) 6) etc...
  17. 17. Install 4 https://cli.vuejs.org/guide/installation.html
  18. 18. Hello Vue.js 5 Create a new project
  19. 19. Hello Vue.js 5 Create a new project
  20. 20. Hello Vue.js 5 Create a new project
  21. 21. Hello Vue.js 5 Run project
  22. 22. Demonstration
  23. 23. API Server Detail Page Router V-for V-if v-show Axios post Axios get
  24. 24. Deployment 11
  25. 25. http://hinhnenppt.com/tuyen-tap-30-hinh-nen-powerpoint-cam-on-cuoi-slide-tuyet-dep.html

Editor's Notes

  • MTI Techology Danang Branch là một trong nhưng development center của MTI Technology Nhật Bản có trụ sở tại Tokyo, Ngoài DN thì còn có một Development center ở HCM nữa. Hiện tại ở chi nhánh DN bọn mình đang có khoảng 40 người, làm 3 product: 1 về Fintech, và 2 dự án về HealthCare, bọn mình là một công ty production. Các bạn có thể tìm hiểu thông tin ở ngoài booth của bọn mình.
  • Hiện tại công ty đang có gần 40 người, office tại tầng 23 tòa nha Viettin bank gần cầu Rồng.
  • Mình đã làm việc với Vuejs bao nhiêu lâu? 6 tháng làm việc với nó. Điều gì mình lại cho các bạn ngày hôm nay. Thì mình chỉ mong rằng mình mất 6 tháng để có thể hiểu được và làm việc được với Vue.js thì qua buổi chia sẻ này của mình các bạn chỉ mất 3 tháng thôi đã có thể nắm bắt làm việc được với Vue.js
  • - Vì mình chỉ biết về Vuejs
  • Thì điều đặc biệt ở đây là gì Vue.js ra đời năm tháng 3 2014, còn angular js ra đời 10 2010, React ra đời 5 2013, Vì Vue ra sau nên nó sẽ kế thừa được tất các các điểm hay, lợi thế từ nhưng js framework đi trước để tập hợp vào Vuejs.
  • Đây là dữ liệu mình lấy từ trang Medium, dựa vào dữ liệu này thì các bạn có thể thấy là Vue.js đang đứng đầu vè performace khi đưa nó so sánh với React và Angular
  • Số star trên github thì giúp cái bạn yên tâm trong việc support từ cộng đồng mã nguồn mở, Vuejs ra sau nhưng lại phát triển rất mạn từ giai đoạn 2015 trở đi
  • Mình thì không thể chứng mình được những điều mình nói ở trên nhưng nếu các bạn nhìn vào nhưng công ty này thì chắc chăn là bạn sẽ phải tin là Vuejs hiện tai đang được đánh rất cao trong cách js framework hiện tại.
  • Đây là số liệu mình lấy từ itjob của uk, các bạn có thể nhìn thấy là từ 2016 trở đi thì tốc độ tăng trưởng việc làm của vuejs nhanh như thế nào. Nếu mà so sánh về số lượng việc làm thì rõ rang là vuejs đang thua cái js framework ra đời trước nó như anguar và react nhưng đường dài mới biết ngựa hay thì trong tương lai cái nhân mình tin rằng vuejs nó sẽ trở thành một framework đứng đầu về tuyển dụng.
  • Thì mình chỉ hiểu đơn giản là Thông thường các bạn có thể tải vuejs về và tự cấu hình cho giống như là config folder để build, rồi quản lý cấu hình các library khác vào chẳn hạn, hay là thậm chí là các bạn phải xây dựng một structure cho cái project của các bạn, thì khi có VueCli các bạn có bỏ qua tất cả điều đó. Điều các bạn cần quan tâm duy nhất là tạo project qua VueCli và thực hiện cái logic mà các bạn muốn thôi mà không cần đến nhưng thứ khác.
  • Giống như mình nói trên thì VueCli nó sẽ cung cấp cho các bạn
  • Hiện tại thì mình đang dung bản cli 3.3.
  • Mình đã làm việc với Vuejs bao nhiêu lâu? 6 tháng làm việc với nó. Điều gì mình lại cho các bạn ngày hôm nay. Thì mình chỉ mong rằng mình mất 6 tháng để có thể hiểu được và làm việc được với Vue.js thì qua buổi chia sẻ này của mình các bạn chỉ mất 3 tháng thôi đã có thể nắm bắt làm việc được với Vue.js
  • Giới thiệu qua chức năng
    Cấu trúc Component
    Work follow
    Axios (Trong này các bạn sẽ thấy là có đoạn code là created() cái này là hook created trong vue life circle )
    Render dữ liệu bằng v-if, v-for
    Router
    Single-page-application

×