Difference between revisions of "Vue.js"
Jump to navigation
Jump to search
(→Vue.js) |
(→Files) |
||
Line 7: | Line 7: | ||
* App-level arg array contains: | * 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 | ** <code>const app = new Vue({ el: "#app" } )</code> - el stands for element, maps back to the div in index.html | ||
− | |||
** data | ** data | ||
** computed - contains methods. One-off computations in our dataset. Get access to the data using $this | ** computed - contains methods. One-off computations in our dataset. Get access to the data using $this | ||
Line 17: | Line 16: | ||
*** beforeDestroy() | *** beforeDestroy() | ||
* router/index.js | * router/index.js | ||
+ | |||
===Directives=== | ===Directives=== | ||
* directive inside HTML tags start with v- | * directive inside HTML tags start with v- |
Revision as of 18:38, 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
- 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 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
- 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>
- 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