Soumettre la recherche
Mettre en ligne
第一次用 Vue.js 就愛上 [改]
•
345 j'aime
•
40,048 vues
Kuro Hsu
Suivre
重新介紹 Vue.js 的特性,以及 2.0 即將帶來的變革。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 92
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Why Vue.js?
Why Vue.js?
Jonathan Goode
introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Recommandé
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
Sheng-Han Su
Vue.js Getting Started
Vue.js Getting Started
Murat Doğan
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Why Vue.js?
Why Vue.js?
Jonathan Goode
introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Intro to vue.js
Intro to vue.js
TechMagic
An introduction to Vue.js
An introduction to Vue.js
Pagepro
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
NAVER Engineering
Life Cycle hooks in VueJs
Life Cycle hooks in VueJs
Squash Apps Pvt Ltd
VueJS Introduction
VueJS Introduction
David Ličen
Vue, vue router, vuex
Vue, vue router, vuex
Samundra khatri
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Introduction to Swagger
Introduction to Swagger
Knoldus Inc.
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
Advanced angular
Advanced angular
Sumit Kumar Rakshit
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
Vue.js
Vue.js
Jadson Santos
Vue js for beginner
Vue js for beginner
Chandrasekar G
Time based CAPTCHA protected SQL injection through SOAP-webservice
Time based CAPTCHA protected SQL injection through SOAP-webservice
Frans Rosén
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
CODE BLUE
Spring Boot and REST API
Spring Boot and REST API
07.pallav
使用 laravel 的前與後
使用 laravel 的前與後
Shengyou Fan
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
Contenu connexe
Tendances
Vue.js for beginners
Vue.js for beginners
Julio Bitencourt
Intro to vue.js
Intro to vue.js
TechMagic
An introduction to Vue.js
An introduction to Vue.js
Pagepro
Deep dive into Vue.js
Deep dive into Vue.js
선협 이
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
NAVER Engineering
Life Cycle hooks in VueJs
Life Cycle hooks in VueJs
Squash Apps Pvt Ltd
VueJS Introduction
VueJS Introduction
David Ličen
Vue, vue router, vuex
Vue, vue router, vuex
Samundra khatri
Basics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
Introduction to Swagger
Introduction to Swagger
Knoldus Inc.
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
Advanced angular
Advanced angular
Sumit Kumar Rakshit
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
Vue.js
Vue.js
Jadson Santos
Vue js for beginner
Vue js for beginner
Chandrasekar G
Time based CAPTCHA protected SQL injection through SOAP-webservice
Time based CAPTCHA protected SQL injection through SOAP-webservice
Frans Rosén
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
CODE BLUE
Spring Boot and REST API
Spring Boot and REST API
07.pallav
使用 laravel 的前與後
使用 laravel 的前與後
Shengyou Fan
Tendances
(20)
Vue.js for beginners
Vue.js for beginners
Intro to vue.js
Intro to vue.js
An introduction to Vue.js
An introduction to Vue.js
Deep dive into Vue.js
Deep dive into Vue.js
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
Life Cycle hooks in VueJs
Life Cycle hooks in VueJs
VueJS Introduction
VueJS Introduction
Vue, vue router, vuex
Vue, vue router, vuex
Basics of VueJS
Basics of VueJS
Introduction to Swagger
Introduction to Swagger
VueJS: The Simple Revolution
VueJS: The Simple Revolution
Advanced angular
Advanced angular
Basics of Vue.js 2019
Basics of Vue.js 2019
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Vue.js
Vue.js
Vue js for beginner
Vue js for beginner
Time based CAPTCHA protected SQL injection through SOAP-webservice
Time based CAPTCHA protected SQL injection through SOAP-webservice
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
Spring Boot and REST API
Spring Boot and REST API
使用 laravel 的前與後
使用 laravel 的前與後
Similaire à 第一次用 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
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
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
George Nguyen
Similaire à 第一次用 Vue.js 就愛上 [改]
(20)
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 발표 자료_공유용
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
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
Dernier
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Padma Pradeep
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
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
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
The Digital Insurer
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
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
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
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
Dernier
(20)
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
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
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 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
Télécharger maintenant