Vue 2.0 Hello World

by acdcjunior

HTML

<script src="https://unpkg.com/vue"></script>
<h3>Open the console and click "show"</h3>
<div id="app">
  <div>
    <p>a</p>
    <input type="number" id="readonly" v-if="show">
    <p>b</p>
    <button type="button" @click="showInput" v-if="show">show</button>
    <p>c</p>
    <input type="number" id="timing" v-model="timing" v-if="!show" v-focus>
    <p>d</p>
  </div>

</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      show: true,
      timing: 123
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  methods: {
    showInput() {
      this.show = false
    }
  },
  directives: {
    focus: {
      inserted: function(el) {
      
        el.addEventListener("blur", () => {
          console.log("blur", document.querySelector('#app').outerHTML);
        });
        el.addEventListener("focus", () => {
          console.log("focus", document.querySelector('#app').outerHTML);
        });

        console.log('inserted', document.querySelector('#app').outerHTML);

        el.focus();

        Vue.nextTick(() => {
          console.log('nextTick', document.querySelector('#app').outerHTML)
        });
      }
    }
  }
})