JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<div id="app">
  <div class="box box1" v-border:red>
    {{box1Message}}
  </div>
  <div class="box box2" v-border:blue>
    {{box2Message}}
  </div>
  <button @click="changeContent">Change Content</button>
  <div v-demo:foo.a.b="message"></div>
</div>

JavaScript

var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			box1Message: 'this is box 1',
			box2Message: 'this is box 2',    
      message: 'hello!'
		}
	},
	methods: {
		changeContent: function() {
    	this.box1Message = 'changed1';
    	this.box2Message = 'changed2';
		}
	},
  directives: {
  	border: function(el, binding) {
    console.log(binding);
    	el.style.borderColor = binding.arg;
    	el.style.borderWidth = '2px';
    	el.style.borderStyle = 'solid';
  	}
  }
});

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
});