To install Vue CLI globally:

npm install -g @vue/cli
npm install -g @vue/cli-init

Creating a new project:

vue create project-name
cd project-name
npm run serve

Template Fundamentals

Basic template syntax includes:

Text interpolation: {{ variable }}
v-once: One-time rendering
v-html: HTML rendering
v-bind: Attribute binding (shorthand ':')

Conditional and List Rendering

Conditional rendering:

v-if
v-show

List rendering with v-for:

Array modification methods:
Vue.set(target, index, value)
this.$set(target, index, value)
this.$forceUpdate()

Event Handling and Form Binding

Event modifiers:

@click.stop - stops propagation
@click.prevent - prevents default
@keyup.enter - key-specific
@click.native - native component events

Form input binding with v-model modifiers:

v-model.lazy
v-model.number
v-model.trim

Computed Properties Example

<template>
  <div>
    <input v-model="searchTerm">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      items: [
        { id: 1, name: 'Item A' },
        { id: 2, name: 'Item B' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.includes(this.searchTerm))
    }
  }
}
</script>

Component Communication

Parent to child with props:

<ChildComponent :message="parentMessage" />

Child to parent with events:

// Child
this.$emit('update', childData)

// Parent
<ChildComponent @update="handleUpdate" />

Advanced Features

Dynamic components with keep-alive:

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

Custom directives:

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

Lifecycle and Utilities

Key lifecycle hooks:

created()
mounted()
beforeDestroy()

NextTick usage:

this.$nextTick(() => {
  // DOM update complete
})

Configuration and Optimization

Development proxy setup:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend:3000',
        changeOrigin: true
      }
    }
  }
}