Download as PDF, PPTX
More Related Content
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Intro to VueJS Workshop
Intro to VueJS Workshop
- 1. INTRO TO VUEJS WORKSHOP_
- 2. @Rafael_Casuso A B OU T M E •CTO @StayApp •CEO @SnowStormIO •Organizer @VueJsMadrid, @BotDevMad •Software Engineer with +10 years of experience leading teams and developing. •Software Architect looking for revolutionary ways to change the world. •Specialties: JavaScript, NodeJS, Conversational Intelligences. 2
- 3.
- 4. WHAT IS VUEJS?_ ‣A PROGRESSIVE FRAMEWORK FOR BUILDING INTERFACES ‣ MVVM PATTERN WITH FOCUS ON THE VIEWMODEL, CONNECTING VIEW AND MODEL WITH TWO-WAY REACTIVE DATA-BINDING ‣ CORE VALUES: REACTIVITY, COMPONENTIZATION, MODULARITY, SIMPLICITY AND STABILITY ‣ INFLUENCED BY ANGULARJS, KNOCKOUTJS, RACTIVEJS AND RIVETJS
- 5.
- 6.
- 7.
- 8. FEATURES_ ‣ PROPERTIES AREREACTIVE ATTRIBUTES PROXIED BY THE INSTANCE FROM DATA OBJECT ‣ METHODS ARE FUNCTIONS TO USE IN THE INSTANCE OR IN DIRECTIVE EXPRESSIONS ‣ INTERPOLATIONS CAN BE TEXT OR ATTRIBUTES WITH PROPERTIES OR JS EXPRESSIONS ‣ DIRECTIVES ARE V-ATTRIBUTES THAT MODIFY THE DOM WHEN JS EXPRESSION CHANGES ‣ FILTERS ARE FOR TEXT TRANSFORMATIONS, COMPUTED PROPS FOR MORE COMPLEX ‣ COMPUTED PROPS ARE COMPLEX MANIPULATIONS OF REACTIVE PROPS, CACHED BASED ON THEIR DEPENDENCIES ‣ COMPONENTS ARE USED TOGETHER USUALLY IN PARENT-CHILD RELATIONS ‣ PARENT PASSES DOWN DATA TO THE CHILD VIA PROPS ‣ CHILD SENDS MESSAGES TO PARENT VIA EVENTS
- 9.
- 10. SETTING UP_ ‣ LatestNode installed ‣ Use Node Versions Manager like n ‣ npm i -g n ‣ git clone https://github.com/VueJSMadrid/vue-workshop ‣ npm i
- 11. CONFIGURATION_ ‣ Package.json ‣ Webpack ‣Dev configuration ‣ Build configuration ‣ Vue Loader Configuration ‣ API Access: ‣ Register in https://marvel.com/register with Email Account ‣ Access https://developer.marvel.com/account and get Public Api Key ‣ Create src/config.js with apiKey as single property ‣ npm run dev
- 12. TOOLS_ ‣ VUE-CLI FORSCAFFOLDING PROJECTS ‣ VUE DEV TOOLS FOR INSPECTING COMPONENTS, PROPERTIES AND TIME-TRAVEL DEBUGGING ‣ https://github.com/vuejs/vue- devtools
- 13.
- 14. ROUTING_ ‣ VUE-ROUTER ISTHE OFFICIAL CORE PLUGIN ‣ DYNAMIC ROUTING MATCHING WITH PARAMS AND QUERY PARAMS ‣ NESTED ROUTES, NAMED ROUTES ‣ REDIRECT & ALIAS
- 15.
- 16. STATE MANAGEMENT_ ‣ VUEXIS THE ELM-INSPIRED OFFICIAL FLUX-LIKE IMPLEMENTATION ‣ VUEX CORE IS THE STORE, A CONTAINER OF APPLICATION STATE ‣ STORE IS THE SOURCE OF TRUTH
- 17. STATE MANAGEMENT_ ‣ STOREPASSED TO ROOT INSTANCE IS INJECTED IN CHILD COMPONENTS ‣ COMPONENTS CAN STILL HAVE LOCAL STATE ‣ STORE STATES ONLY CHANGES THROUGH COMMITTING MUTATIONS ‣ ACTIONS COMMIT MUTATIONS AND CAN CONTAIN ASYNC OPERATIONS
- 18.
- 19. COMPONENTS DEFINITION_ ‣ ACOMPONENT IS A VUE INSTANCE WITH PREDEFINED OPTIONS ‣ IT EXTENDS A HTML ELEMENT WITH ENCAPSULATED REUSABLE CODE ‣ THEY ARE NOT WEB COMPONENTS SPECIFICATION CUSTOM ELEMENTS: ‣ DO NOT NEED POLYFILLS ‣ IMPORTANT FEATURES LIKE CROSS-COMPONENT DATA FLOW, CUSTOM EVENT COMMUNICATION AND BUILD TOOLS INTEGRATION ‣ REGISTRATION CAN BE GLOBAL OR LOCAL ‣ DATA (MODEL) MUST BE A FUNCTION TO AVOID SHARING SAME REFERENCE BETWEEN COMPONENTS
- 20. SINGLE-FILE COMPONENTS_ ‣ SINGLEFILE .VUE WHERE TEMPLATE, JAVASCRIPT AND CSS IS ENCAPSULATED ‣ BUILD TOOL LIKE WEBPACK OR BROWSERIFY IS NEEDED ‣ VUE-LOADER FOR WEBPACK & VUEIFY FOR BROWSERIFY ‣ COMPLETE SYNTAX HIGHLIGHTING ‣ COMMONJS MODULES ‣ COMPONENT-SCOPED CSS
- 21.
- 22. COMPONENTS ARCHITECTURE_ ‣ APPLICATIONAS A TREE OF SELF-CONTAINED REUSABLE COMPONENTS
- 24.