Difference between revisions of "Vue.js"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
− | + | ||
− | + | ==Vue.js== | |
− | + | ===Files=== | |
* main.js - contains instantiation of Vue instance | * main.js - contains instantiation of Vue instance | ||
* App.vue - top level component into which we compose other components | * App.vue - top level component into which we compose other components | ||
* router/index.js | * router/index.js | ||
− | + | ===Component templates=== | |
* Computed property - double mustache inside the component template | * Computed property - double mustache inside the component template | ||
* Components have templates, script, and styling | * Components have templates, script, and styling | ||
* <code>export default { props: ['id, 'age', 'weight] }</code> | * <code>export default { props: ['id, 'age', 'weight] }</code> | ||
− | + | ===Directives=== | |
* directive inside HTML tags start with v- | * 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-bind:____="someDataStoreObj</code> - bind keeps something up-to-date with some data store property | ||
Line 16: | Line 16: | ||
* <code>v-on:click="someMethod"</code> - binds a function to button | * <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 | * <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 | * Single state tree - single source of truth | ||
* | * | ||
− | + | ==Vue Router== | |
* Single page App | * Single page App | ||
* In main.js, import the router directory, and add router to the list of properties inside <code>new Vue</code> declaration | * In main.js, import the router directory, and add router to the list of properties inside <code>new Vue</code> declaration | ||
Line 29: | Line 29: | ||
** <code>export default new Router( { routes: [ {path: '/', name: 'Hello', component: HelloWorld} ]</code> | ** <code>export default new Router( { routes: [ {path: '/', name: 'Hello', component: HelloWorld} ]</code> | ||
** Map a route to a property<code>export default new Router( { routes: [ {path: '/:prop1/:prop2/:prop3', name: 'Hello', component: HelloWorld, props: true} ]</code> | ** Map a route to a property<code>export default new Router( { routes: [ {path: '/:prop1/:prop2/:prop3', name: 'Hello', component: HelloWorld, props: true} ]</code> | ||
− | + | ==Vue CLI== | |
# <code>npm install -g @vue/cli</code> | # <code>npm install -g @vue/cli</code> | ||
# <code>vue --version</code> | # <code>vue --version</code> |
Revision as of 17:31, 4 June 2019
Contents
Vue.js
Files
- main.js - contains instantiation of Vue instance
- App.vue - top level component into which we compose other components
- router/index.js
Component templates
- Computed property - double mustache inside the component template
- Components have templates, script, and styling
export default { props: ['id, 'age', 'weight] }
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 main.js, import the router directory, and add router to the list of properties inside
new Vue
declaration - In App.vue, add
<router-view/>
tag.- router link is an a tag:
<router-link to="pathfromindexjs">Page Name</router-link>
- router link is an a tag:
- In router/index.js
- After imports, add
Vue.use(Router)
export default new Router( { routes: [ {path: '/', name: 'Hello', component: HelloWorld} ]
- Map a route to a property
export default new Router( { routes: [ {path: '/:prop1/:prop2/:prop3', name: 'Hello', component: HelloWorld, props: true} ]
- After imports, add
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