Vue.js

Vue.js

Files

• index.html has <div id="app" and script includes main.js
• main.js - contains instantiation of Vue instance
• App.vue - top level component into which we compose other components
• App-level arg array contains:
  • const app = new Vue({ 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

Directives

• directive inside HTML tags start with v-
• v-bind:____="someDataStoreObj - bind keeps something up-to-date with some data store property
• v-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

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
• Components have templates, script, and styling
• export default { props: ['id, 'age', 'weight] }
  • name = "component_name"
  • components: [ subcomponent1, subcomponent2 ]
• <style scoped>

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>
• 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