Suche senden
Hochladen
第一次用 Vue.js 就愛上 [改]
•
345 gefällt mir
•
40,046 views
Kuro Hsu
Folgen
重新介紹 Vue.js 的特性,以及 2.0 即將帶來的變革。
Weniger lesen
Mehr lesen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 92
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
Node.js Express
Node.js Express
Eyal Vardi
Gradle Introduction
Gradle Introduction
Dmitry Buzdin
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
Node.js Express Tutorial | Node.js Tutorial For Beginners | Node.js + Expres...
Node.js Express Tutorial | Node.js Tutorial For Beginners | Node.js + Expres...
Edureka!
JQuery introduction
JQuery introduction
NexThoughts Technologies
Empfohlen
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
Node.js Express
Node.js Express
Eyal Vardi
Gradle Introduction
Gradle Introduction
Dmitry Buzdin
jQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
Node.js Express Tutorial | Node.js Tutorial For Beginners | Node.js + Expres...
Node.js Express Tutorial | Node.js Tutorial For Beginners | Node.js + Expres...
Edureka!
JQuery introduction
JQuery introduction
NexThoughts Technologies
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
Johnny Sung
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
Reactjs
Reactjs
Neha Sharma
Spring Security 3
Spring Security 3
Jason Ferguson
Vue.js
Vue.js
Jadson Santos
Express js
Express js
Manav Prasad
Introduction to node.js
Introduction to node.js
jacekbecela
Spring Boot & WebSocket
Spring Boot & WebSocket
Ming-Ying Wu
DevOps with GitHub Actions
DevOps with GitHub Actions
Nilesh Gule
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
Demaecan
Intro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask Meetup
Alan Hamlett
REST APIs with Spring
REST APIs with Spring
Joshua Long
Front End Development | Introduction
Front End Development | Introduction
JohnTaieb
Nodejs Explained with Examples
Nodejs Explained with Examples
Gabriele Lana
Express JS
Express JS
Alok Guha
Spring Boot Actuator
Spring Boot Actuator
Rowell Belen
JavaScript - Part-1
JavaScript - Part-1
Jainul Musani
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
i-love-flamingo
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
Weitere ähnliche Inhalte
Was ist angesagt?
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
Johnny Sung
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
Reactjs
Reactjs
Neha Sharma
Spring Security 3
Spring Security 3
Jason Ferguson
Vue.js
Vue.js
Jadson Santos
Express js
Express js
Manav Prasad
Introduction to node.js
Introduction to node.js
jacekbecela
Spring Boot & WebSocket
Spring Boot & WebSocket
Ming-Ying Wu
DevOps with GitHub Actions
DevOps with GitHub Actions
Nilesh Gule
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
Demaecan
Intro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask Meetup
Alan Hamlett
REST APIs with Spring
REST APIs with Spring
Joshua Long
Front End Development | Introduction
Front End Development | Introduction
JohnTaieb
Nodejs Explained with Examples
Nodejs Explained with Examples
Gabriele Lana
Express JS
Express JS
Alok Guha
Spring Boot Actuator
Spring Boot Actuator
Rowell Belen
JavaScript - Part-1
JavaScript - Part-1
Jainul Musani
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
i-love-flamingo
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Was ist angesagt?
(20)
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
炎炎夏日學 Android 課程 - Part1: Kotlin 語法介紹
Deep dive into Vue.js
Deep dive into Vue.js
Reactjs
Reactjs
Spring Security 3
Spring Security 3
Vue.js
Vue.js
Express js
Express js
Introduction to node.js
Introduction to node.js
Spring Boot & WebSocket
Spring Boot & WebSocket
DevOps with GitHub Actions
DevOps with GitHub Actions
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
Intro to Jinja2 Templates - San Francisco Flask Meetup
Intro to Jinja2 Templates - San Francisco Flask Meetup
REST APIs with Spring
REST APIs with Spring
Front End Development | Introduction
Front End Development | Introduction
Nodejs Explained with Examples
Nodejs Explained with Examples
Express JS
Express JS
Spring Boot Actuator
Spring Boot Actuator
JavaScript - Part-1
JavaScript - Part-1
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
Flamingo Microservice based E-Commerce / Motivations,Backgrounds, Short Intro...
Basics of VueJS
Basics of VueJS
Ähnlich wie 第一次用 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
Ähnlich wie 第一次用 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)...
Kürzlich hochgeladen
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
charlottematthew16
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Kürzlich hochgeladen
(20)
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
第一次用 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
Jetzt herunterladen