2,466
edits
Changes
Jump to navigation
Jump to search
→main.js
==Vue.js==
===Files===
====index.html====* has <code><div id="app"</code> and script includes main.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===Component templates=store/index.js====* Computed property - double mustache inside the component templateEntrypoint into Vuex* Components have templates, script, and styling* <code>export default { props: ['id, 'age', 'weight] }</code>
===Directives===
* directive inside HTML tags start with v-
* <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
===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===
==Vuex==
* 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 VuexVue.use( Vuex ); // Create storeexport default new Vuex.store( { modules: { ModuleName }}); </pre>
==Vue Router==
* Single page 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 App.vue, add <code><router-view/></code> tag.
