Master Vue.js: From Basics to Advanced Component Practices

Vue Official Overview

Vue.js is a data‑driven UI library that focuses on the view layer, offering simple APIs for reactive data binding and component composition. It is easy to learn and integrates well with other libraries.

Basic Usage

Vue is easier to pick up than React or Angular; learning mainly through documentation with videos as supplement.

Installation Methods

Include Vue via a <script> tag; Vue becomes a global variable, suitable for small projects with frequent DOM operations.

Use the official Vue CLI to scaffold large SPA projects with built‑in webpack configuration.

Example commands:

<code># Global install vue-cli
npm install -g vue-cli
# Create a project based on the webpack template
vue init webpack my-project
cd my-project
npm install
npm run dev</code>

Common Issues and Solutions

Before Vue instance creation, mustache tags {{ }} may flash. Use v-cloak with CSS [v-cloak] { display: none } or v-text to hide them.

<code>[v-cloak] {
  display: none;
}</code>

<code>&lt;div v-cloak&gt;{{ message }}&lt;/div&gt;</code>

To make newly added data reactive, use vm.$set('b', 2) or Vue.set(data, 'c', 3) .

<code>vm.$set('b', 2)
// vm.b and data.b are now reactive</code>

<code>Vue.set(data, 'c', 3)
// vm.c and data.c are now reactive</code>

Important Notes

Props that are objects or arrays are passed by reference; modifying them in child components affects the parent.

Later watchers on the same element overwrite earlier ones, regardless of deep option.

Custom directives can access component data via

this.vm

.

Directive and prop names should not contain uppercase letters.

Component Practice

Components are the most powerful feature of Vue, allowing reusable custom elements. Single‑file components use the .vue extension.

Webpack Basics

Webpack is a module bundler that processes dependencies and emits static assets. It supports CommonJS and AMD, offers loaders for CSS, images, and more, and provides hot‑module replacement.

Install globally:

npm install -g webpack

Run with a custom config:

webpack --config webpack.custom.config.js

<code>module.exports = {
  entry: ['./app/entry.js'],
  output: {
    path: __dirname + '/assets/',
    publicPath: '/assets/',
    filename: 'bundle.js'
  }
};</code>

Vue‑CLI Templates

webpack – full‑featured setup with hot reload, linting, testing.

webpack‑simple – quick prototyping.

browserify – full‑featured Browserify + vueify.

browserify‑simple – simple Browserify setup.

simple – single HTML file.

.vue Files

Files ending with .vue are single‑file components. The vue-webpack-simple-boilerplate template is recommended for learning.

vue‑loader

vue‑loader processes .vue files within webpack.

vue‑router

vue‑router enables SPA routing by mapping routes to components.

Vuex

State management library; prefer the English documentation as the Chinese version may be outdated.

Vue 2.0

Links to announcements and code reviews for Vue 2.0.

Hot‑Reload

Hot reloading injects updated modules at runtime without losing application state.

Resources

Join the Vue community.

vue‑devtools Chrome extension.

Awesome Vue.js list.

coligo.io for tutorials and examples.