Vue.js

Vue.js

Files

index.html

• has <div id="app" and script includes main.js

main.js

• contains instantiation of Vue instance

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue( {
    store,
    render: h => h(App)
}).$mount( '#app' );

====App.vue====
* top level component into which we compose other components
* App-level arg array contains: <code>const app = new Vue({</code>
** el: "#app" - el stands for element, maps back to the div in index.html
** data
** computed - contains methods. One-off computations in our dataset. Get access to the data using $this
** filters - also contains methods that take arguments. Pass arguments to filter method inside the mustache using the pipe separator
** methods - can take an argument
** lifecycle methods
*** beforeCreate
*** mounted() fires when your app attaches to the DOM, a good time to fetch some data
*** beforeDestroy()
====router/index.js====
* Entrypoint into Vue Router
====store/index.js====
* Entrypoint into Vuex

===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
===Component===
* How you create a new HTML tag, you must register them
* Template can only return one top level element, if you need to return two, wrap within a div.
* Computed property - double mustache inside the component template
* Component scaffold has template, script, and style
* <code>export default { </code>
** props: ['id, 'age', 'weight] }
** name = "component_name"
** components: [ subcomponent1, subcomponent2 ]
* <code><style scoped></code>
===Vue Instance===

==Vuex==
* Single state tree - single source of truth
* State
* Getters
* Actions - called from components to commit a mutation
* Mutations
* Modules
===store/index.js===
<pre>
import Vuex from 'vuex';
import ModuleName from './modules/ModulName'

// Load Vuex
Vue.use( Vuex );

// Create store
export default new Vuex.store( {
    modules: {
        ModuleName
    }
}
);

Vue Router

• Single Page App (SPA)
• 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>
• 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 propertyexport default new Router( { routes: [ {path: '/:prop1/:prop2/:prop3', name: 'Hello', component: HelloWorld, props: true} ]

Vue CLI

1. npm install -g @vue/cli
2. vue --version
3. vue ui
4. Create new project, include vuex and vue router components
5. Run Project task 1: serve
6. Run Project task 2 (build):

2018 Tech Stack

• container
• nginx
• node.js
• TypeScript lang
• React & webpack + TypeScript