Difference between revisions of "Vue.js"

From Colettapedia
Jump to navigation Jump to search
(7 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
==Vue.js==
 
==Vue.js==
 
===Files===
 
===Files===
* main.js - contains instantiation of Vue instance
+
====index.html====
* App.vue - top level component into which we compose other components  
+
* has <code><div id="app"</code> and script includes main.js
* router/index.js
+
====main.js====
===Component templates===
+
* contains instantiation of Vue instance
* Computed property - double mustache inside the component template
+
<pre>
* Components have templates, script, and styling
+
import Vue from 'vue';
* <code>export default { props: ['id, 'age', 'weight] }</code>
+
import App from './App.vue';
 +
import store from './store';
 +
 
 +
new Vue( {
 +
    store,
 +
    render: h => h(App)
 +
}).$mount( '#app' );
 +
</pre>
 +
 
 +
====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===
 
===Directives===
 
* directive inside HTML tags start with v-
 
* directive inside HTML tags start with v-
Line 16: Line 41:
 
* <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
 +
===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===
 
===Vue Instance===
 +
 
==Vuex==
 
==Vuex==
 
* Single state tree - single source of truth
 
* 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
 +
    }
 +
}
 +
);
 +
 
 +
</pre>
 +
 
 
==Vue Router==
 
==Vue Router==
* Single page App
+
* Single Page App (SPA)
 
* 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
 
* In App.vue, add <code><router-view/></code> tag.
 
* In App.vue, add <code><router-view/></code> tag.

Revision as of 19:21, 4 June 2019

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

  • Entrypoint into Vue Router

store/index.js

  • Entrypoint into Vuex

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

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

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