register directives locally

Author: hootlex

index.html

@@ -13,23 +13,24 @@ <h2>Click Outside</h2>
  </div>
 
  <script type="text/javascript">
- Vue.directive('click-outside', {
- bind (el, binding) {
- el.__ClickOutsideHandler__ = event => {
- if (!(el === event.target || el.contains(event.target))) {
- binding.value(event)
- }
- }
- document.body.addEventListener('click', el.__ClickOutsideHandler__)
- },
- unbind (el) {
- document.body.removeEventListener('click', el.__ClickOutsideHandler__)
- }
- })
-
  new Vue({
  el: "#app",
  data: {},
+ directives: {
+ clickOutside: {
+ bind (el, binding) {
+ el.__ClickOutsideHandler__ = event => {
+ if (!(el === event.target || el.contains(event.target))) {
+ binding.value(event)
+ }
+ }
+ document.body.addEventListener('click', el.__ClickOutsideHandler__)
+ },
+ unbind (el) {
+ document.body.removeEventListener('click', el.__ClickOutsideHandler__)
+ }
+ }
+ },
  methods: {
  clickedOutside () {
  alert('you clicked outside 👏')