<div v-if="stateExample">I will show up if stateExample is true</div>

<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>

<div v-bind:class="someClassObject"></div>

<button v-on:submit.prevent="onSubmit"></button>

Vue.directive('tack');

<p v-tack>This element has a directive on it</p>

Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed'
  }
});

<p v-tack>I will now be tacked onto the page</p>

// JS
Vue.directive('tack', {
  bind(el, binding, vnode){
    el.style.position = 'fixed';
    el.style.top = binding.value + 'px';
  }
});

// HTML
<div id="app">
  <p>Scroll down the page</p>
  <p v-tack="70">Stick me 70px from the top of the page</p>
</div>

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg === 'left' "70">I'll now be offset from the left instead of the top</p>

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    el.style.top = binding.value.top + 'px';
    el.style.left = binding.value.left + 'px';
  }
});

// HTML
<p v-tack="{top: '40', left: '100'}">Stick me 40px from the top of the page and 100px from the left of the page</p>

// JS
Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if(binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  }
});

// main app
new Vue({
  el: "#app",
  methods: {
    handleScroll: function(evt, el) {
      if(window.scrollY > 50) {
        TweenMax.to(el, 1.5, {
          y: -10,
          opacity: 1,
          ease: Sine.easeOut
        });
      }
      
      return window.scrollY > 100;
    }
  }
});

// HTML
<div class="box" v-scroll="handleScroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
</div>