Skip to content

Latest commit

 

History

History
165 lines (107 loc) · 2.42 KB

README.md

File metadata and controls

165 lines (107 loc) · 2.42 KB
Raw

Getting Started With Vue

Official Vue Pages

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Installation

  • Install NPM & Node.js: Download installer here.
  • Install Typescript: npm install -g typescript
  • Install Vue CLI: npm install -g @vue/cli

VSC Extensions:

  • Vetur
  • Vue Snippets
  • TSLint

Support & Plugins

Support

  • Typescript

vue add typescript

  • Vue 3 (currently in separate release)

vue add vue-next

Component definitions have changed and we will need to change the default App.vue and HelloWord.vue files accordingly:

In HelloWorld.vue:

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: false,
    },
  },
});
</script>

In App.vue:

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  },
});
</script>
  • Property Decorator

npm install vue-property-decorator

Plugins

  • Vuetify

vue add vuetify

  • Notifications

npm install vue-notification

In main.js:

import Notifications from 'vue-notification'
 
Vue.use(Notifications)

Project Commands

Setup Existing Project

Navigate to the project folder and use following command:

npm install

Creating Project

Navigate to the desired folder and use following command:

vue create

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Displaying Data

Interpolation

{{ }}

Event Handling

@event

Binding to Properties

:property

Two-Way Binding Inputs

v-model

Add or remove DOM Elements

v-if

Hide or Show DOM Elements

v-show

Lists

v-for

Defining and Manipulating Data

Define

date()

Custom Logic

methods

Lifecycle Hooks

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

Property Depending on Values

computed

Logic on Data Model Changes

watch

Output Transformations

filter

Component Communication