Difference between revisions of "Vue.js"
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 | + | ====index.html==== |
− | + | * has <code><div id="app"</code> and script includes main.js | |
− | * router/index.js | + | ====main.js==== |
− | === | + | * contains instantiation of Vue instance |
− | * | + | <pre> |
− | + | import Vue from 'vue'; | |
− | + | 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 | + | * 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
Contents
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 propertyv-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>
- router link is an a tag:
- 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 property
export default new Router( { routes: [ {path: '/:prop1/:prop2/:prop3', name: 'Hello', component: HelloWorld, props: true} ]
- After imports, add
Vue CLI
npm install -g @vue/cli
vue --version
vue ui
- Create new project, include vuex and vue router components
- Run Project task 1: serve
- Run Project task 2 (build):
2018 Tech Stack
- container
- nginx
- node.js
- TypeScript lang
- React & webpack + TypeScript