[Vue] Directives

<template>
  <div>
    <h1 v-focus>Directives</h1>
    <h2 v-once>유저의 이름은 {{ username }}</h2>
    <button @click="changeName">change name</button>

    <!-- pre 사용하면 해당 dom은 컴파일에서 제외되고 출력 -->
    <h2 v-pre>{{ username }}</h2>
    <input v-focus type="text" />
    highlight -> <input type="text" v-highlight />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
    };
  },
  directives: {
    focus: {
      mounted(e1) {
        e1.focus();
      },
    },
    highlight: {
      mounted(e1) {
        console.log({ e1 });
        e1.oninput = () => {
          e1.style.background = "salmon";
          e1.style.color = "#fff";
        };
        e1.onmouseout = () => {
          e1.style.background = "green";
        };
      },
    },
  },
  methods: {
    changeName() {
      console.log("name change!!!");
      this.username = "code!!!";
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>