Submit Search
Upload
第一次用 Vue.js 就愛上 [改]
•
345 likes
•
40,052 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
Why Vue.js?
Why Vue.js?
Jonathan Goode
스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해
beom kyun choi
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Vue.js
Vue.js
Jadson Santos
Recommended
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Why Vue.js?
Why Vue.js?
Jonathan Goode
스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해
beom kyun choi
Nestjs MasterClass Slides
Nestjs MasterClass Slides
Nir Kaufman
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Vue.js
Vue.js
Jadson Santos
NestJS
NestJS
Wilson Su
[수정본] 우아한 객체지향
[수정본] 우아한 객체지향
Young-Ho Cho
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
Intro to vue.js
Intro to vue.js
TechMagic
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
웹을 지탱하는 기술
웹을 지탱하는 기술
JungHyuk Kwon
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Clément Wehrung
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
VueJS Introduction
VueJS Introduction
David Ličen
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model
Han Lee
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
우아한 모노리스
우아한 모노리스
Arawn Park
도메인 주도 설계의 본질
도메인 주도 설계의 본질
Young-Ho Cho
Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자
Kyoung Up Jung
이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정
Arawn Park
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
NestJS
NestJS
Wilson Su
[수정본] 우아한 객체지향
[수정본] 우아한 객체지향
Young-Ho Cho
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
Intro to vue.js
Intro to vue.js
TechMagic
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
웹을 지탱하는 기술
웹을 지탱하는 기술
JungHyuk Kwon
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Clément Wehrung
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
VueJS Introduction
VueJS Introduction
David Ličen
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model
Han Lee
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
우아한 모노리스
우아한 모노리스
Arawn Park
도메인 주도 설계의 본질
도메인 주도 설계의 본질
Young-Ho Cho
Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자
Kyoung Up Jung
이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정
Arawn Park
What's hot
(20)
NestJS
NestJS
[수정본] 우아한 객체지향
[수정본] 우아한 객체지향
Deep dive into Vue.js
Deep dive into Vue.js
Intro to vue.js
Intro to vue.js
An Introduction to Vuejs
An Introduction to Vuejs
VueJS: The Simple Revolution
VueJS: The Simple Revolution
웹을 지탱하는 기술
웹을 지탱하는 기술
Nuxtjs cheat-sheet
Nuxtjs cheat-sheet
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Basics of VueJS
Basics of VueJS
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
VueJS Introduction
VueJS Introduction
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model
Basics of Vue.js 2019
Basics of Vue.js 2019
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
우아한 모노리스
우아한 모노리스
도메인 주도 설계의 본질
도메인 주도 설계의 본질
Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자
이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정
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
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
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Jonathan Johnson
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 발표 자료_공유용
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)...
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Recently uploaded
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
Neo4j
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
AndikSusilo4
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
XfilesPro
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
OnBoard
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
soniya singh
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
carlostorres15106
Recently uploaded
(20)
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
Slack Application Development 101 Slides
Slack Application Development 101 Slides
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
第一次用 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