thulioph

import Vue from 'vue';
import MyComponent from '@/MyComponent.vue';

describe('MyComponent Spec', () => {
 it('Sets the correct default data', () => {
    const cpData = MyComponent.data();

    expect(cpData.message).toBe('Hello!');
  });
});

thulioph

<template>
  <span>{{ message }}</span>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello!'
    }

thulioph

<form @submit.prevent="doSomething"></form>

thulioph

<form id="myForm"></form>

<script>
  let myForm = document.getElementById('myForm');
  
  myForm.addEventListener('submit', doSomething, false);
  
  function doSomething(e) {
    e.preventDefault();
  }

thulioph

<a
  v-bind:href="url"
  v-bind:class="myClass">
  link
</a>

<a
  :href="url"
  :class="myClass">
  link

thulioph

<button v-on:click="doSomething">
  Click
</button>

<button @click="doSomething">
  Click
</button>

thulioph

<template>
  <button @click="toggle">
    Change Status
  </button>

  <p>{{ active }}</p>
</template>

<script>
export default {

thulioph

<template>
  <div>
    <h4>{{ address }}</h4>
  </div>
</template>

<script>
export default {
  props: {
    address: {

thulioph

export default {
  created() {
    console.warn('When the component was created.');
  },

  mounted() {
    console.warn('When the component was mounted.');
  },

  updated() {

thulioph

<template>
  <p>{{ isActive }}</p>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };