Download to read offline
![Vue.component('my-component', { props: ['msg'], template: '<p>{{msg}}</p>' }) Registering a global component](https://image.slidesharecdn.com/mozzilaevent-vuejs-170131034900/75/Membangun-Moderen-UI-dengan-Vue-js-14-2048.jpg)
Uploaded byFroyo Framework
Membangun Moderen UI dengan Vue.js
The document provides an overview of Vue.js, a progressive framework for building web applications focused on declarative rendering and component-oriented architecture. It includes details on state management, client-side routing, and how to set up a project using Vue CLI with a focus on its scalability and flexibility. Additionally, it explains data binding and the creation of components for better UI management.
Membangun Moderen UI dengan Vue.js
- 1.
- 2. Purwandi M @purwandi Full StackWeb Developer @Froyo
- 3. Web App 1. Declarative& Reactivity Rendering 2. Component System Oriented Architecture 3. Client Side Routing 4. State Management 5. Build System 6. Client-Server Data Persistence
- 4.
- 5.
- 6.
- 7. var vm =new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' } }) <div id="demo"> <h1>{{msg}}</h1> </div> JavaScriptHTML Binding
- 8. var vm =new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' } }) <div id="demo"> <h1>{{msg}}</h1> <input type=”text” v-model=”msg”/> </div> JavaScriptHTML Two Binding
- 9. var vm =new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' } }) <div id="demo"> <h1>{{msg}}</h1> </div> JavaScript Dynamic Bindings Vue instance State DOM Mounting point Template
- 10.
- 11. Most App UIscan be broken down into components Nav Content Item Sidebar Side Item
- 12. Every component isresponsible for managing a piece of DOM Nav Content Item Sidebar
- 13. The entire UIcan be abstracted into a tree of components
- 14. Vue.component('my-component', { props: ['msg'], template:'<p>{{msg}}</p>' }) Registering a global component
- 15. Using the component <my-componentmsg="Hello!"> </my-component> my-component’s template will be inserted into the container element <p>Hello!</p> `msg` will be passed in as data state. <p>{{msg}}</p>
- 16. Data-passing with props <my-component:msg="msgFromParent"></my-component> parent my-component msgFromParent msg One-way binding
- 17.
- 18. Setup # install vue-cli $npm install --global vue-cli # create a new project using the "webpack" template $ vue init webpack my-project # install dependencies and go! $ cd my-project $ npm install $ npm run dev
- 19. One More Thing 1.Vue Dev Tools
- 20.
- 21. Scalling Up 1. MoreFeatures 2. Tooling Configuration 3. Code Organization 4. Team Collaboration Scaling Down 1. Approachability 2. Avoid Overkills 3. Flexibility 4. Onboardinf Cost