Vue

by lid0

HTML

<div id="app">

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height:200px;
}

Vue

class Rectangle {
  constructor(height, width) {
    this._height = height;
    this._width = width;
  }
  calcArea() {
    return this.height * this._width;
  }
  
  get area() {
    return this.calcArea();
  }
  
  get width() {
    return this._width;
  }
    
  get height() {
    return this._height;
  }
  
  set width(v){
      this._width = v 
  }
  
  moreWidth(){
    this.width+=20
  }
  
}




new Vue({
  el: "#app",
  template:`
    <div class="app">
    <p>
    area {{rect.area}}
    </p>
    <button @click="moreWidth">+width</button>
    </div>
    
  `,
  data: {
     rect:""
  },
  methods: {
  	  moreWidth(){
         this.rect.moreWidth();
      }
  },
  mounted(){
  	this.rect = new Rectangle(100,100)
  }
})