「Vue.js」カスタムディレクティブ(directives)を作成する
書式
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>
<!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>
<!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>