magic vue.js

• This is for vue.js projects, which is amazing and full of magic.

Create Vue App

• Install vue-cli via the command

  npm install -g vue-cli
  

• Create vue app via the command vue create project-name, then select the relevant configuration.
• If you want to create the default project, then the command is

  vue create project-name --default
  

Components Sample

• The 1st input sample with bootstrap, including Button, Text, Password, File, Checkox, Color, Date, Datetime, Email, Radio, Range, Submit, Url and Month.
• Add text color, background color, badge and breadcrumb sample.
• Will continue to update more...

Template Data Sample

• This sample is for data binding, which including data, computed, methods and filter properties.
• Add directives: v-text, v-html, v-if, v-else, v-else-if, v-show, v-on data binding test.
• Add v-for directive, table, button component, array property and even click event.

Event Handle Sample

• This sample is for event handling. e.g. click, mousedown, mousemove, mouseleave, keydown.

Model Sample

• This sample is for model binding ( one-way & two-way) or handling. e.g. form-check, form-control. form-group.
• Add watch property.

Components Data Sample

• This sample is for data or attributes delivery between different pages.
• Add child 1 and child 2 component.
• Add the emit and props property.
• Add slot (named) operation.
• Add product display component.

Vue Lifecycles Sample

• This sample is for vue applicaiton lifecycle.
• The vue applicaiton lifecycle includes: before create, created, before mount, mounted, before update, updated, activated, deactivated, before destroy, destroyed and error captured.

Product Sample

• This sample is for a simple product application.
• Add product editor.

Product Data Sample

• This sample is based on Product Sample, and adding new feature to get data via REST API.

Product Vuex Sample

• This sample is based on Product Data Sample, and adding new feature implemented via Vuex.

Product Dynamic Sample

• This sample is based on Product Vuex sample, and add new feature for dyanamic display component.

Product Router Sample

• This sample is based on Product Dynamic sample, add new feature implemented via Vue-Router.

Advanced Url Route

• This sample is based on Product Router sample, add new feature on Url routing.

Transitions Sample

• This sample is for transitions feature.

Extending Vue Sample

• This sample is for extending vue features.