Web development with Vue.js 2
How to leverage its features to build high-performing, reactive web interfaces with Vue.js.
Complex concepts
- Reactive data bindings
- Reusable components
- Plugins
- Filters
- State Management
Contents
Terms
Application State, global centralized
Bootstrap: responsive
CDN Content Distribution Network: delivers data with high availability and performance, Vue.js distributed in npmcdn
CSS
Declarative views (binds data) and Directives (HTML special attributes, allos data binding)
DOM
npm. Package manager for JS
Markdown (.md extension)
MVVM Model View ViewModel. Architectural pattern with ViewModel as central point. Bridge between view and data
model
MVC Architectural pattern
One way data binding. Data model -> View layer
Rapid prototyping. Build mockups of UI, includes basic user interaction
Reactivity. Immediate propagation of changes from data to view layer
Two way data binding. Data model <-> view layer
UI: Communication user -> app
Vuex: simple management of application state
The Importance of Vue.js and Working with Vue.js
Advantages
Bind data models to representation layer
Reuse components
No create special model or creations
Registered no required
No installing ending dependencies
Ways to use Vue.js
Only add vue.js file to project
Vue-cli with webpack and browserify
- Bootstrap the whole project
- Supports hot reloading
- Developer tools
Separate view files and css or together in the same view file
Preprocessors or a favourite one
No installs, no npms
Comparison with Angular and others
https://vuejs.org/v2/guide/comparison.html
The Awesome Vue.js
https://github.com/vuejs/awesome-vue
The Application - Shopping List
Rapid prototyping with Bootstrap
An online HTML parser:
Developer tools (Chrome extension) for Vue.js:
https://github.com/vuejs/vue-devtools
Two-way data binding:
https://vuejs.org/v2/api/#v-model
Vue.js into an existing project
Ed-Era is an educational platform based on Open EDX
Open EDX is an open platform to educational purposes, and use Gitbook
Gitbook.com is a platform based on Node.js
https://github.com/EducationalEra/ed-era-book-english
Use Gitbook:
https://github.com/GitbookIO/gitbook
https://github.com/GitbookIO/gitbook/blob/master/docs/setup.md
Improvements of Vue.js 2
Vue.js 2 faster than React:
Vue 2.0's built-in streaming server-side rendering enables rendering of components while getting a readable stream back and directly piping it to the HTTP response. You stressed Vue 2.0 also provides a light footprint and a "forgiving" learning curve.
Even with the compiler included, the build is sitting at 17kb min+gzip, still lighter than the current 1.0 build.
Improvements
Data binding is different
Lightweight Virtual DOM
Support server-side rendering
Faster and leaner
Projects using Vue.js
https://github.com/vuejs/awesome-vue#projects-using-vuejs
References
IDE:
Educational: