Submit Search
Upload
第一次用 Vue.js 就愛上 [改]
•
345 likes
•
40,050 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
A Case Study in Attacking KeePass
A Case Study in Attacking KeePass
Will Schroeder
jq: JSON - Like a Boss
jq: JSON - Like a Boss
Bob Tiernay
introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
Vue Vuex 101
Vue Vuex 101
LocNguyen362
Vue, vue router, vuex
Vue, vue router, vuex
Samundra khatri
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
Recommended
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
A Case Study in Attacking KeePass
A Case Study in Attacking KeePass
Will Schroeder
jq: JSON - Like a Boss
jq: JSON - Like a Boss
Bob Tiernay
introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
Vue Vuex 101
Vue Vuex 101
LocNguyen362
Vue, vue router, vuex
Vue, vue router, vuex
Samundra khatri
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
jQuery
jQuery
Dileep Mishra
Use Node.js to create a REST API
Use Node.js to create a REST API
Fabien Vauchelles
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sites
Mikhail Egorov
Build RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
Spring boot jpa
Spring boot jpa
Hamid Ghorbani
Composer 從入門到實戰
Composer 從入門到實戰
Shengyou Fan
Building an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
Christopher Foresman
Node.js File system & Streams
Node.js File system & Streams
Eyal Vardi
Vue js for beginner
Vue js for beginner
Chandrasekar G
An introduction to Vue.js
An introduction to Vue.js
Pagepro
Securing AEM webapps by hacking them
Securing AEM webapps by hacking them
Mikhail Egorov
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
Frans Rosén
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
NodeJS for Beginner
NodeJS for Beginner
Apaichon Punopas
Javascript best practices
Javascript best practices
Jayanga V. Liyanage
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
Introduction Node.js
Introduction Node.js
Erik van Appeldoorn
Vue.js
Vue.js
Jadson Santos
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
More Related Content
What's hot
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
jQuery
jQuery
Dileep Mishra
Use Node.js to create a REST API
Use Node.js to create a REST API
Fabien Vauchelles
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sites
Mikhail Egorov
Build RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
Spring boot jpa
Spring boot jpa
Hamid Ghorbani
Composer 從入門到實戰
Composer 從入門到實戰
Shengyou Fan
Building an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
Christopher Foresman
Node.js File system & Streams
Node.js File system & Streams
Eyal Vardi
Vue js for beginner
Vue js for beginner
Chandrasekar G
An introduction to Vue.js
An introduction to Vue.js
Pagepro
Securing AEM webapps by hacking them
Securing AEM webapps by hacking them
Mikhail Egorov
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
Frans Rosén
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
NodeJS for Beginner
NodeJS for Beginner
Apaichon Punopas
Javascript best practices
Javascript best practices
Jayanga V. Liyanage
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
Introduction Node.js
Introduction Node.js
Erik van Appeldoorn
What's hot
(20)
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
jQuery
jQuery
Use Node.js to create a REST API
Use Node.js to create a REST API
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sites
Build RESTful API Using Express JS
Build RESTful API Using Express JS
Spring boot jpa
Spring boot jpa
Composer 從入門到實戰
Composer 從入門到實戰
Building an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
Node.js File system & Streams
Node.js File system & Streams
Vue js for beginner
Vue js for beginner
An introduction to Vue.js
An introduction to Vue.js
Securing AEM webapps by hacking them
Securing AEM webapps by hacking them
jQuery for beginners
jQuery for beginners
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
How to steal and modify data using Business Logic flaws - Insecure Direct Obj...
Nestjs MasterClass Slides
Nestjs MasterClass Slides
An introduction to Vue.js
An introduction to Vue.js
NodeJS for Beginner
NodeJS for Beginner
Javascript best practices
Javascript best practices
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Introduction Node.js
Introduction Node.js
Similar to 第一次用 Vue.js 就愛上 [改]
Vue.js
Vue.js
Jadson Santos
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
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)
Vue.js
Vue.js
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Vue 淺談前端建置工具
Vue 淺談前端建置工具
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
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Softradix Technologies
costume and set research powerpoint presentation
costume and set research powerpoint presentation
phoebematthew05
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Wonjun Hwang
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
MarianaLemus7
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
Recently uploaded
(20)
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
costume and set research powerpoint presentation
costume and set research powerpoint presentation
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
第一次用 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