Difference between revisions of "Vue.js"

From Colettapedia
Jump to navigation Jump to search
Line 2: Line 2:
 
==Vue.js==
 
==Vue.js==
 
===Files===
 
===Files===
 +
* index.html has <code><div id="app"</code> and script includes main.js
 
* 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
 +
* App-level arg array contains:
 +
** <code>const app = new Vue({ el: "#app" } )<code> - 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
 
* router/index.js
===Component templates===
 
* Computed property - double mustache inside the component template
 
* Components have templates, script, and styling
 
* <code>export default { props: ['id, 'age', 'weight] }</code>
 
 
===Directives===
 
===Directives===
 
* directive inside HTML tags start with v-
 
* directive inside HTML tags start with v-
Line 16: Line 24:
 
* <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
 +
* Components have templates, script, and styling
 +
* <code>export default { props: ['id, 'age', 'weight] }</code>
 +
** name = "component_name"
 +
** components: [ subcomponent1, subcomponent2 ]
 +
* <code><style scoped></code>
 
===Vue Instance===
 
===Vue Instance===
 
==Vuex==
 
==Vuex==

Revision as of 18:37, 4 June 2019

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>

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