Difference between revisions of "Vue.js"

From Colettapedia
Jump to navigation Jump to search
Line 1: Line 1:
==2019 Tech Stack==
+
 
===Vue.js===
+
==Vue.js==
====Files====
+
===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====
+
===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====
+
===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====
+
===Vue Instance===
===Vuex===
+
==Vuex==
 
* Single state tree - single source of truth
 
* Single state tree - single source of truth
 
*  
 
*  
===Vue Router===
+
==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===
+
==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

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

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