Submit Search
Upload
第一次用 Vue.js 就愛上 [改]
•
345 likes
•
40,058 views
Kuro Hsu
Follow
重新介紹 Vue.js 的特性,以及 2.0 即將帶來的變革。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 92
Download now
Download to read offline
Recommended
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Intro to vue.js
Intro to vue.js
TechMagic
Why Vue.js?
Why Vue.js?
Jonathan Goode
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
왜 쿠버네티스는 systemd로 cgroup을 관리하려고 할까요
왜 쿠버네티스는 systemd로 cgroup을 관리하려고 할까요
Jo Hoon
Vue.js
Vue.js
Jadson Santos
Nuxt.js - Introduction
Nuxt.js - Introduction
Sébastien Chopin
VueJS Introduction
VueJS Introduction
David Ličen
Recommended
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Intro to vue.js
Intro to vue.js
TechMagic
Why Vue.js?
Why Vue.js?
Jonathan Goode
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
왜 쿠버네티스는 systemd로 cgroup을 관리하려고 할까요
왜 쿠버네티스는 systemd로 cgroup을 관리하려고 할까요
Jo Hoon
Vue.js
Vue.js
Jadson Santos
Nuxt.js - Introduction
Nuxt.js - Introduction
Sébastien Chopin
VueJS Introduction
VueJS Introduction
David Ličen
An Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Express js
Express js
Manav Prasad
Angular modules in depth
Angular modules in depth
Christoffer Noring
Node.js Express
Node.js Express
Eyal Vardi
Express node js
Express node js
Yashprit Singh
Node js Introduction
Node js Introduction
sanskriti agarwal
Nodejs vatsal shah
Nodejs vatsal shah
Vatsal N Shah
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
Introduction to Node.js
Introduction to Node.js
Rob O'Doherty
Clean backends with NestJs
Clean backends with NestJs
Aymene Bennour
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Angular 2
Angular 2
Loiane Groner
Introduction Node.js
Introduction Node.js
Erik van Appeldoorn
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
More Related Content
What's hot
An Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Express js
Express js
Manav Prasad
Angular modules in depth
Angular modules in depth
Christoffer Noring
Node.js Express
Node.js Express
Eyal Vardi
Express node js
Express node js
Yashprit Singh
Node js Introduction
Node js Introduction
sanskriti agarwal
Nodejs vatsal shah
Nodejs vatsal shah
Vatsal N Shah
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
Introduction to Node.js
Introduction to Node.js
Rob O'Doherty
Clean backends with NestJs
Clean backends with NestJs
Aymene Bennour
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Angular 2
Angular 2
Loiane Groner
Introduction Node.js
Introduction Node.js
Erik van Appeldoorn
What's hot
(20)
An Overview on Nuxt.js
An Overview on Nuxt.js
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Vue.js Getting Started
Vue.js Getting Started
jQuery for beginners
jQuery for beginners
Basics of VueJS
Basics of VueJS
Express js
Express js
Angular modules in depth
Angular modules in depth
Node.js Express
Node.js Express
Express node js
Express node js
Node js Introduction
Node js Introduction
Nodejs vatsal shah
Nodejs vatsal shah
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
Bootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
Introduction to Node.js
Introduction to Node.js
Clean backends with NestJs
Clean backends with NestJs
An introduction to Vue.js
An introduction to Vue.js
Angular 2
Angular 2
Introduction Node.js
Introduction Node.js
Similar to 第一次用 Vue.js 就愛上 [改]
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
An introduction to Vue.js
An introduction to Vue.js
Pagepro
Play Framework on Google App Engine
Play Framework on Google App Engine
Fred Lin
Drupal point of vue
Drupal point of vue
David Ličen
Vue js and Dyploma
Vue js and Dyploma
Yoram Kornatzky
A New Vue for Web Development
A New Vue for Web Development
Chad Campbell
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
Love at first Vue
Love at first Vue
Dalibor Gogic
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Jasper Moelker
Play Support in Cloud Foundry
Play Support in Cloud Foundry
rajdeep
Let's vue
Let's vue
Plane Chao
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
Integration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + Selenium
tka
Module, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
Toolbox for Selenium Tests in Java: WebDriverManager and Selenium-Jupiter
Toolbox for Selenium Tests in Java: WebDriverManager and Selenium-Jupiter
Boni García
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
Similar to 第一次用 Vue.js 就愛上 [改]
(20)
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Vue 淺談前端建置工具
Vue 淺談前端建置工具
An introduction to Vue.js
An introduction to Vue.js
Play Framework on Google App Engine
Play Framework on Google App Engine
Drupal point of vue
Drupal point of vue
Vue js and Dyploma
Vue js and Dyploma
A New Vue for Web Development
A New Vue for Web Development
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
Basics of Vue.js 2019
Basics of Vue.js 2019
Love at first Vue
Love at first Vue
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Play Support in Cloud Foundry
Play Support in Cloud Foundry
Let's vue
Let's vue
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Integration Test Cucumber + Webrat + Selenium
Integration Test Cucumber + Webrat + Selenium
Module, AMD, RequireJS
Module, AMD, RequireJS
Toolbox for Selenium Tests in Java: WebDriverManager and Selenium-Jupiter
Toolbox for Selenium Tests in Java: WebDriverManager and Selenium-Jupiter
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Recently uploaded
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
CzechDreamin
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
IoTAnalytics
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Julian Hyde
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
UXDXConf
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
Patrick Viafore
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
David Michel
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
Stefano
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
John Staveley
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
FIDO Alliance
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
ScyllaDB
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
CzechDreamin
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
FIDO Alliance
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FIDO Alliance
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
shyamraj55
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
reely ones
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
FIDO Alliance
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
CzechDreamin
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
FIDO Alliance
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
Mark Opanasiuk
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
confluent
Recently uploaded
(20)
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
第一次用 Vue.js 就愛上 [改]
1.
Kuro Hsu kurotanshi@gmail.com Vue.js 改
2.
• Kuro Hsu •
@ • http://kuro.tw • kurotanshi [at] gmail.com
3.
Agenda • Vue.js • Vue •
Vue • Vue • Class • • Vue •
4.
Vue.js • JS / •
view • view • • (SPA, Single Page Application)
5.
10 vue.js http://goo.gl/RVQwop
6.
MVVM (Model-View-ViewModel)
7.
http://goo.gl/8n2bGr
8.
Vue.js
9.
vue.js
10.
vue-cli $ npm install
-g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
11.
Properties & Methods
12.
: VUE.JS (
) https://goo.gl/s3livG
13.
( root instance
)
14.
15.
Vue
16.
Vue.js IE8 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
17.
AngularJS 1.x
18.
ReactJS
19.
20.
Lifecycle Vue
21.
22.
23.
24.
25.
• init • created •
beforeCompile • compiled • ready lifecycle hooks • attached • detached • beforeDestroy • destroyed
26.
• init • created •
beforeCompile • compiled • ready • attached • detached lifecycle hooks in Vue 2.0 • beforeDestroy • destroyed • beforeMount • mounted • beforeUpdate • updated • activated • deactivated ref: https://github.com/vuejs/vue/issues/2873#upgrade-tips
27.
Data Binding
28.
• Vue mustache
template {{ }} <span>Message: {{ msg }}</span> : {{* msg }} HTML : {{{ raw_html }}} HTML : <div id="item-{{ id }}"></div>
29.
• {{ var
a = 1 }} • {{ if (ok) { return message } }} • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} computed
30.
directives angularJS Vue.js directive ( )
http://cn.vuejs.org/api/
31.
v-model http://goo.gl/SWbcKb
32.
v-bind http://goo.gl/dk0rZC
33.
filter • Vue.js {{
}} | filter • {{ 'abc' | capitalize }} ==> Abc • {{ 'abc' | uppercase }} ==> ABC • {{ 123456 | currency }} ==> $123,456.00
34.
Computed Properties
35.
• {{ }} view •
vue computed
36.
http://goo.gl/sHkYqF
37.
Class and Style class
38.
http://goo.gl/xqJgp9
39.
Conditional & List
Rendering
40.
v-if / v-else http://goo.gl/HJt73r
41.
v-show
42.
with template
43.
v-if v-show • v-if
v-show DOM v-if • v-show CSS (style) • v-show
44.
v-for http://goo.gl/BwuHYB
45.
http://goo.gl/z0CcH3
46.
v-for with object http://goo.gl/Ela7PF
47.
v-for with range http://goo.gl/9ggJ5F
48.
v-for with filter http://goo.gl/nxw9I3
49.
http://goo.gl/KRsMPM
50.
http://goo.gl/IPwiib
51.
: track-by v-for id Vue
track-by
52.
Event Handling
53.
v-on
54.
http://goo.gl/Gf9hCL
55.
56.
Modifiers
57.
58.
59.
Transitions
60.
http://goo.gl/Ws0e2v
61.
62.
transition with jQuery
animate http://goo.gl/g4xRXt
63.
Components
64.
Components • Component vue HTML •
HTML
65.
66.
❌
67.
props • scope • prop
.sync .once
68.
http://goo.gl/52SIzs
69.
null
70.
• prop •
this.$parent this.$root • this.$children ( ) this.$children v-if v-ref
71.
http://goo.gl/umMf39
72.
73.
74.
• $on() • $emit() •
$dispatch() • $broadcast() • DOM Event callback callback function return true
75.
http://goo.gl/phpbDQ
76.
77.
:is http://goo.gl/K0Zrps
78.
79.
keep-alive • keep-alive
80.
81.
http://goo.gl/lErGx4
82.
slot • angular transclusion •
W3C web-components slot • slot
83.
http://goo.gl/vmxj9G
84.
Tools & Resources
85.
Vue.js dev-tools https://goo.gl/T6Fvtu
86.
Vue-cli https://github.com/vuejs/vue-cli
87.
vue-cli $ npm install
-g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
88.
HTML Script Style Vue file
89.
Awesome Vue.js https://github.com/vuejs/awesome-vue
90.
Next,… Vue 2.0
! • • Vue 1.0 API • https://github.com/vuejs/vue/issues/2873
91.
92.
Thanks
Download now