Vue.js Reference

Post by: syed hussain in All JavaScript

Summary

Here is a reference sheet for anyone working with Vue.js. There are sample snippets of code to help quickly get started writing Vue.js code.

Note: This page is work in progress.

Create a new Vue.js Project with Vue CLI

Assuming that node and the Vue CLI is installed. Open the working directory in a terminal and enter:

vue ui

This will open a new browser session and load the Vue Portal.

Build & Run a project

From the command line type:

npm run serve

This will output something similar to:

 DONE  Compiled successfully in 5427ms                                                                                                                        16:06:27

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.26:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

File Structure

index.htm – this is the file that is served.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Create a new Vue instance

Call a method

Return a data property using this keyword

V-bind directive

Create a link dynamically by using the v-bind directive.

Tags:
18 May 2020
0