VueJS Notes

vuejs_notes.md

My Study notes for VueJS

Reference a Component relative from the src folder

import Hello from '@/components/Hello'

in this case @ resolves to "src" due to this webpack configuration

Lazy load a Component based on route

const routes = [
  {
    path: "/my-big-page",
    name: "my-big-page",
    component: () => import('@pages/MyBigPage.vue')
  }
]

Import component globally

import MyComponent from './components/MyComponent.vue'

Vue.component('my-component', MyComponent)

Choose component dynamically based on the variable

<component :is="layout">
<router-view/>
</component>

<script>
  export default {
    computed : {
      layout(){ return 'component-name'}
    }
  }
</script>

Keep the state of the component (dont destroy) when its no longer displayed

<keep-alive>
<your-component/>
</keep-alive>

Bind element attributes

<span v-bind:title="message">
...
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }

Toggle Element presence

 <span v-if="seen">Now you see me</span>
 ...
   data: {
    seen: true
  }

Loop over data and display it

<li v-for="todo in todos">
  {{ todo.text }}
</li>
...
 data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }

Handle click

<button v-on:click="reverseMessage">Reverse Message</button>
...
 methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }

Two-way binding between form input and app state

<input v-model="message">
...
data: {
    message: 'Hello Vue!'
 }

Register a component

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

Reactive data

• data properties is automatically added by vie to reactive system
• only those property that is added when creating the vue instance is added
• you can prevent changes on the data by having Object.freeze

Instance Properties and methods

• $data - the data object
• $el - the root element where vue is mounted on
• $options - options used when instantiating

see more

Lifecycle Hooks

• created
• mounted
• updated
• destroyed

Output Raw HTML

<span v-html="rawHtml"></span>