「Vue.js」カスタムディレクティブ(directives)を作成する

2021年9月22日

書式
directives: {
カスタムディレクティブ名:{
inserted: function(el){
処理コード}

使用例

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="apstudy">
　<!-- v-fontcustカスタムディレクティブを使用 -->
  <div v-fontcust>test study skill</div>
</div>
<script>
var apstudy = new Vue({
  //セレクタの定義
  el: '#apstudy',
  directives: {
  　//fontcustカスタムディレクティブを作成
    fontcust: {
     //inserted要素が親要素に対して挿入された時に呼ばれる
      inserted: function(el) {
        el.style.fontSize = '20pt'
      }
    }
  }
})
</script>

</body>
</html>

Vue.js

Posted by arkgame