#   
## Options API

We use **Options #key# API: Application Programming Interface #key#** in a Vue application to write and define different components. With this API, we can use options such as `data`, `methods`, and `mounted`.

To state it simply, Options API is an old way to structure a `Vue.JS` application. Due to some limitations in this API, [Composition API](https://www.educative.io/answers/how-to-implement-the-composition-api-in-vue3) was introduced in Vue 3.

## Syntax

The illustration given below shows the structure of an Options API.

## Code

Let's implement Options API and see how it works.

---
> **Note**: After executing, click on the "Add +1" button to increment the counter by 1. Press "Reset" to make it 0 again.

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#p1 {
  border: 1px solid black;
  margin-right: 220px;
  margin-left: 220px;
  padding: 10px;
}
#btn1 {
  padding: 10px;
  margin-right: 10px;
  color: green;
}
#btn2 {
  padding: 10px;
  margin-left: 10px;
  color: red;
}

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <p id="p1">You clicked {{ numOfClicks }} times.</p>
    <button id="btn1" @click="clickCount()">Add +1</button>
    <button id="btn2" @click="clearAll">Reset</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { numOfClicks: 0, };
  },
  created() {},
  methods: {
    clickCount: function () {
      this.numOfClicks++;
    },
    clearAll: function () {
      this.numOfClicks = 0;
    }
  },
};
</script>

<style> 
  @import './style.css';
</style>

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## Explanation

- Lines 1–7: We have the `<template>` tag. The **`<template>` tag** is where we define our HTML elements as written below (`<p>`, `<button>`, etc).

- Lines 9–25: We have our `<script>` tag where the core JavaScript of our program is written. We write our `data()`, `methods()`, `mounted()`, etc. inside `export default`. Inside the `<script>` tags, we have our method `clickCount()`, which counts the total number of clicks. We also have the `clearAll()` function that resets the count to 0.

- Line 27: We add #key# CSS: Cascading Style Sheet #key# for our program inside the `<style>` tags using `@import`.

How to use the Options API in Vue 2

Options API in Vue 2 structures applications using data, methods, and mounted, but was limited, leading to Vue 3's Composition API.