An Introduction to VueJS
Kyle Waters
Venture Data LLC
JavaScript Frameworks
- Object Oriented
- Reusable Component
- Real time data binding
Other frame works:
- Angular
- Angular 2
- ReactJS
Simple Example
- Template
- Props
- Data
- Computed
- Created
- Methods
- Watch
vuejs-demo.js
Template
- Literal
- Single Page Component
- String
- X-Templates
- Inline
- Render Functions
- JSX
Data Bindings
- Mustaches
- v-model
- v-bind(:)
- v-on(@)
Directives
- v-if
- v-else
- v-else-if
- v-show
- v-for
v-show hides the element, v-if removeds it from the DOM.
Props
- All values that can be passed into the component from the parent.
- Can require or set default
- Can not be changed by child.
use v-bind to pass as non-string
use emit to pass changes back to parent
Data
- Function that returns an object.
- Set remaining default values for object.
- Should include all remaining data bindings.
Computed
- Object of functions.
- Each function returns a computed value.
- Cached
Life Cycle Hooks
- created
- mounted
- updated
- destroyed
- created - objected created
- mounted - template rendered and placed in DOM
- updated - after the template has been rerendered
- destroyed - after teardown
Methods
- Event Handlers
- Call Backs
- Other non life cycle/computed functions
- Return values not cached
Watch
- Function will be called when member is changed.
- New value passed.
- Defaults to shallow.
Slots
- Used to place content in the template from the base tag
- Default
- named - tag
- named - template
Single Page Components
- Use NPM for installing/testing
- Single Page Applications
- Different Formatting
- Router
AJAX
- No official method
- AXIOS seems to be most common
UI Component Libraries
- Element
- Bootstrap-Vue
- Material
Emit
- Used to pass information from the child component to parent component