Sau một vài bài viết giới thiệu các tính năng của VueJS Framwork thì hôm nay mình xin giới thiệu với các bạn thêm tính năng Transitioning State và Renderer Function.

Transitioning State

Như bài trước mình đã giới thiệu về tính năng Transition Effects là 1 tính năng hoàn hảo dành cho những ai muốn customize lại animate trên pages của mình,nó hỗ trợ tối đa các lib third-party về css và js và đã build thành 1 feature hoàn thiện dành cho dev và ngoài ra thì VueJS còn có thêm 1 tính năng để cho các Element trên DOM có thể linh hoạt hơn, sống động hơn thay vì chỉ bind và render lại trên DOM bằng JQuery.Và đó chính là Transitioning State.

Hệ thống Transition của Vuejs đã cung cấp rất nhiều cách để xử lý các sư kiện như là entering,leaving và lists,nhưng chúng ta cần phải biết là animating nào để xử lý cho actions đó để pages trở nên chuyên nghiệp hơn.1 vài ví dụ về các animation hay gặp :

1. Numbers and calculations
2. Colors displayed.
3. The size and other properties of elements.

Chúng ta có thể làm động các state khi có thay đổi bằng việc sử dụng 3rd-party libs giữa các state,kết hợp với các thành phần trong hệ thống.

Animating State with Watchers

Watchers object cho phép chúng ta thay đổi bất kỳ thuộc tính nào bằng số vào trong các thuộc tính khác 1 cách sinh động,điều này nghe thì có vẻ như là rất phức tạp và hơi trừu tượng nên mình sẽ có 1 demo nhỏ sau với việc sử dụng thêm 1 3rd-party là Tween.js :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>

 new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    animatedNumber: 0
  },
  watch: {
    number: function(newValue, oldValue) {
      var vm = this
      function animate (time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 500)
        .onUpdate(function () {
          vm.animatedNumber = this.tweeningNumber.toFixed(0)
        })
        .start()
      animate()
    }
  }
})

Example is here

Ở ví dụ trên,khi chúng ta thay đổi number thì sự thay đổi đó sẽ được animate (thể hiện lại bằng cách sinh động hơn cho user) tại input ở bên dưới.Đó là 1 ví dụ về việc sử dụng Tween.js libs để thể hiện rõ 1 animate khi thay đổi số,chúng ta sẽ cùng xem thêm ví dụ về 1 action mà thường xảy ra hơn đó là về sự thay đổi color của elements :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/tween.js@16.3.4"></script>
<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>
<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Enter a color"
  >
  <button v-on:click="updateColor">Update</button>
  <p>Preview:</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>

var Color = net.brehaut.Color
new Vue({
  el: '#example-7',
  data: {
    colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate (time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()
      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})

.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}

Example is here

1 điều đặc biệt trong demo nhỏ ở trên như chúng ta đã thấy là color của element sẽ thay đổi ngay khi chúng ta thay đổi text về bất kỳ 1 color nào,thật thú vị cho các web-site mà được hoàn thiện UI với các tính năng mà Vuejs cung cấp phải không nào .

Render Functions

Đây là 1 tính năng hay nữa của Vuejs Framework mà mình muốn giới thiệu trong bài viết này.Vue khuyến khích chúng ta việc sử dụng để build lên HTML của bạn trong phần lớn các trường hợp.Tuy nhiên có những trường hợp mà bạn thực sự cần 1 chương trình có đầy đủ tính năng của JavaScript.Đó chính là nơi mà bạn cần sử dụng Render Function,1 tính năng gần như thay thế compiler bình thường cho Templates.

Chúng ta cùng tìm hiểu rõ hơn thông qua 1 ví dụ đơn giản để biết render function sẽ đươc sử dụng thực tiễn như thế nào.

<anchored-heading :level="1">Hello world!</anchored-heading>
<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Khi bạn bắt đầu với 1 component chỉ dùng để gen ra 1 heading với thược tính level,bạn sẽ nhanh chóng nhận được template tương ứng trong anchored-heading-template template.Nhưng ở đây chúng ta thấy việc khai báo hết các tag từ h1 -> h6 như vậy có lẽ sẽ ko phải là cách tốt nhất cho trường hợp này,thay vào đó vue cung cấp thêm $slots object và func createElement để tạo ra các tag h tương ứng với level được khai báo ở anchor elements.Như vậy code của chúng ta sẽ clear và có thể tái sử dụng được nhiều hơn thay vì đang hardcode tại templates.

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Ngắn hơn rất nhiều phải không nào,nhưng nó yêu cầu bạn sẽ phải có hiểu biết tốt về các thuộc tính của các instance trong Vue.Trong trường hợp này,bạn muốn biết khi nòa bạn sẽ truyền args children mà ko cần thuộc tính slot vào trong 1 component, giống như Hello world bên trong anchor-heading,các đối tượng children đó được stored lại trên component instance $slots.default.

Trên đây mình đã giới thiệu sơ qua về 2 tính năng của Vue là Transition State và Render function.Cảm ơn các bạn đã ghé đọc bài viết và hy vọng các bạn sẽ áp dụng nó vào project của mình 1 cách tốt nhất

Links reference :

render function

transitioning state