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>