02-Snippets/05-Directives.html

<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
    <title>Directives</title>
    <!-- https://vuejs.org/guide/reusability/custom-directives.html -->
  </head>
  <body>
    <div id="app">
      <h1>Directives</h1>

      <input v-focus>

      <alert-box></alert-box>
    </div>
  </body>
</html>


<script type="text/javascript">
  const app = Vue.createApp({});

  // Register a global custom directive called `v-focus`
  app.directive('focus', {
    mounted: function(el) {
      el.focus();
    },
  });

  app.component('alert-box', {
    template: `<p v-alert>Black Alert!!</p>`,
    directives: {
      alert: {
        beforeMount(el) {
          console.log('beforeMount el', el);
        }
      }
    }
  });

  app.mount("#app");
</script>


<!-- livereload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>