VueJS Hello world

by p p

HTML

<!-- Include the library in the page -->
<link rel="stylesheet" href="https://unpkg.com/vue3-resize@0.0.16/dist/vue3-resize.css">

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue3-resize@0.0.16/dist/vue3-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)
 
var App = Vue.defineComponent({
  // Some data
  setup: function () {
    var show = Vue.ref(true)
    var count = Vue.ref(0)
    var width = Vue.ref(300)
    
    function handleResize () {
      count.value++
      console.log('handle')
    }

    function changeSize () {
      width.value = Math.round(Math.random() * 400) + 100
    }
    
    return {
      count: count,
      show: show,
      width: width,
      handleResize: handleResize,
      changeSize: changeSize,
    }
  }
})

Vue.createApp(App).use(Vue3Resize).mount('#app')