Giới thiệu về Vuejs

2017-10-19

Vài lời giới thiệu

VueJs là một Javascript Framework mạnh mẽ, nó không giống như một vài framework monolithic khác khá cồng kềnh,gom hết vào một chỗ, thì Vue lại là 1 framework nhẹ nhàng, chỉ cần thêm core library vào ứng dụng là có thể triển ngay. <(“)

<script src="https://unpkg.com/vue"></script>

Chỉ cần nhúng một dòng thế này là có thể bắt đầu với Vue

Vì Vue là Javascript framework mà hiện nay Javascript đang rất phổ biến ở mảng cross-platform, nên Vue cũng vậy. Nếu Angular có Ionic thì Vue có Quasar Framework, có thể deploy trên cả Desktop (dùng Electron) và Mobile (dùng Cordova). Hoặc nếu đối với những người thích viết một ứng dụng Native 100% trên mobile như React Native thì Vue đã có Weex hoặc là NativeScript.
quasar

Vue

Kiến trúc của Vue là MVVC (Model - View - ViewModel)

vue

Để bắt đầu với Vue, ta sẽ khởi tạo 1 vue instance, với property el chính là view ta trỏ đến:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Doge'
  }
})

Tiếp theo ta sẽ tạo một view với id là “app”:

<div id="app">
  {{ message }}
</div>

Và đây là kết quả:

Directive trong Vue

Trong Vue, các thuộc tính riêng do Vue cung cấp được gọi là “directive”, mọi directive trong Vue đều được bắt đầu bằng v-, ví dụ với việc muốn bind (ràng buộc) các attribute của DOM, ta có thể dùng directive v-bind:

var app = new Vue({
  el: '#app',
  data: {
    url: 'http://dogecode.net/'
  }
})

Và đây là view:

<div id="app">
  <a v-bind:href="url">Doge Code</a>
</div>

Kết quả:

Trong ví dụ trên, attribute “href” đã bị ràng buộc với property “url” của object app (Vue instance).

Điều kiện

Chúng ta có thể ẩn và hiện một element khá dễ dàng bằng cách sử dụng directive v-ifv-else:

var app = new Vue({
  el: '#app'
  data: {
    show: false
  }
})
<div id="app">
  <div v-if=show>
    Boku no picu incomming!
  </div>
  <div v-else>
    Nothin
  </div>
  <!-- ==> Nothin -->
</div>

Bây giờ nếu các bạn F12 và mở console trên trình duyệt lên, gõ vào app.show = true sẽ thấy điều bất ngờ.

Vòng lặp

Chúng ta có thể duyệt các phần tử trong mảng và render ra bằng cách dùng directive v-for:

var app = new Vue({
  el: '#app',
  data: {
    idols: [
      {name: 'Kirara Asuka', born: '1988'},
      {name: 'Rina Ishihara', born: '1987'},
      {name: 'Yui Hatano', born: '1988'},
      {name: 'Ai Shinozaki', born: '1992'},
    ]
  }
})
<div id="app">
  <ol>
    <li v-for="idol in idols">
    {{ idol.name }} - {{ idol.born }}
    </li>  
  </ol>
</div>

Và đây là kết quả:

Two-Way Data Binding

Trong các ví dụ trên, dữ liệu mới chỉ đi theo một chiều từ Model => ViewModel và hiển thị trên View.
Trong Vue có một directive là v-model sẽ cho dữ liệu được đi hai chiều còn gọi là two-way data binding (Model <=> ViewModel <=> View):

var app = new Vue({
  el: '#app',
  data: {
    text: 'Cyka blyat'
  }
})
<div id="app">
  <input type="text" v-model="text"> 
  <p>
  {{text}}
  </p>
</div>

Kết quả:

Xử lí sự kiện

Để người dùng tương tác với ứng dụng, chúng ta có thể dùng directive v-on để đính kèm các event listener và gọi các method (phương thức) trên đối tượng Vue.

var app = new Vue({
  el: '#app',
  data: {
    message: 'một cộng một bằng hai'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')
    }
  }
})
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Đảo từ</button>
</div>

Kết quả:

Tổng kết

Trên đây là màn mở đầu về Vue cho nên chỉ mới đi sơ qua, ta sẽ thọc sâu vào nó sau. :))