Difference between revisions of "Vue.js"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
==2019 Tech Stack== | ==2019 Tech Stack== | ||
===Vue.js=== | ===Vue.js=== | ||
− | ==== | + | ====Component templates==== |
+ | * Computed property - double mustache inside the component template | ||
+ | * Components have templates, script, and styling | ||
+ | ====Directives==== | ||
+ | * directive inside HTML tags start with v- | ||
+ | * <code>v-bind:____="someDataStoreObj</code> - bind keeps something up-to-date with some data store property | ||
+ | * <code>v-if="varName"</code> | ||
+ | * <code>v-for:"i in datastoreobj"</code> | ||
+ | * <code>v-on:click="someMethod"</code> - binds a function to button | ||
+ | * <code><input v-model="message"></code> - direct two-way binding between input and app state | ||
+ | ====Vue Instance==== | ||
+ | ===Vuex=== | ||
+ | * Single state tree - single source of truth | ||
+ | * | ||
+ | ===Vue Router=== | ||
+ | * Single page App | ||
+ | * In index.js, after imports, add <code>Vue.use(Router)</code> | ||
+ | * In App.vue, add <code><router-view/></code> tag. | ||
+ | ===Vue CLI=== | ||
# <code>npm install -g @vue/cli</code> | # <code>npm install -g @vue/cli</code> | ||
# <code>vue --version</code> | # <code>vue --version</code> | ||
# <code>vue ui</code> | # <code>vue ui</code> | ||
− | + | # Create new project, include vuex and vue router components | |
− | + | # Run Project task 1: serve | |
− | + | # Run Project task 2 (build): | |
− | |||
==2018 Tech Stack== | ==2018 Tech Stack== |
Revision as of 17:10, 4 June 2019
Contents
2019 Tech Stack
Vue.js
Component templates
- Computed property - double mustache inside the component template
- Components have templates, script, and styling
Directives
- directive inside HTML tags start with v-
v-bind:____="someDataStoreObj
- bind keeps something up-to-date with some data store propertyv-if="varName"
v-for:"i in datastoreobj"
v-on:click="someMethod"
- binds a function to button<input v-model="message">
- direct two-way binding between input and app state
Vue Instance
Vuex
- Single state tree - single source of truth
Vue Router
- Single page App
- In index.js, after imports, add
Vue.use(Router)
- In App.vue, add
<router-view/>
tag.
Vue CLI
npm install -g @vue/cli
vue --version
vue ui
- Create new project, include vuex and vue router components
- Run Project task 1: serve
- Run Project task 2 (build):
2018 Tech Stack
- container
- nginx
- node.js
- TypeScript lang
- React & webpack + TypeScript