Upload
froyo-framework
View
83
Download
0
Embed Size (px)
Citation preview
Vue.JsThe Progressive Framework
Purwandi M@purwandi
Full Stack Web Developer @Froyo
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
Frontend Framework
The Progressive Framework
View
User Input
Render
State
var vm = new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' }})
<div id="demo"> <h1>{{msg}}</h1></div>
JavaScriptHTML
Binding
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
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
Component Oriented
Most App UIs can be broken down into components
Nav
Content
Item
Sidebar
SideItem
Every component is responsible for managing a piece of DOM
Nav
Content
Item
Sidebar
The entire UI can be abstracted into a tree of components
Vue.component('my-component', { props: ['msg'], template: '<p>{{msg}}</p>'})
Registering a global component
Using the component<my-component msg="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>
Data-passing with props<my-component :msg="msgFromParent"></my-
component>
parent
my-component
msgFromParent
msg
One-way binding
Build System
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
One More Thing1. Vue Dev Tools
Thanks
Scalling Up
1. More Features
2. Tooling Configuration
3. Code Organization
4. Team Collaboration
Scaling Down
1. Approachability
2. Avoid Overkills
3. Flexibility
4. Onboardinf Cost