Submit Search
Upload
第一次用 Vue.js 就愛上 [改]
•
345 likes
•
40,046 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
我的 DevOps 故事
我的 DevOps 故事
Poy Chang
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
Eric SIBER
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
Julien Wittouck
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
DK Lee
Vue js for beginner
Vue js for beginner
Chandrasekar G
Recommended
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
我的 DevOps 故事
我的 DevOps 故事
Poy Chang
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
Eric SIBER
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
Julien Wittouck
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Alphorm
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
DK Lee
Vue js for beginner
Vue js for beginner
Chandrasekar G
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
増田 亨
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Eduardo Mendes
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
kwatch
Introduction à spring boot
Introduction à spring boot
Antoine Rey
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
Josué Neis
Cookie and session
Cookie and session
Aashish Ghale
Spring boot
Spring boot
Pradeep Shanmugam
Introduction to Node.js
Introduction to Node.js
Rob O'Doherty
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
Ippon
Controllerのbefore_actionにおける インスタンス変数セットについて
Controllerのbefore_actionにおける インスタンス変数セットについて
pospome
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
Takuya Ueda
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
ENSET, Université Hassan II Casablanca
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
Naoki Nagazumi
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
Angular Data Binding
Angular Data Binding
Duy Khanh
Spring Boot RestApi.pptx
Spring Boot RestApi.pptx
Google Developers Group Libreville Nom de famille
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Node.js Express
Node.js Express
Eyal Vardi
Introdução ao GitHub e Git
Introdução ao GitHub e Git
Igor Steinmacher
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
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
増田 亨
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Eduardo Mendes
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
kwatch
Introduction à spring boot
Introduction à spring boot
Antoine Rey
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
Josué Neis
Cookie and session
Cookie and session
Aashish Ghale
Spring boot
Spring boot
Pradeep Shanmugam
Introduction to Node.js
Introduction to Node.js
Rob O'Doherty
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
Ippon
Controllerのbefore_actionにおける インスタンス変数セットについて
Controllerのbefore_actionにおける インスタンス変数セットについて
pospome
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
Takuya Ueda
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
ENSET, Université Hassan II Casablanca
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
Naoki Nagazumi
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
Angular Data Binding
Angular Data Binding
Duy Khanh
Spring Boot RestApi.pptx
Spring Boot RestApi.pptx
Google Developers Group Libreville Nom de famille
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Node.js Express
Node.js Express
Eyal Vardi
Introdução ao GitHub e Git
Introdução ao GitHub e Git
Igor Steinmacher
What's hot
(20)
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
Nippondanji氏に怒られても仕方ない、配列型とJSON型の使い方
Introduction à spring boot
Introduction à spring boot
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
Cookie and session
Cookie and session
Spring boot
Spring boot
Introduction to Node.js
Introduction to Node.js
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
Controllerのbefore_actionにおける インスタンス変数セットについて
Controllerのbefore_actionにおける インスタンス変数セットについて
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
Angular Data Binding
Angular Data Binding
Spring Boot RestApi.pptx
Spring Boot RestApi.pptx
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Node.js Express
Node.js Express
Introdução ao GitHub e Git
Introdução ao GitHub e Git
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
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
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 淺談前端建置工具
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
Recently uploaded
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
panagenda
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Mark Goldstein
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
ThousandEyes
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
Skynet Technologies
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
Ingrid Airi González
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
UiPathCommunity
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Rick Flair
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Inflectra
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Recently uploaded
(20)
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
第一次用 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