main.js
import Vue from 'vue'
import App from './App.vue'
import Header from './components/include/Header.vue'
Vue.component('app-header',Header)
Vue.directive('awesome',{
bind(el,binding){
el.innerHTML = binding.value;
el.style.fontSize = '140px';
// if(binding.arg == 'red'){
// el.style.color = 'red';
// }else{
// el.style.color = 'green';
// }
el.style.color = binding.modifiers.red ? 'red' : 'blue';
el.style.fontSize = binding.modifiers.small ? '14px' : '50px';
console.log(binding.value);
console.log(binding);
}
})
export const bus = new Vue();
new Vue({
el:"#app",
render:h=>h(App)
})
App.js
<template>
<div>
<h1 v-awesome.red.small="tagLine">Custom Vue JS Directives</h1>
<h1 v-awesome.green.big="tagLine">Custom Vue JS Directives</h1>
<div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
tagLine:' Vue Js Custom directives'
}
},
directives:{
'awesome':{
bind(el,binding){
el.innerHTML = binding.value;
el.style.fontSize = '140px';
// if(binding.arg == 'red'){
// el.style.color = 'red';
// }else{
// el.style.color = 'green';
// }
el.style.color = binding.modifiers.red ? 'red' : 'blue';
el.style.fontSize = binding.modifiers.small ? '14px' : '50px';
console.log(binding.value);
console.log(binding);
}
}
},
components:{
},
methods:{
showAlert(){
alert('Alert Using Vue Directive');
}
},
created(){
}
}
</script>
<style>
</style>