VueJS Hello world

by grano

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-resize.min.js"></script>

<!-- App -->
<div id="app">
  <div class="counter">Resize: {{ count }}</div>
  <div>
    <button @click="show = !show">Toggle</button>
    <button @click="changeSize">Change CSS size</button>
  </div>
  <div class="resized" v-if="show">
    <textarea :style="{ width: `${width}px` }"></textarea>
    <resize-observer @notify="handleResize"></resize-observer>
  </div>
</div>

CSS

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.counter {
  font-size: 42px;
  color: #42b983;
}

.resized {
  position: relative;
  border: solid 1px #42b983;
  margin: 12px;
  padding: 12px;
  display: inline-block;
}

JavaScript

console.clear()
console.log('Yes! We are using Vue version', Vue.version)

// New VueJS instance
var app = new Vue({
	// CSS selector of the root DOM element
  el: '#app',
  // Some data
  data () {
    return {
      count: 0,
      show: true,
      width: 300,
    }
  },

  methods: {
    handleResize () {
      this.count ++
      console.log('handle')
    },

    changeSize () {
      this.width = Math.round(Math.random() * 400) + 100
    },
  },
})